在创建项目时，遇到的 vscode 配置 stylelint 问题，记录一下。现在网上的教程都是 14 版本的，但是我用的是 16 版本的，所以需要做一些修改。

安装 stylelint

package.json 版本依赖如下：

"stylelint": "^16.6.1",
"stylelint-config-recess-order": "^5.0.1",
"stylelint-config-recommended-vue": "^1.5.0",
"stylelint-config-standard-scss": "^13.1.0",
"stylelint-prettier": "^5.0.0",
"postcss": "^8.4.38",
"postcss-html": "^1.7.0",
"postcss-import": "^16.1.0",
"postcss-scss": "^4.0.9",

npm install -D stylelint stylelint-config-recess-order stylelint-config-recommended-vue stylelint-config-standard-scss stylelint-prettier postcss postcss-html postcss-import postcss-scss -D

如依赖作用如下：

• stylelint：stylelint 核心
• stylelint-config-recess-order：stylelint 配置文件，用于配置 stylelint 的规则
• stylelint-config-recommended-vue：stylelint 配置文件，用于配置 stylelint 的规则
• stylelint-config-standard-scss：stylelint 配置文件，用于配置 stylelint 的规则
• stylelint-prettier：stylelint 配置文件，用于配置 stylelint 的规则
• postcss：postcss 核心
• postcss-html：postcss 插件，用于处理 html 文件
• postcss-import：postcss 插件，用于处理 import 语句
• postcss-scss：postcss 插件，用于处理 scss 文件

:::warnings 14 <= x < 15 版本 在stylelint版本范围为 14 <= x < 15时，需要使用 stylelint-config-prettier 插件来让 stylelint 与 prettier 兼容。此插件的作用是关闭所有不必要的或可能与prettier冲突的规则。

15 及以上版本 从stylelint 15 版本开始，推荐使用 stylelint-prettier 插件来实现与 prettier 的兼容。该插件会在 stylelint 中运行 prettier，并将 prettier 的格式化结果作为 stylelint 的规则进行检查。 :::

配置 stylelint

在项目根目录下创建 .stylelintrc.js 文件，内容如下：

// @ts-check

/** @type {import("stylelint").Config} */
export default {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-html/vue',
    'stylelint-config-recess-order',
  ],
  plugins: ['stylelint-scss', 'stylelint-order', 'stylelint-prettier'],
  overrides: [
    {
      files: ['**/*.(css|html|vue)'],
      customSyntax: 'postcss-html',
    },
    {
      files: ['*.scss', '**/*.scss'],
      customSyntax: 'postcss-scss',
      extends: ['stylelint-config-standard-scss', 'stylelint-config-recommended-vue/scss'],
    },
  ],
  rules: {
    'prettier/prettier': true,
    'selector-class-pattern': null,
    'no-descending-specificity': null,
    'scss/dollar-variable-pattern': null,
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['deep', 'global'],
      },
    ],
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'],
      },
    ],
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: [
          'tailwind',
          'apply',
          'variants',
          'responsive',
          'screen',
          'function',
          'if',
          'each',
          'include',
          'mixin',
          'use',
        ],
      },
    ],
    'rule-empty-line-before': [
      'always',
      {
        ignore: ['after-comment', 'first-nested'],
      },
    ],
    'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
    'order/order': [
      [
        'dollar-variables',
        'custom-properties',
        'at-rules',
        'declarations',
        {
          type: 'at-rule',
          name: 'supports',
        },
        {
          type: 'at-rule',
          name: 'media',
        },
        'rules',
      ],
      { severity: 'warning' },
    ],
  },
  ignoreFiles: ['**/*.js', '**/*.ts', '**/*.jsx', '**/*.tsx', 'report.html'],
}

配置 vscode

在 vscode 中安装 stylelint 插件，然后在项目 vscode 配置目录 .vscode > settings.json 中配置 stylelint 插件，配置如下：

{
  "stylelint.validate": ["css", "scss", "vue"], // stylelint 校验类型
  "stylelint.configBasedir": ".", // stylelint 配置文件所在目录
  "stylelint.configFile": ".stylelintrc.js", // // stylelint 配置文件，如果没有配置，会自动寻找 .stylelintrc.js 文件
  "stylelint.enable": true, // stylelint 开启
  "editor.formatOnSave": true, // 保存时校验
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit" // stylelint 保存时校验
  },
  // 关闭内置 css, less, scss 校验
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
}