Download to read offline
![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](https://image.slidesharecdn.com/7-161101102513/75/T-Conf-Stylelint-CSS-15-2048.jpg)
![2. lint-staged — перед коммитом
"scripts": {
"lint-staged": "lint-staged",
},
"lint-staged": {
"*.css": "stylelint"
},
"pre-commit": ["lint-staged"]
52](https://image.slidesharecdn.com/7-161101102513/75/T-Conf-Stylelint-CSS-52-2048.jpg)
![5. Добавляйте плагины
module.exports = {
'plugins': [
'stylelint-scss'
],
'rules': {
'scss/selector-no-redundant-nesting-selector': true
}
}
56](https://image.slidesharecdn.com/7-161101102513/75/T-Conf-Stylelint-CSS-56-2048.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
}
})
})
}
62](https://image.slidesharecdn.com/7-161101102513/75/T-Conf-Stylelint-CSS-62-2048.jpg)
![10. Линтите всё
gulp.task('default', ['lint',
'test',
'all-translated',
'spell-check',
'security-audit',
'file-size'])
65](https://image.slidesharecdn.com/7-161101102513/75/T-Conf-Stylelint-CSS-65-2048.jpg)
TК°Conf. Stylelint — как и зачем линтить CSS. Андрей Ситник.
- 1. Stylelint: Как и зачемлинтить CSS Андрей Ситник, Злые марсиане 1
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10. 1978 — первыйлинтер Lint 10
- 11. 1995 — JavaScript //true 1 == "1" // забыт var count = 1 11
- 12.
- 13.
- 14. Эволюция линтеров JSLint JSHintESLint→ → 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.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25. Исходный код Парсер Плагин 1 Списокошибок Плагин 2 25 Модульность
- 26.
- 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.
- 32.
- 33.
- 34.
- 35. CSSLint SCSS Lint CSSComb 38 26 62 Stylelint 168 Легкописать новые правила 35
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. «Я понимаю, что тыдумаешь …, но …» 41
- 42. 2. Критика роботовприятнее 42
- 43. 3. Обмен практиками module.exports= { 'extend': 'stylelint-config-wordpress' } 43
- 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.
- 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.
- 56. 5. Добавляйте плагины module.exports= { 'plugins': [ 'stylelint-scss' ], 'rules': { 'scss/selector-no-redundant-nesting-selector': true } } 56
- 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-disableno-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.
- 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 > [email protected] > requ… │ ├───────────────┼───────────────────────────────────────────────────────┤ │ More Info │ https://nodesecurity.io/advisories/130 │ └───────────────┴───────────────────────────────────────────────────────┘ 68
- 69.