Presented at Agent Conf 2018
Make Linting Great Againwith @okonetchnikov
View Slide
https://reason-conf.com
What the #$&% is lint?!
–Wikipedia“lint or a linter is any tool that flagssuspicious usage in software writtenin any computer language.”
–me“linter is a tool that finds stupid bugs.”
These things here :(
How to fix that?
Lint all the things!
StylelintJSON Lint
Why lint?
– http://www.prweb.com/releases/2013/1/prweb10298185.htm“On average, software developers spend50% of their time finding and fixing bugs.”
– http://www.prweb.com/releases/2013/1/prweb10298185.htm“…this inefficiency is estimated to cost theglobal economy $312 billion per year.”
In reality, though…
– me“On average, software developers spend50% of their time discussing code style.”
You don’t need to uglifyyour code if it’s already ugly!
One code style to rule them all!
Using linters & formatters leads to1. Fewer (stupid) bugs2. Better readability => less time in code reviews3. But it can slow you down… :(
—Slow down?!—We’re not doing that then!
My typical day…
10 minutes later…
Raise your hand if this sound familiar to you✋
428.689
2.844.799
– Everyone“I wish I could lint before committing thechanges to the repository”
git hooks
git hooks are1. Hard to setup2. Hard to manage3. Hard to share across the team
npm install -D huskyyarn add --dev husky
{"scripts": {"precommit": "eslint ."}}
Thanks husky!1. Hard to setup2. Hard to manage3. Hard to share across the team
…but linting the whole project1. Can be quite slow2. Will display irrelevant results
What if we could run linters onlyon files we’re about to commit?
Meet lint-staged!
npm install -D lint-stagedyarn add --dev lint-staged
{"scripts": {"precommit": "lint-staged"}}
{"scripts": {"precommit": "lint-staged"},"lint-staged": {"*.js": "eslint"}}
git hooks are1. Hard to setup2. Hard to manage3. Hard to share across the team4. Very slow5. Displaying irrelevant resultsA WES OME!
There is more!
Automaticallyfix lint errors
{"lint-staged": {"*.js": "eslint"}}
{"lint-staged": {"*.js": ["eslint --fix","git add"]}}
Automaticallyreformat your code
{"lint-staged": {"*.js": ["prettier --write","git add"]}}
lint-staged and prettierbeing used in create-react-app
lint-staged and prettierbeing used in Babel!
How does it work?
#!/bin/bashexecutable=$(npm bin)/staged-fileslinter_name="eslint"linter_path=$(npm bin)/eslintlint_extensions="**/*.@(js|jsx)"if [[ -f "${linter_path}" ]]; thenecho "Running ${linter_name} on git staged files: ${lint_extensions}"${executable} "${lint_extensions}" -- ${linter_path}elseecho "Could not find ${linter_name} at ${linter_path}. Is it installed?"echo ""echo "Try running:"echo "npm install --save-dev ${linter_name}"fi
#!/bin/bashexecutable=$(npm bin)/staged-fileslinter_name="stylelint"linter_path=$(npm bin)/stylelintlint_extensions="**/*.@(css|scss|less|styl)"if [[ -f "${linter_path}" ]]; thenecho "Running ${linter_name} on git staged files: ${lint_extensions}"${executable} "${lint_extensions}" -- ${linter_path}elseecho "Could not find ${linter_name} at ${linter_path}. Is it installed?"echo ""echo "Try running:"echo "npm install --save-dev ${linter_name}"fi
#!/bin/bashexecutable=$(npm bin)/staged-fileslinter_name="flow"linter_path=$(npm bin)/flowlint_extensions="**/*.@(js|jsx)"if [[ -f "${linter_path}" ]]; thenecho "Running ${linter_name} on git staged files: ${lint_extensions}"${executable} "${lint_extensions}" -- ${linter_path}elseecho "Could not find ${linter_name} at ${linter_path}. Is it installed?"echo ""echo "Try running:"echo "npm install ${linter_name}-bin"fi
#!/bin/bashexecutable=$(npm bin)/staged-fileslinter_name="jscs"linter_path=$(npm bin)/jscslint_extensions="**/*.@(js|jsx)"if [[ -f "${linter_path}" ]]; thenecho "Running ${linter_name} on git staged files: ${lint_extensions}"${executable} "${lint_extensions}" -- ${linter_path}elseecho "Could not find ${linter_name} at ${linter_path}. Is it installed?"echo ""echo "Try running:"echo "npm install --save-dev ${linter_name}"fi
DRY
Present
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!)
Future?
Open Source = ❤
https://github.com/okonet/lint-staged
Maintainers ❤
Recap
Please solve real problems!
Thank You!
Andrey Okonetchnikov@okonetchnikovhttp://okonet.ruhttps://github.com/okonet