Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Make Linting Great Again
Search
Andrey Okonetchnikov
April 21, 2017
Programming
0
160
Make Linting Great Again
Slides from my presentation at React Amsterdam 2017
Andrey Okonetchnikov
April 21, 2017
Tweet
Share
More Decks by Andrey Okonetchnikov
See All by Andrey Okonetchnikov
Component-Driven Design Systems Workshop
okonet
0
190
A Common Design Language
okonet
2
1.4k
Make Linting Great Again (Long version)
okonet
0
62
Modular CSS v2 (CSS-in-JS edition)
okonet
3
960
Modular CSS — Agent Conf '17 Edition
okonet
3
320
Modular CSS
okonet
3
250
JavaScript для насыщенных пользовательских интерфейсов
okonet
0
74
Профессия "Front-end архитектор"
okonet
0
120
Other Decks in Programming
See All in Programming
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
最近追加した型の紹介とその振り返り
aki19035vc
0
180
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
CSC307 Lecture 10
javiergs
PRO
0
310
Namespace on read
tagomoris
2
370
【Go言語】golangci-lintの使い方
tomo1227
0
280
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
127
8.7k
The Invisible Side of Design
smashingmag
294
50k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Done Done
chrislema
179
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
A Philosophy of Restraint
colly
200
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Building Your Own Lightsaber
phodgson
101
5.9k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Transcript
Make Linting Great Again! with @okonetchnikov
What the lint?!
–Wikipedia “lint or a linter is any tool that flags
suspicious usage in software written in any computer language.”
Why lint?
You don’t need to uglify your code if it’s already
ugly!
Using lint tools leads to 1. Fewer bugs 2. Better
readability => less time for code reviews 3. Faster development
– http://www.prweb.com/releases/2013/1/prweb10298185.htm “On average, software developers spend 50% of their
time finding and fixing bugs.”
– http://www.prweb.com/releases/2013/1/prweb10298185.htm “…this inefficiency is estimated to cost the global
economy $312 billion per year.”
None
How to lint?
Stylelint JSON Lint
—Faster development?! —Really?!
None
None
None
None
None
None
None
None
None
Raise your hand if this sound familiar to you ✋
None
None
None
None
– Everyone “I wish I could lint before committing the
changes to the repository”
None
git hooks are 1. Hard to setup 2. Hard to
manage 3. Hard to share across the team
npm install -D husky yarn add --dev husky
{ "scripts": { "precommit": "eslint ." } }
None
git hooks are 1. Hard to setup 2. Hard to
manage 3. Hard to share across the team 4. Slow 5. Displaying irrelevant results
Meet lint-staged!
npm install -D lint-staged yarn add --dev lint-staged
{ "scripts": { "precommit": "lint-staged" } }
{ "scripts": { "precommit": "lint-staged" }, "lint-staged": { "*.js": "eslint"
} }
None
git hooks are 1. Hard to setup 2. Hard to
manage 3. Hard to share across the team 4. Very slow 5. Displaying irrelevant results AWE S OM E!
There is more!
Automatically fix lint errors
{ "lint-staged": { "*.js": [ "eslint --fix", "git add" ]
} }
Automatically reformat your code
{ "lint-staged": { "*.js": [ "prettier --write", "git add" ]
} }
None
lint-staged and prettier being used in create-react-app
None
https://github.com/okonet/lint-staged
Please solve real problems!
Thank You!
Andrey Okonetchnikov @okonetchnikov http://okonet.ru https://github.com/okonet