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
100
Профессия "Front-end архитектор"
okonet
0
150
Other Decks in Programming
See All in Programming
技術的負債の正体を知って向き合う
irof
0
180
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
980
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
500
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
230
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.8k
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
32k
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
2
430
Serena MCPのすすめ
wadakatu
4
1k
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
180
チームの境界をブチ抜いていけ
tokai235
0
180
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.4k
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
5.1k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
185
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Why Our Code Smells
bkeepers
PRO
340
57k
Bash Introduction
62gerente
615
210k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
How STYLIGHT went responsive
nonsquared
100
5.8k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Site-Speed That Sticks
csswizardry
13
910
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Speed Design
sergeychernyshev
32
1.2k
The Cult of Friendly URLs
andyhume
79
6.6k
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