github
代码 & demo 在 github stylelint-guide
依赖安装
可以使用 yarn
或者 npm
。
yarn add stylelint stylelint-order stylelint-config-standard
# or
npm install stylelint stylelint-order stylelint-config-standard --save-dev
复制代码
创建 stylelint.config.js
你可以自定义你的验证规则来适应你的团队规范。
// basic rules
module.exports = {
extends: 'stylelint-config-standard',
ignoreFiles: ['**/*.js', '**/*.md'],
plugins: ['stylelint-order'],
rules: {
'at-rule-no-unknown': [
true,
{
ignoreAtRules: ['function', 'if', 'each', 'include', 'mixin']
}
],
'no-empty-source': null,
'rule-empty-line-before': 'never',
'at-rule-empty-line-before': null,
'no-missing-end-of-source-newline': null,
'selector-list-comma-newline-after': null,
'font-family-no-missing-generic-family-keyword': null,
'indentation': 2,
// ...
}
}
复制代码
重新排序你的 CSS
属性
你可能注意到上面的代码有个 plugin
选项 stylelint order
。 它可以根据你设定的 CSS
顺序来重新排序。 你可以在 rules
选项中添加对应的规则,例如:
rules: {
"order/order": [
"declarations",
"custom-properties",
"dollar-variables",
"rules",
"at-rules"
],
// 根据 Andy Ford 的 "Order of the Day: CSS Properties"
// 并且可以将 CSS 属性进行分组
"order/properties-order": [{
groundName: "Display & Flow",
emptyLineBefore: "never",
properties: [
"display",
"visibility",
"float",
"clear",
]
},
{
groundName: "Positioning",
emptyLineBefore: "never",
properties: [
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"transform",
]
},
{
groupName: "Flex",
emptyLineBefore: "never",
properties: [
"flex",
"flex-direction",
"flex-grow",
"flex-shrink",
"flex-basis",
"flex-wrap",
"justify-content",
"align-items"
]
},
{
groupName: "Dimensions",
emptyLineBefore: "never",
properties: [
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height",
"overflow",
],
},
{
groupName: "Margins, Padding, Borders, Outline",
emptyLineBefore: "never",
properties: [
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"border-radius",
"border",
"border-top",
"border-right",
"border-bottom",
"border-left",
"border-width",
"border-top-width",
"border-right-width",
"border-bottom-width",
"border-left-width",
"border-style",
"border-top-style",
"border-right-style",
"border-bottom-style",
"border-left-style",
"border-color",
"border-top-color",
"border-right-color",
"border-bottom-color",
"border-left-color",
"outline",
"list-style",
"table-layout",
"border-collapse",
"border-spacing",
"empty-cells",
],
},
{
groundName: "Typographic Styles",
emptyLineBefore: "never",
properties: [
"font",
"font-family",
"font-size",
"line-height",
"font-weight",
"text-align",
"text-indent",
"text-transform",
"text-decoration",
"letter-spacing",
"word-spacing",
"white-space",
"vertical-align",
"color",
]
},
{
groupName: "Backgrounds",
emptyLineBefore: "never",
properties: [
"background",
"background-color",
"background-image",
"background-repeat",
"background-position",
]
},
{
groundName: "Opacity, Cursors, Generated Content, Transition",
emptyLineBefore: "never",
properties: [
"opacity",
"cursor",
"content",
"quotes",
"transition"
]
},
{
...
}
]
}
复制代码
使用 yarn
或者 npm
脚本
"scripts": {
"lint": "yarn run lint:css && yarn run lint:basecss",
"lint:css": "stylelint src/**/*.vue --fix",
"lint:basecss": "stylelint src/pages/**/*.less --custom-syntax ./node_modules/postcss-less --fix"
}
复制代码
这里我使用了 postcss-less
这个包来指定校验 less
文件的语法 如果你需要校验 less
文件,需要安装 postcss
包
yarn add postcss
# or
npm add postcss
复制代码
使用 husky
在预提交时校验代码
// package.json
"husky": {
"hooks": {
"pre-commit": "yarn run lint",
}
},
复制代码
现在你可能会觉得自己的 CSS 看起来舒服多了~
Enjoy it :tada: