ESLint уже стал стандартом и большинство команд линтит JS. Но что с CSS? Андрей Ситник рассмотрит все линтеры для CSS. На примере Stylelint и Stylefmt покажет как линтер может повышать качество кода и решать социальные проблемы команды.

1. Stylelint
Как и зачем линтить CSS
Андрей Ситник, Злые марсиане
1

2. 2

3. Наш опенсорс
3

4. История линтеров
4

5. Исходный код
Парсер
Анализ
Список ошибок
Линтер
5

6. 1978 — первый линтер Lint
6

7. 1995 — JavaScript
// true
1 == "1"
// забыт var
count = 1
7

8. ЛинтерыCoffeeScript или
8

9. CoffeeScript :-(
9

10. Эволюция линтеров
JSLint JSHint ESLint→ →
10

11. ESLint: белый список
module.exports = {
'rules': {
'space-before-function-paren': [2],
'no-shadow-restricted-names': [2],
'computed-property-spacing': [2],
'no-empty-character-class': [2],
'no-irregular-whitespace': [2],
'no-unexpected-multiline': [2],
'no-multiple-empty-lines': [2],
'no-constant-condition': [2],
…
11

12. ESLint: модульность
Исходный код
Парсер
Плагин 1
Список ошибок
12
Плагин 2

13. ESLint: автоисправление
if(foo) {
bar()}
if (foo) {
bar();
}
eslint --fix *.js
13

14. Самые популярные зависимости
1. mocha
2. chai
3. lodash
4. grunt
5. gulp
6. eslint
7. babel-preset-es2015
8. request
9. async
10. should
Источник: https://gist.github.com/feross/e0882df2fe673d6ce064
14

15. Линтеры CSS
15

16. Поддержка синтаксисов
SCSS
CSSLint
SCSS Lint
CSSComb
CSS Less
16

17. Функции
Белый список
CSSLint
SCSS Lint
CSSComb
Модульность Исправление
17

18. Количество правил
CSSLint
SCSS Lint
CSSComb
38
26
62
18

19. 19

20. Stylelint
20

21. Исходный код
Парсер
Плагин 1
Список ошибок
Плагин 2
21
На что похожа модульность?

22. PostCSS!
22

23. Единый фреймворк
Полифилы
Минификация Линтинг
Примеси Изоляция
23

24. Сменные парсеры
CSS
SCSS Less
SugarSS Битый CSS
24

25. Правило Stylelint — плагин PostCSS
const ruleName = "comment-no-empty"
(root, result) => {
root.walkComments(comment => {
if ( comment.text && comment.text.length === 0 ) {
report({ … })
}
}
}
25

26. Белый список правил
module.exports = {
'rules': {
'at-rule-name-case': 'lower',
'at-rule-semicolon-newline-after': 'always',
'block-closing-brace-newline-after': 'always',
'color-hex-case': 'lower',
'color-hex-length': 'short',
'color-hex-length': 'short',
'color-no-invalid-hex': true,
'indentation': 2,
…
26

27. Исправление
.foo {
color:black}
.foo {
color:black;
}
stylefmt *.css
27

28. postcss-browser-reporter
28

29. SCSS
CSSLint
SCSS Lint
CSSComb
CSS Less
Stylelint
29

30. Белый список
CSSLint
SCSS Lint
CSSComb
Модульность Исправление
Stylelint
30

31. CSSLint
SCSS Lint
CSSComb
38
26
62
Stylelint 150
Легко писать новые правила
31

32. Пользователи Stylelint
32

33. Популярность
33

34. Stylelint + CSSLint
34

35. Зачем линтить
35

36. Сеньон
36
Юниор
Код-ревью

37. 37
СеньонЮниор
1. Меньше времени на код-ревью
Stylelint

38. «Я понимаю,
что ты думаешь …,
но …»
38

39. 2. Критика роботов приятнее
39

40. 3. Обмен практиками
module.exports = {
'extend': 'stylelint-config-wordpress'
}
40

41. 4. Поиск ошибок
'color-no-invalid-hex',
'function-linear-gradient-no-nonstandard-direction',
'time-no-imperceptible',
'property-no-unknown',
'property-no-vendor-prefix',
'declaration-block-no-duplicate-properties',
'declaration-block-no-ignored-properties',
'declaration-block-no-shorthand-property-overrides',
'selector-class-pattern',
'selector-max-compound-selectors',
'selector-pseudo-element-no-unknown',
'selector-type-no-unknown',
'media-feature-no-missing-punctuation',
'no-unsupported-browser-features',
'no-unknown-animations',
'no-indistinguishable-colors',
'no-descending-specificity',
'no-browser-hacks'
41

42. no-descending-specificity
#container .foo {
top: 10px;
}
…
.foo {
/* Expected selector .foo come before #container .foo */
top: 0;
}
42

43. declaration-block-no-ignored-properties
.foo {
display: inline;
width: 100px;
/* Unexpected width with display: inline */
}
43

44. declaration-block-no-shorthand-property-overrides
.foo {
margin-top: 10px;
margin: 0 auto;
/* Unexpected shorthand margin after margin-top */
}
44

45. no-indistinguishable-colors
.foo {
color: black;
}
…
.bar {
background: #010101;
/* Unexpected indistinguishable colors #010101 and black */
}
45

46. Как линтить
46

47. 1. Линтер в текстовом редакторе
47

48. 2. Линтер в CI
48

49. 3. Начните с популярного конфига
module.exports = {
'extend': 'stylelint-config-standard'
}
49

50. 4. Добавляйте плагины
module.exports = {
'plugins': [
'stylelint-scss'
],
'rules': {
'scss/selector-no-redundant-nesting-selector': true
}
}
50

51. 5. Линтер — стайл-гайд
«В стайл-гайде не должно
быть правил, которые нельзя
описать в алгоритме»
51

52. 6. Делайте исключения
.foo.is-started {
/* stylelint-disable no-unknown-animations */
/* Animation will be generated in JS*/
animation-name: js-genereted-path.
}
52

53. stylelint-disable-reason
.foo.is-started {
/* stylelint-disable no-unknown-animations */
animation-name: js-genereted-path.
/* Expected comment reason after `stylelint-disable` com
}
53

54. 7. Пишите свои правила
import { utils } from "stylelint"
export const ruleName = namespace("ИМЯ")
export const messages = utils.ruleMessages(ruleName, {
expected: "ТЕКСТ ОШИБКИ",
})
export default function () {
return (root, result) => {
/* ЛОГИКА */
}
}
54

55. Частые цвета в переменные
colors = { }
return (root, result) => {
root.walkDecls(decl => {
decl.value.match(/#[0-9a-f]{3,6}/, color => {
if ( colors[color] ) {
utils.report({ … })
} else {
colors[color] = true
}
})
})
}
55

56. Правила Фейсбука
​slow-css-properties
filters-with-svg-files
use-variables
mobile-flexbox
56

57. 8. Два раза ошиблись — в правило
57

58. 9. Линтите всё
gulp.task('default', ['lint',
'test',
'all-translated',
'spell-check',
'security-audit',
'file-size'])
58

59. yaspeller
$ yaspeller /home/ai/Dev/postcss/README.md
✗ /home/ai/Dev/postcss/README.md 453 ms
-----
Typos: 1
1. transorming (suggest: transforming, transporting)
-----
59

60. Node Security Platform
> 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 > honeybadger@1.1.2 > requ… │
├───────────────┼───────────────────────────────────────────────────────┤
│ More Info │ https://nodesecurity.io/advisories/130 │
└───────────────┴───────────────────────────────────────────────────────┘
60

61. Ссылки
stylelint.io
@stylelint
@postcss
61