WebCamp 2016: Front-end. Андрей Ситник: Stylelint — как и зачем линтить CSS
0 likes374 views
Документ подробно рассматривает инструменты линтинга для CSS, включая stylelint и его функциональность, такие как проверка синтаксиса и правила исправления. Обсуждаются различные линтеры, их эволюция и популярность, а также предоставляются примеры настройки правил. Также подчеркивается важность линтинга для улучшения качества кода и сокращения времени на ревью.
![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](https://image.slidesharecdn.com/stylelint-ru1-160807211826/85/WebCamp-2016-Front-end-Stylelint-CSS-11-320.jpg)
![4. Добавляйте плагины
module.exports = {
'plugins': [
'stylelint-scss'
],
'rules': {
'scss/selector-no-redundant-nesting-selector': true
}
}
50](https://image.slidesharecdn.com/stylelint-ru1-160807211826/85/WebCamp-2016-Front-end-Stylelint-CSS-50-320.jpg)
![Частые цвета в переменные
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](https://image.slidesharecdn.com/stylelint-ru1-160807211826/85/WebCamp-2016-Front-end-Stylelint-CSS-55-320.jpg)
![9. Линтите всё
gulp.task('default', ['lint',
'test',
'all-translated',
'spell-check',
'security-audit',
'file-size'])
58](https://image.slidesharecdn.com/stylelint-ru1-160807211826/85/WebCamp-2016-Front-end-Stylelint-CSS-58-320.jpg)
WebCamp 2016: Front-end. Андрей Ситник: Stylelint — как и зачем линтить CSS
- 1. Stylelint Как и зачем линтить CSS Андрей Ситник, Злые марсиане 1
- 2. 2
- 6. 1978 — первый линтер Lint 6
- 7. 1995 — JavaScript // true 1 == "1" // забыт var count = 1 7
- 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
- 17. Функции Белый список CSSLint SCSS Lint CSSComb Модульность Исправление 17
- 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
- 30. Белый список CSSLint SCSS Lint CSSComb Модульность Исправление Stylelint 30
- 31. CSSLint SCSS Lint CSSComb 38 26 62 Stylelint 150 Легко писать новые правила 31
- 33. Популярность 33
- 35. Зачем линтить 35
- 37. 37 СеньонЮниор 1. Меньше времени на код-ревью Stylelint
- 38. «Я понимаю, что ты думаешь …, но …» 38
- 39. 2. Критика роботов приятнее 39
- 40. 3. Обмен практиками module.exports = { 'extend': 'stylelint-config-wordpress' } 40
- 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
- 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