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
170
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
210
A Common Design Language
okonet
2
1.7k
Make Linting Great Again (Long version)
okonet
0
71
Modular CSS v2 (CSS-in-JS edition)
okonet
3
1.1k
Modular CSS — Agent Conf '17 Edition
okonet
3
360
Modular CSS
okonet
3
260
JavaScript для насыщенных пользовательских интерфейсов
okonet
0
87
Профессия "Front-end архитектор"
okonet
0
150
Other Decks in Programming
See All in Programming
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
3
380
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
130
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
670
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
11
2.8k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
290
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
270
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
380
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
290
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
950
WindowInsetsだってテストしたい
ryunen344
1
190
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
800
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.8k
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
350
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Facilitating Awesome Meetings
lara
54
6.4k
Thoughts on Productivity
jonyablonski
69
4.7k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Optimizing for Happiness
mojombo
379
70k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
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