Make Linting Great Again

Slides from my presentation at React Amsterdam 2017

Transcript

1. Make Linting Great Again!
   with @okonetchnikov
   

   View Slide

2. What the lint?!
   

   View Slide

3. –Wikipedia
   “lint or a linter is any tool that
   flags suspicious usage in software
   written in any computer
   language.”
   

   View Slide

4. Why lint?
   

   View Slide

5. You don’t need to uglify
   your code if it’s already ugly!
   

   View Slide

6. Using lint tools leads to
   1. Fewer bugs
   2. Better readability => less time for code reviews
   3. Faster development
   

   View Slide

7. – http://www.prweb.com/releases/2013/1/prweb10298185.htm
   “On average, software developers spend
   50% of their time finding and fixing bugs.”
   

   View Slide

8. – http://www.prweb.com/releases/2013/1/prweb10298185.htm
   “…this inefficiency is estimated to cost the
   global economy $312 billion per year.”
   

   View Slide

9. View Slide

10. How to lint?
    

    View Slide

11. Stylelint
    JSON Lint
    

    View Slide

12. —Faster development?!
    —Really?!
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

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

    View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. – Everyone
    “I wish I could lint before committing the
    changes to the repository”
    

    View Slide

28. View Slide

29. git hooks are
    1. Hard to setup
    2. Hard to manage
    3. Hard to share across the team
    

    View Slide

30. npm install -D husky
    yarn add --dev husky
    

    View Slide

31. {
    "scripts": {
    "precommit": "eslint ."
    }
    }
    

    View Slide

32. View Slide

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
    

    View Slide

34. Meet lint-staged!
    

    View Slide

35. npm install -D lint-staged
    yarn add --dev lint-staged
    

    View Slide

36. {
    "scripts": {
    "precommit": "lint-staged"
    }
    }
    

    View Slide

37. {
    "scripts": {
    "precommit": "lint-staged"
    },
    "lint-staged": {
    "*.js": "eslint"
    }
    }
    

    View Slide

38. View Slide

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!
    

    View Slide

40. There is more!
    

    View Slide

41. Automatically
    fix lint errors
    

    View Slide

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

    View Slide

43. Automatically
    reformat your code
    

    View Slide

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

    View Slide

45. View Slide

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

    View Slide

47. View Slide

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

    View Slide

49. Please solve real problems!
    

    View Slide

50. Thank You!
    

    View Slide

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

    View Slide