你不知道的stylelint大全
参考链接：
一。安装插件
npm install postcss postcss-html postcss-scss stylelint stylelint-order stylelint-scss --save-dev
二。vscode 配置
setting.json 设置stylelint 插件
{
"editor.codeActionsOnSave": {
//开启 stylelint 自动修复
"source.fixAll.stylelint": true
},
//关闭编辑器内置样式检查（避免与 stylelint 冲突）
"css.validate": false,
"less.validate": false,
"scss.validate": false,
//配置 stylelint 检查的文件类型范围
"stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass"]
}
三。添加stylelintrc功能
1.根目录添加.stylelintrc.json 配置文件
module.exports = {
plugins: ["stylelint-order"],//定义样式的顺序插件
//规则决定检测器要查找什么和要解决什么。stylelint 有超过 150条规则。所有规则默认都是关闭的，所以，通过该选项你就可以开启相应规则，进行相应的检测。
所有规则必须显式的进行配置，因为没有默认值。
rules: {
// 指定声明块内属性的字母顺序
"order/properties-order": [
// 定位 Positioning
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"clip",
// 布局 Layout
"display",
"float",
"overflow",
"overflow-x",
"overflow-y",
"visibility",
"clear",
// 弹性盒模型 Flexible Box Layout
"box-align",
"box-flex",
"box-orient",
"box-pack",
"box-shadow",
// 尺寸 Dimension
"width",
"height",
"max-width",
"max-height",
"min-width",
"min-height",
// 外边距 Margin
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"margin-collapse",
"margin-top-collapse",
"margin-right-collapse",
"margin-bottom-collapse",
"margin-left-collapse",
// 内边距 Padding
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
// 边框 Border
"border",
"border-top",
"border-right",
"border-bottom",
"border-left",
"border-color",
"border-image",
"border-top-color",
"border-right-color",
"border-bottom-color",
"border-left-color",
"border-style",
"border-top-style",
"border-right-style",
"border-bottom-style",
"border-left-style",
"border-width",
"border-top-width",
"border-right-width",
"border-bottom-width",
"border-left-width",
"border-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"border-top-left-radius",
"border-radius-topright",
"border-radius-bottomright",
"border-radius-bottomleft",
"border-radius-topleft",
// 背景 Background
"background",
"background-attachment",
"background-color",
"background-image",
"background-position",
"background-repeat",
"background-size",
"background-clip",
// 色彩 Color
"color",
"opacity",
// 字体
"font",
"font-family",
"font-size",
"font-smoothing",
"font-style",
"font-weight",
// 文本 Text
"line-height",
"letter-spacing",
"word-spacing",
"text-align",
"text-decoration",
"text-indent",
"text-rendering",
"text-size-adjust",
"text-shadow",
"text-transform",
"word-break",
"word-wrap",
"white-space",
"vertical-align",
"direction",
"unicode-bidi",
// 列表 List
"list-style",
"list-style-type",
"list-style-position",
"list-style-image",
// 表格 Table
"table-layout",
"border-collapse",
"border-spacing",
// 内容 Content
"content",
"quotes",
// 用户界面 User Interface
"outline",
"outline-offset",
"text-overflow",
"box-sizing",
"cursor",
"zoom",
"resize",
// 变换 Transform
"transform",
"transform-origin",
// 过渡 Transition
"transition",
"transition-delay",
"transition-duration",
"transition-property",
"transition-timing-function",
// 动画 Animation
"animation",
"animation-delay",
"animation-duration",
"animation-iteration-count",
"animation-name",
"animation-play-state",
"animation-timing-function",
"animation-fill-mode",
],
// 注释无未知
// https://stylelint.io/user-guide/rules/list/annotation-no-unknown
"annotation-no-unknown": true,
// 禁止空块
// https://stylelint.io/user-guide/rules/list/block-no-empty
"block-no-empty": true,
// 指定注释模式
// https://stylelint.io/user-guide/rules/list/comment-pattern
"comment-pattern": null,
// 在评论中指定不允许使用的单词列表
// https://stylelint.io/user-guide/rules/list/comment-word-disallowed-list
"comment-word-disallowed-list": null,
// 禁止使用未知规则
// https://stylelint.io/user-guide/rules/list/at-rule-no-unknown
"at-rule-no-unknown": [
true,
{
ignoreAtRules: ["mixin", "include", "each"],
},
],
// 禁止未知动画
// https://stylelint.io/user-guide/rules/list/no-unknown-animations
"no-unknown-animations": null,
// 要求或禁止 Unicode BOM
// https://stylelint.io/user-guide/rules/list/unicode-bom
"unicode-bom": null,
// 为规则名称指定小写或大写
// https://stylelint.io/user-guide/rules/list/at-rule-name-case
"at-rule-name-case": null,
// 在规则名称后需要换行符
// https://stylelint.io/user-guide/rules/list/at-rule-name-newline-after
"at-rule-name-newline-after": null,
// 在规则名称后需要一个空格
// https://stylelint.io/user-guide/rules/list/at-rule-name-space-after
"at-rule-name-space-after": null,
// 在规则的分号后需要换行符
// https://stylelint.io/user-guide/rules/list/at-rule-semicolon-newline-after
"at-rule-semicolon-newline-after": null,
// 在规则的分号之前需要一个空格或不允许空格
// https://stylelint.io/user-guide/rules/list/at-rule-semicolon-space-before
"at-rule-semicolon-space-before": null,
// 指定类选择器的模式
// https://stylelint.io/user-guide/rules/list/selector-class-pattern
"selector-class-pattern": ["^([0-9a-z]{1,}(-|--))*[0-9a-z]{1,}$", { resolveNestedSelectors: true }],
},
overrides: [
//postcss-scss：解析html.vue文件里面的css规范
{
files: ["**/*.{vue,html}", "**/**/*.{vue,html}"],
customSyntax: "postcss-html",
},
//postcss-scss：解析css,scss,less,sass文件里面的css规范
{
files: ["**/*.{css,scss,less,sass}", "**/**/*.{css,scss,less,sass}"],
customSyntax: "postcss-scss",
},
],
};
2.根目录添加.stylelintignore 忽略文件
node_modules
dist
lib
coverage
.git
*.js
*.tsx
*.ts
*.json
*.jsx
*.csv
*.ico
*.svg
*.png
3.在package.json 配置css格式
"scripts": {
"stylelint": "stylelint --fix packages/com.less",//指定特定文件
"lint": "stylelint --fix \"**/*.{vue,html,sass,less,scss}\"",//指定多个文件
}
4.在cmd 里面运行 npm run stylelint ，然后根据报错提示来修改css
