Make Linting Great Again (Long version)

Make Linting Great Again (Long version)

Presented at Agent Conf 2018

69bb6b30cd7b682ba5d5a1f352e6862a?s=128

Andrey Okonetchnikov

January 25, 2018
Tweet

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