$30 off During Our Annual Pro Sale. View Details »

Make Linting Great Again

Make Linting Great Again

Slides from my presentation at React Amsterdam 2017

Andrey Okonetchnikov

April 21, 2017
Tweet

More Decks by Andrey Okonetchnikov

Other Decks in Programming

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