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
190
A Common Design Language
okonet
2
1.5k
Make Linting Great Again (Long version)
okonet
0
63
Modular CSS v2 (CSS-in-JS edition)
okonet
3
1k
Modular CSS — Agent Conf '17 Edition
okonet
3
330
Modular CSS
okonet
3
250
JavaScript для насыщенных пользовательских интерфейсов
okonet
0
76
Профессия "Front-end архитектор"
okonet
0
130
Other Decks in Programming
See All in Programming
Macとオーディオ再生 2024/11/02
yusukeito
0
300
僕がつくった48個のWebサービス達
yusukebe
20
17k
C#/.NETのこれまでのふりかえり
tomokusaba
1
180
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
160
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
2.6k
Identifying User Idenity
moro
6
9.2k
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
750
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
490
役立つログに取り組もう
irof
28
9.2k
Amazon Qを使ってIaCを触ろう!
maruto
0
350
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
160
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.2k
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
20
1.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Automating Front-end Workflow
addyosmani
1366
200k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
What's in a price? How to price your products and services
michaelherold
243
12k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Six Lessons from altMBA
skipperchong
26
3.5k
Speed Design
sergeychernyshev
24
580
Agile that works and the tools we love
rasmusluckow
327
21k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Statistics for Hackers
jakevdp
796
220k
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