Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Make Linting Great Again

Make Linting Great Again

Slides from my presentation at React Amsterdam 2017

69bb6b30cd7b682ba5d5a1f352e6862a?s=128

Andrey Okonetchnikov

April 21, 2017
Tweet

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