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 (Long version)
Search
Andrey Okonetchnikov
January 25, 2018
Programming
0
72
Make Linting Great Again (Long version)
Presented at Agent Conf 2018
Andrey Okonetchnikov
January 25, 2018
Tweet
Share
More Decks by Andrey Okonetchnikov
See All by Andrey Okonetchnikov
Component-Driven Design Systems Workshop
okonet
0
210
A Common Design Language
okonet
2
1.8k
Modular CSS v2 (CSS-in-JS edition)
okonet
3
1.1k
Make Linting Great Again
okonet
0
170
Modular CSS — Agent Conf '17 Edition
okonet
3
370
Modular CSS
okonet
3
270
JavaScript для насыщенных пользовательских интерфейсов
okonet
0
99
Профессия "Front-end архитектор"
okonet
0
150
Other Decks in Programming
See All in Programming
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
920
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
390
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
610
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
Swift Concurrency - 状態監視の罠
objectiveaudio
2
470
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
370
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
150
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
180
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
220
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
200
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
570
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
It's Worth the Effort
3n
187
28k
How to Think Like a Performance Engineer
csswizardry
27
2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Six Lessons from altMBA
skipperchong
28
4k
Automating Front-end Workflow
addyosmani
1371
200k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Scaling GitHub
holman
463
140k
Bash Introduction
62gerente
615
210k
Fireside Chat
paigeccino
40
3.7k
Rails Girls Zürich Keynote
gr2m
95
14k
Transcript
Make Linting Great Again with @okonetchnikov
None
https://reason-conf.com
What the #$&% is lint?!
–Wikipedia “lint or a linter is any tool that flags
suspicious usage in software written in any computer language.”
–me “linter is a tool that finds stupid bugs.”
None
These things here :(
None
None
None
How to fix that?
Lint all the things!
Stylelint JSON Lint
Why lint?
– 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
In reality, though…
– http://www.prweb.com/releases/2013/1/prweb10298185.htm “On average, software developers spend 50% of their
time finding and fixing bugs.”
– me “On average, software developers spend 50% of their
time discussing code style.”
None
You don’t need to uglify your code if it’s already
ugly!
How to fix that?
One code style to rule them all!
None
None
Using linters & formatters leads to 1. Fewer (stupid) bugs
2. Better readability => less time in code reviews 3. But it can slow you down… :(
—Slow down?! —We’re not doing that then!
My typical day…
None
None
10 minutes later…
None
None
None
None
None
None
None
None
None
Raise your hand if this sound familiar to you ✋
None
None
None
428.689
None
2.844.799
– Everyone “I wish I could lint before committing the
changes to the repository”
git hooks
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
None
Thanks husky! 1. Hard to setup 2. Hard to manage
3. Hard to share across the team
…but linting the whole project 1. Can be quite slow
2. Will display irrelevant results
None
What if we could run linters only on files we’re
about to commit?
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 A WES OME!
There is more!
Automatically fix lint errors
{ "lint-staged": { "*.js": "eslint" } }
{ "lint-staged": { "*.js": [ "eslint --fix", "git add" ]
} }
Automatically reformat your code
None
{ "lint-staged": { "*.js": [ "eslint --fix", "git add" ]
} }
{ "lint-staged": { "*.js": [ "prettier --write", "git add" ]
} }
None
lint-staged and prettier being used in create-react-app
lint-staged and prettier being used in Babel!
How does it work?
#!/bin/bash executable=$(npm bin)/staged-files linter_name="eslint" linter_path=$(npm bin)/eslint lint_extensions="**/*.@(js|jsx)" if [[ -f
"${linter_path}" ]]; then echo "Running ${linter_name} on git staged files: $ {lint_extensions}" ${executable} "${lint_extensions}" -- ${linter_path} else echo "Could not find ${linter_name} at $ {linter_path}. Is it installed?" echo "" echo "Try running:" echo "npm install --save-dev ${linter_name}" fi
None
#!/bin/bash executable=$(npm bin)/staged-files linter_name="stylelint" linter_path=$(npm bin)/stylelint lint_extensions="**/*.@(css|scss|less|styl)" if [[ -f
"${linter_path}" ]]; then echo "Running ${linter_name} on git staged files: $ {lint_extensions}" ${executable} "${lint_extensions}" -- ${linter_path} else echo "Could not find ${linter_name} at $ {linter_path}. Is it installed?" echo "" echo "Try running:" echo "npm install --save-dev ${linter_name}" fi
#!/bin/bash executable=$(npm bin)/staged-files linter_name="flow" linter_path=$(npm bin)/flow lint_extensions="**/*.@(js|jsx)" if [[ -f
"${linter_path}" ]]; then echo "Running ${linter_name} on git staged files: $ {lint_extensions}" ${executable} "${lint_extensions}" -- ${linter_path} else echo "Could not find ${linter_name} at $ {linter_path}. Is it installed?" echo "" echo "Try running:" echo "npm install ${linter_name}-bin" fi
#!/bin/bash executable=$(npm bin)/staged-files linter_name="jscs" linter_path=$(npm bin)/jscs lint_extensions="**/*.@(js|jsx)" if [[ -f
"${linter_path}" ]]; then echo "Running ${linter_name} on git staged files: $ {lint_extensions}" ${executable} "${lint_extensions}" -- ${linter_path} else echo "Could not find ${linter_name} at $ {linter_path}. Is it installed?" echo "" echo "Try running:" echo "npm install --save-dev ${linter_name}" fi
DRY
Present
lint-staged is a tool that • Can run any task
• Easy to install via npm • Easy to distribute across the team (.lintstagedrc) • Easy to use (DX!)
Future?
None
None
None
None
None
None
Open Source = ❤
https://github.com/okonet/lint-staged
Maintainers ❤
None
Recap
None
Please solve real problems!
Thank You!
Andrey Okonetchnikov @okonetchnikov http://okonet.ru https://github.com/okonet