stylelint 配置

1.vscode 安装插件Stylelint

2.项目安装插件

pnpm i stylelint stylelint-config-standard stylelint-config-recommended-scss stylelint-config-recommended-vue postcss postcss-html postcss-scss stylelint-config-recess-order stylelint-config-html -D

依赖	说明	备注
stylelint	stylelint 核心库	stylelint
stylelint-config-standard	Stylelint 标准共享配置	stylelint-config-standard 文档
stylelint-config-recommended-scss	扩展 stylelint-config-recommended 共享配置并为 SCSS 配置其规则	stylelint-config-recommended-scss 文档
stylelint-config-recommended-vue	扩展 stylelint-config-recommended 共享配置并为 Vue 配置其规则	stylelint-config-recommended-vue 文档
stylelint-config-recess-order	提供优化样式顺序的配置	CSS 书写顺序规范
stylelint-config-html	共享 HTML (类似 HTML) 配置，捆绑 postcss-html 并对其进行配置	stylelint-config-html 文档
postcss-html	解析 HTML (类似 HTML) 的 PostCSS 语法	postcss-html 文档
postcss-scss	PostCSS 的 SCSS 解析器	postcss-scss 文档，支持 CSS 行类注释

3.根目录下新建规则配置文件

3.1.stylelintrc.js

module.exports = {
  // 继承推荐规范配置
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recommended-scss',
    'stylelint-config-recommended-vue/scss',
    'stylelint-config-html/vue',
    'stylelint-config-recess-order'
  ],
  // 指定不同文件对应的解析器
  overrides: [
    {
      files: ['**/*.{vue,html}'],
      customSyntax: 'postcss-html'
    },
    {
      files: ['**/*.{css,scss}'],
      customSyntax: 'postcss-scss'
    }
  ],
  // 自定义规则
  rules: {
    // 允许 global 、export 、v-deep等伪类
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['global', 'export', 'v-deep', 'deep']
      }
    ],
    'selector-class-pattern': null,
    // 'selector-no-vendor-prefix': null,
    // 'value-no-vendor-prefix': null,
    // 'alpha-value-notation': null,
    'color-function-notation': null,
    // 'rule-empty-line-before': null,
    'no-descending-specificity': null,
    // 'number-leading-zero': null,
    // 'declaration-block-no-redundant-longhand-properties': null,
    'font-family-no-missing-generic-family-keyword': null
  }
}

如果使用了tailwindcss需要这样配置

module.exports = {
    // 继承推荐规范配置
    extends: [
        'stylelint-config-standard',
        'stylelint-config-recommended-scss',
        'stylelint-config-recommended-vue/scss',
        'stylelint-config-html/vue',
        'stylelint-config-recess-order'
    ],
    // 指定不同文件对应的解析器
    overrides: [
        {
            files: ['**/*.{vue,html}'],
            customSyntax: 'postcss-html'
        },
        {
            files: ['**/*.{css,scss}'],
            customSyntax: 'postcss-scss'
        }
    ],
    // 自定义规则
    rules: {
        // 允许 global 、export 、v-deep等伪类
        'selector-pseudo-class-no-unknown': [
            true,
            {
                ignorePseudoClasses: ['global', 'export', 'v-deep', 'deep']
            }
        ],
        'selector-class-pattern': null,
        // 'selector-no-vendor-prefix': null,
        // 'value-no-vendor-prefix': null,
        // 'alpha-value-notation': null,
        'color-function-notation': null,
        // 'rule-empty-line-before': null,
        'no-descending-specificity': null,
        // 'number-leading-zero': null,
        // 'declaration-block-no-redundant-longhand-properties': null,
        'font-family-no-missing-generic-family-keyword': null,
        'at-rule-no-unknown': null,
        'scss/at-rule-no-unknown': [
            true,
            {
                'ignoreAtRules': ['tailwind', 'tailwindcss'] //tailwindcss相关配置
            }
        ],
    }
}

3.2.stylelintignore

dist
node_modules
public
.husky
.vscode
.idea
*.sh
*.md

stats.html

4.新增命令

 "scripts": {
    // ...
    "lint:stylelint": "stylelint  \"**/*.{css,scss,vue,html}\" --fix",
  },