Slides from my presentation at React Amsterdam 2017
Make Linting Great Again!with @okonetchnikov
View Slide
What the lint?!
–Wikipedia“lint or a linter is any tool thatflags suspicious usage in softwarewritten in any computerlanguage.”
Why lint?
You don’t need to uglifyyour code if it’s already ugly!
Using lint tools leads to1. Fewer bugs2. Better readability => less time for code reviews3. Faster development
– http://www.prweb.com/releases/2013/1/prweb10298185.htm“On average, software developers spend50% of their time finding and fixing bugs.”
– http://www.prweb.com/releases/2013/1/prweb10298185.htm“…this inefficiency is estimated to cost theglobal economy $312 billion per year.”
How to lint?
StylelintJSON Lint
—Faster development?!—Really?!
Raise your hand if this sound familiar to you✋
– Everyone“I wish I could lint before committing thechanges to the repository”
git hooks are1. Hard to setup2. Hard to manage3. Hard to share across the team
npm install -D huskyyarn add --dev husky
{"scripts": {"precommit": "eslint ."}}
git hooks are1. Hard to setup2. Hard to manage3. Hard to share across the team4. Slow5. Displaying irrelevant results
Meet lint-staged!
npm install -D lint-stagedyarn add --dev lint-staged
{"scripts": {"precommit": "lint-staged"}}
{"scripts": {"precommit": "lint-staged"},"lint-staged": {"*.js": "eslint"}}
git hooks are1. Hard to setup2. Hard to manage3. Hard to share across the team4. Very slow5. Displaying irrelevant resultsAWE S OM E!
There is more!
Automaticallyfix lint errors
{"lint-staged": {"*.js": ["eslint --fix","git add"]}}
Automaticallyreformat your code
{"lint-staged": {"*.js": ["prettier --write","git add"]}}
lint-staged and prettierbeing used in create-react-app
https://github.com/okonet/lint-staged
Please solve real problems!
Thank You!
Andrey Okonetchnikov@okonetchnikovhttp://okonet.ruhttps://github.com/okonet