Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Make Linting Great Again
Andrey Okonetchnikov
April 21, 2017
Programming
0
140
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
120
A Common Design Language
okonet
2
930
Make Linting Great Again (Long version)
okonet
0
29
Modular CSS v2 (CSS-in-JS edition)
okonet
3
760
Modular CSS — Agent Conf '17 Edition
okonet
3
280
Modular CSS
okonet
3
230
JavaScript для насыщенных пользовательских интерфейсов
okonet
0
60
Профессия "Front-end архитектор"
okonet
0
81
Other Decks in Programming
See All in Programming
Records の使い方はこれでいいの? をみんなで考えたい / Java DO #20
gishi_yama
0
120
Amazon Lookout for Visionで 筆跡鑑定してみた
cmnakamurashogo
0
170
How to Test Your Compose UI (Droidcon Berlin 2022)
stewemetal
1
130
モデルの定義に基づくバリデーションを実現するためのpydantic入門
daikikatsuragawa
0
120
테라폼으로 ECR 관리하기 (How to Manage ECR with Terraform)
posquit0
0
530
「困りごと」から始める個人開発
ikumatadokoro
4
260
Regular expressions basics/正規表現の基本
kishikawakatsumi
6
260
ZOZOTOWNにおけるDatadogの活用と、それを支える全社管理者の取り組み / 2022-07-27
tippy
1
3.3k
Babylon.jsで作ったsceneをレイトレーシングで映えさせる
turamy
1
210
YATA: collaborative documents and how to make them fast
horusiath
1
160
Windows コンテナ Dojo 第5回 OpenShift で学ぶ Kubernetes 入門
oniak3ibm
PRO
0
190
Getting Started With Data Structures
adoranwodo
1
260
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
415
59k
The World Runs on Bad Software
bkeepers
PRO
57
5.4k
Support Driven Design
roundedbygravity
87
8.6k
Code Review Best Practice
trishagee
44
9.7k
The Art of Programming - Codeland 2020
erikaheidi
32
11k
The Invisible Side of Design
smashingmag
290
48k
GitHub's CSS Performance
jonrohan
1020
420k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
173
8.6k
Docker and Python
trallard
27
1.6k
GraphQLの誤解/rethinking-graphql
sonatard
31
6.8k
BBQ
matthewcrist
74
7.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
130k
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