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
92
Профессия "Front-end архитектор"
okonet
0
150
Other Decks in Programming
See All in Programming
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
780
decksh - a little language for decks
ajstarks
4
21k
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
130
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
320
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
130
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
400
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7.1k
QA x AIエコシステム段階構築作戦
osu
0
220
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
Android 15以上でPDFのテキスト検索を爆速開発!
tonionagauzzi
0
180
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Music & Morning Musume
bryan
46
6.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
GitHub's CSS Performance
jonrohan
1031
460k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Git: the NoSQL Database
bkeepers
PRO
431
65k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
What's in a price? How to price your products and services
michaelherold
246
12k
Documentation Writing (for coders)
carmenintech
73
4.9k
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