Make Linting Great Again

Slides from my presentation at React Amsterdam 2017

Transcript

1. Make Linting Great Again! with @okonetchnikov
2. What the lint?!
3. –Wikipedia “lint or a linter is any tool that flags suspicious usage in software written in any computer language.”
4. Why lint?
5. You don’t need to uglify your code if it’s already ugly!
6. Using lint tools leads to 1. Fewer bugs 2. Better readability => less time for code reviews 3. Faster development
7. – http://www.prweb.com/releases/2013/1/prweb10298185.htm “On average, software developers spend 50% of their time finding and fixing bugs.”
8. – http://www.prweb.com/releases/2013/1/prweb10298185.htm “…this inefficiency is estimated to cost the global economy $312 billion per year.”
10. How to lint?
11. Stylelint JSON Lint
12. —Faster development?! —Really?!
22. Raise your hand if this sound familiar to you ✋
27. – Everyone “I wish I could lint before committing the changes to the repository”
29. git hooks are 1. Hard to setup 2. Hard to manage 3. Hard to share across the team
30. npm install -D husky yarn add --dev husky
31. { "scripts": { "precommit": "eslint ." } }
33. git hooks are 1. Hard to setup 2. Hard to manage 3. Hard to share across the team 4. Slow 5. Displaying irrelevant results
34. Meet lint-staged!
35. npm install -D lint-staged yarn add --dev lint-staged
36. { "scripts": { "precommit": "lint-staged" } }
37. { "scripts": { "precommit": "lint-staged" }, "lint-staged": { "*.js": "eslint" } }
39. 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!
40. There is more!
41. Automatically fix lint errors
42. { "lint-staged": { "*.js": [ "eslint --fix", "git add" ] } }
43. Automatically reformat your code
44. { "lint-staged": { "*.js": [ "prettier --write", "git add" ] } }
46. lint-staged and prettier being used in create-react-app
48. https://github.com/okonet/lint-staged
49. Please solve real problems!
50. Thank You!
51. Andrey Okonetchnikov @okonetchnikov http://okonet.ru https://github.com/okonet