1.为什么要使用stylelint?
Stylelint 是一个强大的 CSS 静态分析工具，用于帮助开发者遵循一致的 CSS 代码风格和最佳实践。它可以检查 CSS 代码中的错误、不一致的命名约定、不推荐的用法，以及其他潜在的问题。
比如说:我们在写css代码时，一般不注重css的书写顺序，那么stylelint就会帮助我们来规范css的书写顺序。这里涉及到css的书写顺序，简单科普一下css书写顺序。
（1）定位属性：position display float left top right bottom overflow clear z-index
（2）自身属性：width height padding border margin background
（3）文字样式：font-family font-size font-style font-weight font-varient color
（4）文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
（5）css3中新增属性：content box-shadow border-radius transform 等
规范css书写顺序目的是为了减少浏览器reflow（回流），提升浏览器渲染dom的性能
注:css书写顺序引用 css样式的书写顺序及原理——很重要！-CSDN博客
https://blog.csdn.net/qq_36060786/article/details/79311244
2.开始stylelint的配置
2-1 打开编辑器，进入根目录package.json文件，将以下依赖复制到文件中，准备安装依赖
"postcss": "^8.4.31",
"postcss-html": "^1.5.0",
"stylelint": "^15.10.3",
"stylelint-config-html": "^1.1.0",
"stylelint-config-prettier": "^9.0.5",
"stylelint-config-recommended-scss": "^13.0.0",
"stylelint-config-recommended-vue": "^1.5.0",
"stylelint-config-standard": "^34.0.0",
"stylelint-config-standard-scss": "^11.0.0",
"stylelint-order": "^6.0.3",
"stylelint-scss": "^5.2.1",
2-2 安装依赖
npm i --legacy-peer-deps2-3 在根目录中创建.stylelintrc.cjs文件
module.exports = {
plugins: ['stylelint-order'],
extends: [
"stylelint-config-standard", // 配置 stylelint 拓展插件
"stylelint-config-html/vue", // 配置 vue 中 template 样式格式化
"stylelint-config-standard-scss", // 配置 stylelint scss 插件
"stylelint-config-recommended-vue/scss", // 配置 vue 中 scss 样式格式化
"stylelint-config-prettier", // 配置 stylelint 和 prettier 兼容
],
ignoreFiles: [
'**/*.js',
'**/*.cjs',
'**/*.jsx',
'**/*.tsx',
'**/*.ts',
'**/*.json',
'**/*.md',
'**/*.yaml',
'node_modules/',
'dist/',
'public/',
'docs/',
],
overrides: [
// {
// files: ['**/*.(scss|css)'],
// customSyntax: 'postcss-scss',
// },
{
files: ['**/*.(html|vue)'],
customSyntax: 'postcss-html',
},
],
rules: {
// "selector-class-pattern": [ // 命名规范 -
// "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
// {
// "message": "Expected class selector to be kebab-case"
// }
// ],
// "selector-pseudo-class-no-unknown": [
// true,
// {
// ignorePseudoClasses:['export']
// }
// ]
// "string-quotes":"single", // 单引号
// "at-rule-empty-line-before": null,
// "at-rule-no-unknown":null,
// "at-rule-name-case": "lower",// 指定@规则名的大小写
// "length-zero-no-unit": true, // 禁止零长度的单位（可自动修复）
// "shorthand-property-no-redundant-values": true, // 简写属性
// "number-leading-zero": "never", // 小数不带0
// "declaration-block-no-duplicate-properties": true, // 禁止声明快重复属性
// "no-descending-specificity": true, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器。
// "selector-max-id": 0, // 限制一个选择器中 ID 选择器的数量
// "max-nesting-depth": 3,
"scss/at-import-partial-extension": null,
'scss/dollar-variable-pattern': null, //解决类名不允许下划线
'scss/double-slash-comment-whitespace-inside':null,// 解决双斜杠注释后要有一个空格
'selector-class-pattern': null,
'block-no-empty': null,
'no-empty-source': null,
'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep'],
},
],
'selector-pseudo-class-no-unknown': [
true,
{
ignorePseudoClasses: ['deep'],
},
],
'font-family-no-missing-generic-family-keyword': null,
'no-duplicate-selectors': null,
'selector-id-pattern': null, //指定id选择器的模式
'custom-property-pattern': null, //为自定义属性指定模式。
'no-invalid-double-slash-comments': null, //禁止使用双斜杠注释（关闭）
'at-rule-no-unknown': [
true,
{
ignoreAtRules: ['mixin', 'if', 'else', 'include'],
},
],
'property-no-unknown': [
true,
{
ignoreProperties: ['line-clamp'],
},
],
'indentation': [2],
'order/properties-order': [ // 规则顺序
'position',
'content',
'top',
'right',
'bottom',
'left',
'float',
'display',
'margin',
'margin-top',
'margin-right',
'margin-bottom',
'margin-left',
'margin-collapse',
'margin-top-collapse',
'margin-right-collapse',
'margin-bottom-collapse',
'margin-left-collapse',
'border',
'border-radius',
'outline',
'outline-offset',
'padding',
'padding-top',
'padding-right',
'padding-bottom',
'padding-left',
'width',
'height',
'max-width',
'max-height',
'min-width',
'min-height',
'clip',
'font',
'font-family',
'font-size',
'font-smoothing',
'osx-font-smoothing',
'font-style',
'font-weight',
'line-height',
'letter-spacing',
'word-spacing',
'text-align',
'text-decoration',
'text-indent',
'text-overflow',
'text-rendering',
'text-size-adjust',
'text-shadow',
'text-transform',
'word-break',
'word-wrap',
'white-space',
'vertical-align',
'list-style',
'list-style-type',
'list-style-position',
'list-style-image',
'pointer-events',
'opacity',
'filter',
'visibility',
'size',
'transform',
'background',
'background-color',
'color',
'clear',
'cursor',
'overflow',
'overflow-x',
'overflow-y',
'z-index',
],
},
}
2-4 在package.json文件中添加执行脚本
"scripts": {
...
"slint": "stylelint \"src/**/*.(vue|scss|css)\" --fix"
},
2-5 在vscode扩展中安装的Stylelint插件
2-6 打开vscode设置，到settings.json文件中添加规则
{
···
"editor.tabSize": 2,
"stylelint.enable": true,
//自动修复的文件类型
"stylelint.validate": ["css", "scss", "vue", "html"],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
//启用stylelint保存时自动修复
"source.fixAll.stylelint": true
},
}
2-7 样式测试
更改:正确单位为px，ctrl+s保存后自动保存为正确顺序
注:部分配置采用 https://juejin.cn/post/7300789760703397914#heading-5
