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

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

2. 2

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

4. История человечества
10К40К250К
4

5. 5

6. Неолитическая революция
6

7. 7

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

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

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

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

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

13. CoffeeScript :-(
13

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

15. 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],
…
15

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

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

18. Популярные зависимости
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
18

19. Линтеры
CSS
19

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

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

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

23. 23

24. Stylelint
24

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

26. 26

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

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

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

30. Белый список правил
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,
…
30

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

32. postcss-browser-reporter
32

33. SCSS
CSSLint
SCSS Lint
CSSComb
CSS Less
Stylelint
33

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

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

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

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

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

39. Cеньор
39
Юниор
Код-ревью

40. 40
CеньорЮниор
1. Автоматическое код-ревью
Stylelint

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

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

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

44. 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'
44

45. no-descending-speci•city
#container .foo {
top: 10px;
}
…
.foo {
/* Expected selector .foo come before #container .foo */
top: 0;
}
45

46. no-unsupported-browser-features
.foo {
opacity: 1;
/* Features like this, which is unsupported in IE 8 */
}
46

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

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

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

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

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

52. 2. lint-staged — перед коммитом
"scripts": {
"lint-staged": "lint-staged",
},
"lint-staged": {
"*.css": "stylelint"
},
"pre-commit": ["lint-staged"]
52

53. 3. Линтер в CI
53

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

55. 55

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

57. dustinspecker/awesome-eslint
57

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

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

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

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

62. Повторы цветов — в переменные
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
}
})
})
}
62

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

64. 9. Ошибка 2 раза — в правило
64

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

66. 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%;
}
66

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

68. 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 │
└───────────────┴───────────────────────────────────────────────────────┘
68

69. Ссылки
stylelint.io
@stylelint
@postcss
evl.ms/chronicles
69