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
180
A Common Design Language
okonet
2
1.3k
Make Linting Great Again (Long version)
okonet
0
51
Modular CSS v2 (CSS-in-JS edition)
okonet
3
920
Modular CSS — Agent Conf '17 Edition
okonet
3
310
Modular CSS
okonet
3
250
JavaScript для насыщенных пользовательских интерфейсов
okonet
0
73
Профессия "Front-end архитектор"
okonet
0
120
Other Decks in Programming
See All in Programming
ONE WEDGE_Company_Information
1wedge
0
160
Compiling Python to WebAssembly with py2wasm
syrusakbary
0
130
PHP で読む楽しいコアダンプ
sji
0
240
Crafting a Own PHP - ウキウキ手作りミニマリストPHP
uzulla
4
1.1k
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
350
AppDeveloperCon 2024 EU: Building polyglot developer experiences in 2024
salaboy
0
370
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
3
530
「コンパイル時のユニットテスト」導入するとユニットテストを 書かなくてよくなるのか?
tomohisa
9
2.1k
GitHub Copilot Tips and Tricks
yuichielectric
26
7.4k
Material 3で Material 2ぽい見た目にする
numeroanddev
2
250
Docker ハンズオン / docker-hands-on
suzukihoge
51
16k
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
275
33k
A Modern Web Designer's Workflow
chriscoyier
689
190k
In The Pink: A Labor of Love
frogandcode
137
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
Designing with Data
zakiwarfel
94
4.8k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
A Philosophy of Restraint
colly
195
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
How to name files
jennybc
62
92k
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