项目中如何使用stylelint来规范css?

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-deps

2-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