如何在Vue3项目（VSCode环境）配置Stylelint实现保存时自动校验

1. 补充缺失依赖 #

Stylelint 14+ 本身不直接解析.vue单文件和SCSS语法，需要额外安装对应解析依赖：
执行安装命令：
yarn add stylelint-config-standard-scss stylelint-config-standard-vue postcss-html postcss-scss -D

2. 修正Stylelint配置 #

修改根目录下的stylelint.config.js，补充解析规则和文件适配配置：

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-standard-scss',
    'stylelint-config-standard-vue/scss',
    'stylelint-config-recess-order',
    'stylelint-config-prettier',
    'stylelint-config-css-modules',
  ],
  plugins: [
    'stylelint-scss',
  ],
  overrides: [
    {
      files: ['**/*.scss'],
      customSyntax: 'postcss-scss',
    },
    {
      files: ['**/*.vue'],
      customSyntax: 'postcss-html',
    }
  ],
  rules: {
    // 可根据业务需求自定义规则，以下为常见兼容配置
    'scss/at-rule-no-unknown': null,
  },
}

3. 修正校验命令 #

原命令中调用了未定义的lint:stylelint命令，直接调用项目内的Stylelint本体即可：
修改package.json的scripts配置：

{
  "scripts": {
    "lint:all:stylelint": "stylelint \"src/**/*.{vue,scss}\"",
    // 可新增自动修复命令
    "lint:all:stylelint:fix": "stylelint \"src/**/*.{vue,scss}\" --fix"
  }
}

4. 排查环境兼容问题 #

• 执行npx stylelint --version确认调用的是项目内安装的14.x版本，避免全局旧版本冲突
• 确认stylelint.config.js放置在项目根目录，与package.json同级
• 若使用VSCode Stylelint插件，需在工作区配置中新增适配规则：

// .vscode/settings.json
{
  "stylelint.validate": ["css", "scss", "vue"],
  "stylelint.enable": true
}

内容的提问来源于stack exchange，提问作者Ehsan