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
73
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
100
Профессия "Front-end архитектор"
okonet
0
150
Other Decks in Programming
See All in Programming
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
Towards Transactional Buffering of CDC Events @ Flink Forward 2025 Barcelona Spain
hpgrahsl
0
120
Ktorで簡単AIアプリケーション
tsukakei
0
110
iOSでSVG画像を扱う
kishikawakatsumi
0
170
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
130
品質ワークショップをやってみた
nealle
0
650
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
120
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.6k
EMこそClaude Codeでコード調査しよう
shibayu36
0
450
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
47k
Catch Up: Go Style Guide Update
andpad
0
260
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
520
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
The Invisible Side of Design
smashingmag
302
51k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Fireside Chat
paigeccino
41
3.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
2.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
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