Make Linting Great Again (Long version)

Transcript

1. Make Linting Great Again with @okonetchnikov

2. None

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.”

7. None

8. These things here :(

9. None
10. None
11. None

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.”
18. None

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.”
22. None

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!

26. None
27. None

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…

31. None
32. None

33. 10 minutes later…

34. None
35. None
36. None
37. None
38. None
39. None
40. None
41. None
42. None

43. Raise your hand if this sound familiar to you ✋

44. None
45. None
46. None

47. 428.689

48. None

49. 2.844.799

50. – Everyone “I wish I could lint before committing the

    changes to the repository”

51. git hooks

52. None

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 ." } }

56. None
57. None

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
60. None

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"

    } }
66. None

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

73. None

74. { "lint-staged": { "*.js": [ "eslint --fix", "git add" ]

    } }

75. { "lint-staged": { "*.js": [ "prettier --write", "git add" ]

    } }
76. None

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
81. None

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?

89. None
90. None
91. None
92. None
93. None
94. None

95. Open Source = ❤

96. https://github.com/okonet/lint-staged

97. Maintainers ❤

98. None

99. Recap

100. None

101. Please solve real problems!

102. Thank You!

103. Andrey Okonetchnikov @okonetchnikov http://okonet.ru https://github.com/okonet