![Page 1: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/1.jpg)
![Page 2: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/2.jpg)
Robots Must SufferRobots Must SufferRobots Must Suffer
Robots Must Suffer
linters and tools for front-end developmentlinters and tools for front-end developmentlinters and tools for front-end development
linters and tools for front-end development
Andrey SitnikAndrey SitnikAndrey Sitnik
Andrey Sitnik© Eric Joyner
Evil MartiansEvil MartiansEvil Martians
Evil Martians1
![Page 3: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/3.jpg)
I am from Russia
2
![Page 4: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/4.jpg)
Lead front-end developer at
3
![Page 5: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/5.jpg)
Author of
Autoprefixer PostCSS
4
![Page 6: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/6.jpg)
Why did I create PostCSS
?
5
![Page 7: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/7.jpg)
Two types of tasks
Creative tasks
Boring tasks
6
![Page 8: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/8.jpg)
Humans vs. robots
Creative tasks
Boring tasks
Humans Robots
7
![Page 9: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/9.jpg)
Robots don’t make mistakes
8
![Page 10: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/10.jpg)
Work process
Talk Analyze Code Test
9
![Page 11: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/11.jpg)
Robots!
Talk Analyze Code Test
10
![Page 12: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/12.jpg)
Robots must sufferRobots must sufferRobots must suffer
Robots must suffer
© Eric Joyner 11
![Page 13: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/13.jpg)
© Eric Joyner
Part 2: Part 2: Part 2:
Part 2:
What is linters?What is linters?What is linters?
What is linters?12
![Page 14: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/14.jpg)
Talk Analyze Code Test
Test
1. Lint2. Unit tests3. Integration tests4. Benchmarks
13
![Page 15: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/15.jpg)
Talk Analyze Code Test
This talk is about linters
1. Lint2. Unit tests3. Integration tests4. Benchmarks
14
![Page 16: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/16.jpg)
What are linters?
Linters find mistakes in source code
15
![Page 17: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/17.jpg)
Source code
Parser
Analysis
Errors list
Linting process
16
![Page 18: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/18.jpg)
Unit tests vs. linters
y = 2 − (−x)
Unit tests
in: 2 out: 0y(2) = 4, !== 0
Linters
−(−n) → +n
17
![Page 19: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/19.jpg)
Unit tests vs. linters
Unit tests Linters
Check input and output
Don’t find an error
Check source code
Tell exact line
18
![Page 20: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/20.jpg)
Unit tests + linters =
"scripts": { "test": "npm run lint && npm run unit-test"
19
![Page 21: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/21.jpg)
Part 3 Part 3 Part 3
Part 3
Popular Popular Popular
Popular
linterslinterslinters
linters
© Eric Joyner 20
![Page 22: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/22.jpg)
Node.js app
app.all('/apps/:user_id', request => { initial = extract(request.body)})
21
![Page 23: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/23.jpg)
app.all('/apps/:user_id', request => { initial = extract(request.body)})
app.all('/apps/:user_id', request => { var initial = extract(request.body)})
var
After 4 hours of debugging
22
![Page 24: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/24.jpg)
Real story. Tests didn’t help.
How One Missing `var` Ruined our Launch
23
![Page 25: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/25.jpg)
ESLint could fix it
app.all('/apps/:user_id', request => { initial = extract(request.body)})
ESLint: initial is not defined app.js:2:3 24
![Page 26: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/26.jpg)
The most popular dependencies
1. mocha2. chai
3. eslint
4. babel-preset-es20155. lodash
Source: gist.github.com/feross/e0882df2fe673d6ce06425
![Page 27: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/27.jpg)
JS linters evolution
JSLint JSHint ESLint→ →26
![Page 28: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/28.jpg)
.foo { margin-top: 20px; width: 100px; height: 100px;}
CSS
27
![Page 29: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/29.jpg)
.foo { margin-top: 20px; width: 100px; height: 100px; margin: 0 auto;}
Horizontal centering
28
![Page 30: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/30.jpg)
.foo { margin-top: 20px; width: 100px; height: 100px; margin: 0 auto;}
After 5 min of debugging
29
![Page 31: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/31.jpg)
Stylelint could fix it
.foo { margin-top: 20px; width: 100px; height: 100px; margin: 0 auto;}
Stylelint: this overrides the longhand property
before it app.css:5:3 30
![Page 32: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/32.jpg)
Stylelint languages
*.pcss *.scss *.vuepostcss-scss postcss-html
*.lesspostcss-less
31
![Page 33: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/33.jpg)
Stylelint users
32
![Page 34: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/34.jpg)
Part 4 Part 4 Part 4
Part 4
WhyWhyWhy
Why
© Eric Joyner
33
![Page 35: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/35.jpg)
Writing code vs. debug time
Dev Debug
10 min 30 min
Normal
34
![Page 36: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/36.jpg)
#1 Linters reduce debug time
Dev Debug
10 min 30 min
Normal
10 min 25 min
With linters35
![Page 37: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/37.jpg)
Code reviews
Senior
36
Junior
![Page 38: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/38.jpg)
#2 Linters reduce code reviews
37
SeniorJunior
Linter
![Page 39: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/39.jpg)
It is hard to be a junior
JuniorSenior
Fixes
38
![Page 40: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/40.jpg)
#3 Linters make juniors happy
JuniorLinter
Fixes
39
![Page 41: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/41.jpg)
Big companies → multiple teams
Team 1 Team 2
Idea ?
40
![Page 42: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/42.jpg)
#4 Sharing ideas
Team 1 Team 2
Linter config
Idea
41
![Page 43: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/43.jpg)
Part 5 Part 5 Part 5
Part 5
HowHowHow
How
© Eric Joyner 42
![Page 44: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/44.jpg)
Step 1 Install linters via npm
npm install --save-dev eslint stylelint
43
![Page 45: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/45.jpg)
Step 2 Create a config
.eslintrc
.stylelintrc
{ "rules": { "no-console": "error" }}
44
![Page 46: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/46.jpg)
Too many rules
ESLint: 300 rules
Stylelint: 161 rules
45
![Page 47: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/47.jpg)
Step 3 Extend shareable config
{ "extends": "standard", "rules": { "no-console": "error" }}
npm install --save-dev eslint-config-standard
46
![Page 48: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/48.jpg)
Popular configs
ESLinteslint-config-standard eslint-config-airbnb
Stylelintstylelint-config-recommendedstylelint-config-wikimedia
47
![Page 49: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/49.jpg)
Step 4 Linter plugins for text editors
48
![Page 50: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/50.jpg)
Linter plugins text editor
Sublime Text
SublimeLinter-contrib-eslintSublimeLinter-contrib-stylelint
VS Codevscode-eslintvscode-stylelint
49
![Page 51: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/51.jpg)
Too many errors?
ESLint: 250 errors in 100 files
50
![Page 52: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/52.jpg)
Step 5 Fix automatically
eslint --fix src/**/*.js
stylelint --fix src/**/*.css
51
![Page 53: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/53.jpg)
Other developers ignore linter
Good developer Bad developer
git commit …
npm run test
npm run lint
git push …
git commit …
git push …
52
![Page 54: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/54.jpg)
Step 6 lint-staged
git commit …
run pre-commit hook
git add a.css
run stylelint a.css
Stylelint: 1 error
git: commit canceled53
![Page 55: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/55.jpg)
Install lint-staged
npm install --save-dev lint-staged pre-commit
54
![Page 56: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/56.jpg)
lint-staged config
"scripts": { "lint-staged": "lint-staged",},"lint-staged": { "*.css": "stylelint"},"pre-commit": ["lint-staged"]
55
![Page 57: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/57.jpg)
Step 6 Write custom plugins
Stylelint rule = simple PostCSS plugin
56
![Page 58: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/58.jpg)
Facebook custom rules
slow-css-properties
filters-with-svg-files
use-variables
mobile-flexbox
57
![Page 59: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/59.jpg)
Happened twice → write custom rule
SeniorJunior
Linter
Custom rule
58
![Page 60: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/60.jpg)
Part 6 Part 6 Part 6
Part 6
Other lintersOther lintersOther linters
Other linters
© Eric Joyner 59
![Page 61: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/61.jpg)
dustinspecker/awesome-eslint
The best ESLint plugins
60
![Page 62: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/62.jpg)
My favorite ESLint plugins
eslint-config-import
eslint-plugin-security
eslint-plugin-node
61
![Page 64: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/64.jpg)
postcss-sorting
div { -moz-box-sizing: border-box; width: 100%; box-sizing: border-box; position: absolute; -webkit-box-sizing: border-box;}
div { position: absolute; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%;}
Sort CSS properties
63
![Page 65: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/65.jpg)
yaspeller
Lint English
$ yaspeller /home/ai/Dev/postcss/README.md✗ /home/ai/Dev/postcss/README.md 453 ms-----Typos: 11. transorming (suggest: transforming, transporting)-----
64
![Page 66: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/66.jpg)
nsp
Check security in Node.js dependencies
> nsp check
(+) 1 vulnerabilities found┌───────────────┬───────────────────────────────────────────────────────┐│ │ ReDoS via long string of semicolons │├───────────────┼───────────────────────────────────────────────────────┤│ Name │ tough-cookie │├───────────────┼───────────────────────────────────────────────────────┤│ Installed │ 2.2.2 │├───────────────┼───────────────────────────────────────────────────────┤│ Vulnerable │ >=0.9.7 <=2.2.2 │├───────────────┼───────────────────────────────────────────────────────┤│ Patched │ >=2.3.0 │├───────────────┼───────────────────────────────────────────────────────┤│ Path │ my-test-project@undefined > [email protected] > requ… │├───────────────┼───────────────────────────────────────────────────────┤│ More Info │ https://nodesecurity.io/advisories/130 │└───────────────┴───────────────────────────────────────────────────────┘
65
![Page 68: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/68.jpg)
pa11y
Check accessibility
pa11y --config ./path/to/config.json http://example.com
67
![Page 69: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/69.jpg)
The endThe endThe end
The end© Eric Joyner 68
![Page 70: Robots Must SufferPart 2: Part 2: What is linters? What is linters? 12 Talk Analyze Code Test Test 1. Lint 2. Unit tests 3. Integration tests 4. Benchmarks 13 Talk Analyze Code Test](https://reader034.vdocuments.site/reader034/viewer/2022050213/5f5fa7463ccacf06ba051e21/html5/thumbnails/70.jpg)
Links
slides.com/ai/linters
VPN☺@andreysitnik
evl.ms/blog
VPN☺@evilmartians
69