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
62
Modular CSS v2 (CSS-in-JS edition)
okonet
3
980
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
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
650
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
830
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
410
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
実践!難読化ガイド
mitchan
0
210
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
680
Shinjuku.rb#95:心の技術書紹介
free_world21
1
110
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
Clear Off the Table
cherdarchuk
91
320k
Agile that works and the tools we love
rasmusluckow
327
20k
How STYLIGHT went responsive
nonsquared
93
5.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
19k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
Scaling GitHub
holman
458
140k
Infographics Made Easy
chrislema
239
18k
Why Our Code Smells
bkeepers
PRO
334
56k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Rails Girls Zürich Keynote
gr2m
93
13k
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