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
77
Профессия "Front-end архитектор"
okonet
0
130
Other Decks in Programming
See All in Programming
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
240
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
380
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
24k
Outline View in SwiftUI
1024jp
1
280
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.1k
Realtime API 入門
riofujimon
0
140
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
4
1.9k
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
180
CSC509 Lecture 09
javiergs
PRO
0
140
Amazon Qを使ってIaCを触ろう!
maruto
0
370
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
2k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
500
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Building Your Own Lightsaber
phodgson
102
6.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Rails Girls Zürich Keynote
gr2m
93
13k
Designing Experiences People Love
moore
138
23k
Faster Mobile Websites
deanohume
305
30k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
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