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
170
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
210
A Common Design Language
okonet
2
1.8k
Make Linting Great Again (Long version)
okonet
0
72
Modular CSS v2 (CSS-in-JS edition)
okonet
3
1.1k
Modular CSS — Agent Conf '17 Edition
okonet
3
370
Modular CSS
okonet
3
270
JavaScript для насыщенных пользовательских интерфейсов
okonet
0
95
Профессия "Front-end архитектор"
okonet
0
150
Other Decks in Programming
See All in Programming
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
570
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.3k
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
170
Constant integer division faster than compiler-generated code
herumi
2
670
MLH State of the League: 2026 Season
theycallmeswift
0
110
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
990
The State of Fluid (2025)
s2b
0
180
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
700
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
130
Langfuseと歩む生成AI活用推進
licux
3
290
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
1.1k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
890
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Scaling GitHub
holman
462
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Adopting Sorbet at Scale
ufuk
77
9.5k
Building an army of robots
kneath
306
45k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Docker and Python
trallard
45
3.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
The Language of Interfaces
destraynor
160
25k
Unsuck your backbone
ammeep
671
58k
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