Make Linting Great Again (Long version)

Presented at Agent Conf 2018

Transcript

1. Make Linting Great Again with @okonetchnikov
3. https://reason-conf.com
4. What the #$&% is lint?!
5. –Wikipedia “lint or a linter is any tool that flags suspicious usage in software written in any computer language.”
6. –me “linter is a tool that finds stupid bugs.”
8. These things here :(
12. How to fix that?
13. Lint all the things!
14. Stylelint JSON Lint
15. Why lint?
16. – http://www.prweb.com/releases/2013/1/prweb10298185.htm “On average, software developers spend 50% of their time finding and fixing bugs.”
17. – http://www.prweb.com/releases/2013/1/prweb10298185.htm “…this inefficiency is estimated to cost the global economy $312 billion per year.”
19. In reality, though…
20. – http://www.prweb.com/releases/2013/1/prweb10298185.htm “On average, software developers spend 50% of their time finding and fixing bugs.”
21. – me “On average, software developers spend 50% of their time discussing code style.”
23. You don’t need to uglify your code if it’s already ugly!
24. How to fix that?
25. One code style to rule them all!
28. Using linters & formatters leads to 1. Fewer (stupid) bugs 2. Better readability => less time in code reviews 3. But it can slow you down… :(
29. —Slow down?! —We’re not doing that then!
30. My typical day…
33. 10 minutes later…
43. Raise your hand if this sound familiar to you ✋
47. 428.689
49. 2.844.799
50. – Everyone “I wish I could lint before committing the changes to the repository”
51. git hooks
53. git hooks are 1. Hard to setup 2. Hard to manage 3. Hard to share across the team
54. npm install -D husky yarn add --dev husky
55. { "scripts": { "precommit": "eslint ." } }
58. Thanks husky! 1. Hard to setup 2. Hard to manage 3. Hard to share across the team
59. …but linting the whole project 1. Can be quite slow 2. Will display irrelevant results
61. What if we could run linters only on files we’re about to commit?
62. Meet lint-staged!
63. npm install -D lint-staged yarn add --dev lint-staged
64. { "scripts": { "precommit": "lint-staged" } }
65. { "scripts": { "precommit": "lint-staged" }, "lint-staged": { "*.js": "eslint" } }
67. 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!
68. There is more!
69. Automatically fix lint errors
70. { "lint-staged": { "*.js": "eslint" } }
71. { "lint-staged": { "*.js": [ "eslint --fix", "git add" ] } }
72. Automatically reformat your code
74. { "lint-staged": { "*.js": [ "eslint --fix", "git add" ] } }
75. { "lint-staged": { "*.js": [ "prettier --write", "git add" ] } }
77. lint-staged and prettier being used in create-react-app
78. lint-staged and prettier being used in Babel!
79. How does it work?
80. #!/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
82. #!/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
83. #!/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
84. #!/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
85. DRY
86. Present
87. 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!)
88. Future?
95. Open Source = ❤
96. https://github.com/okonet/lint-staged
97. Maintainers ❤
99. Recap
101. Please solve real problems!
102. Thank You!
103. Andrey Okonetchnikov @okonetchnikov http://okonet.ru https://github.com/okonet