VS Code中Stylelint快速修复功能失效？如何启用并使用该功能？

一、启用Stylelint快速修复的基础步骤 #

• 安装VS Code插件：在扩展市场搜索stylelint，安装官方发布的Stylelint插件（作者为stylelint）。
• 配置自动修复：打开VS Code的settings.json，添加以下配置（按需调整文件类型）：

{
  // 保存时自动执行Stylelint修复
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  // 指定需要Stylelint校验的文件类型
  "stylelint.validate": ["css", "scss", "less", "vue", "html"]
}

二、排查快速修复失效的常见原因 #

• 本地未安装Stylelint依赖：仅装VS Code插件不够，需在项目根目录安装核心包及配置：

npm install stylelint stylelint-config-standard --save-dev

同时在项目根目录创建.stylelintrc.json配置文件：

{
  "extends": "stylelint-config-standard"
}

• 规则不支持自动修复：部分Stylelint规则默认不可修复，可查看规则文档确认是否带有fixable标记，仅启用支持修复的规则。
• 版本不兼容：VS Code插件与本地Stylelint版本差异过大可能导致失效，可在VS Code设置中开启stylelint.useLocalVersion，强制使用项目本地安装的Stylelint版本。
• 文件类型未关联：确保目标文件类型已添加到stylelint.validate数组中，否则插件不会对该类型文件进行校验和修复。
• 工具冲突：若同时使用Prettier、ESLint等工具，可能存在规则冲突。可通过stylelint-config-prettier禁用与Prettier冲突的Stylelint规则，避免互相干扰。
• 缓存问题：Stylelint的缓存可能导致修复不生效，可删除项目中的.stylelintcache文件，或在.stylelintrc.json中添加"cache": false禁用缓存。

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