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
200
A Common Design Language
okonet
2
1.7k
Make Linting Great Again (Long version)
okonet
0
68
Modular CSS v2 (CSS-in-JS edition)
okonet
3
1.1k
Modular CSS — Agent Conf '17 Edition
okonet
3
360
Modular CSS
okonet
3
260
JavaScript для насыщенных пользовательских интерфейсов
okonet
0
85
Профессия "Front-end архитектор"
okonet
0
140
Other Decks in Programming
See All in Programming
AI Coding Agent Enablement in TypeScript
yukukotani
17
7.2k
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
710
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
yuisakamoto
6
960
Use Perl as Better Shell Script
karupanerura
0
660
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
1.1k
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
300
衛星の軌道をWeb地図上に表示する
sankichi92
0
250
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6.1k
UPDATEがシステムを複雑にする? イミュータブルデータモデルのすすめ
shimomura
0
220
Practical Domain-Driven Design - Workshop at NDC 2025
mufrid
0
130
PT AI без купюр
v0lka
0
200
What Spring Developers Should Know About Jakarta EE
ivargrimstad
1
610
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
82
Being A Developer After 40
akosma
91
590k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Speed Design
sergeychernyshev
30
970
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.3k
GraphQLとの向き合い方2022年版
quramy
46
14k
Into the Great Unknown - MozCon
thekraken
39
1.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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