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
64
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
77
Профессия "Front-end архитектор"
okonet
0
130
Other Decks in Programming
See All in Programming
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
120
Outline View in SwiftUI
1024jp
1
330
Click-free releases & the making of a CLI app
oheyadam
2
110
Quine, Polyglot, 良いコード
qnighy
4
640
RubyLSPのマルチバイト文字対応
notfounds
0
120
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
290
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
100
CSC509 Lecture 11
javiergs
PRO
0
180
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
170
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
Featured
See All Featured
Bash Introduction
62gerente
608
210k
How STYLIGHT went responsive
nonsquared
95
5.2k
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
KATA
mclloyd
29
14k
Happy Clients
brianwarren
98
6.7k
Designing for Performance
lara
604
68k
Done Done
chrislema
181
16k
RailsConf 2023
tenderlove
29
900
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Gamification - CAS2011
davidbonilla
80
5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
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