Make Linting Great Again

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

10. How to lint?

11. Stylelint JSON Lint

12. —Faster development?! —Really?!

13. None
14. None
15. None
16. None
17. None
18. None
19. None
20. None
21. None

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

23. None
24. None
25. None
26. None

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

    changes to the repository”
28. None

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

32. None

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"

    } }
38. None

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" ]

    } }
45. None

46. lint-staged and prettier being used in create-react-app

47. None

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