VSCode代码自动纠错工具_Vue开发环境优化教程-VSCode-PHP中文网

vue文件保存不自动修复的核心原因是语言模式、lsp服务（volar）与修复能力未对齐：必须禁用vetur、启用volar、将.vue文件语言模式设为vue，并配置parseroptions.parser指向@typescript-eslint/parser，同时确保eslint-plugin-vue已安装且规则标记为fixable。

vscode代码自动纠错工具_vue开发环境优化教程

editor.codeActionsOnSave 配置对 Vue 文件无效？核心问题不是插件没装，而是语言模式、LSP 服务和修复能力三者没对齐。

Vue 文件为什么 save 时不自动修复 import 或类型错误？

Vue 单文件组件（.vue）的自动修复依赖 volar（Vue 官方推荐 LSP），不是 typescript-language-server 或旧版 Vetur。Volar 才真正支持 source.organizeImports 和 source.fixAll.typescript 在 <script setup></script> 和普通 <script></script> 中生效。

常见现象：

保存后 import 没自动补全或删冗余项
Ctrl + . 灯泡里没有 “Add missing import” 选项
TS 类型错误提示有，但 Quick Fix 不出现

实操建议：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

确认已禁用 Vetur（它和 Volar 冲突）：在扩展面板搜 Vetur，点击「禁用」而非卸载
安装并启用 Volar（作者：Vue Language Features (Volar)）——注意不是 “Volar Server” 单独插件，主插件含 server
打开任意 .vue 文件，右下角语言模式必须是 Vue（不是 Vue HTML 或 HTML），按 Ctrl+Shift+P → Change Language Mode 手动设为 Vue
检查 Developer Tools Console 是否有 volar started 日志；没有则重启 VSCode 或重装 Volar

ESLint 在 Vue 项目里 `source.fixAll.eslint` 不起作用？

VSCode 的 eslint --fix 能力在 Vue 中受限于两个隐性条件：ESLint 必须能解析 .vue 文件，且规则本身要标记为 fixable。

典型失效场景：

只配置了 "source.fixAll.eslint": true，但没告诉 ESLint 如何处理 <template></template> 或 <script setup></script>
用了 @vue/eslint-config-typescript，但没配 parserOptions.parser 指向 @typescript-eslint/parser
规则如 vue/multi-word-component-names 默认不可修复（fixable: "code" 才行）

实操建议：

确保项目中安装了 eslint-plugin-vue 和 @vue/eslint-config-typescript（或对应版本）

.eslintrc.cjs 中必须包含：

parserOptions: {
  parser: '@typescript-eslint/parser',
  ecmaVersion: 2022,
  sourceType: 'module',
  extraFileExtensions: ['.vue']
}

在 settings.json 中明确启用 Vue 特定修复：

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "source.fixAll.vue": true
}

运行 npx eslint --fix src/**/*.{js,ts,vue} 本地验证是否真能修 —— 如果 CLI 能修而 VSCode 不能，问题一定出在插件链或工作区配置

拼写检查在 `<template></template>` 字符串里不标红？

Code Spell Checker 默认只查 plaintext、markdown、javascript 等语言模式，vue 模式不在默认检查范围内，所以 <template><div>用户名</div></template> 里的“用户名”不会被识别。

实操建议：

打开 settings.json，添加：
```
"cSpell.language": ["en", "zh"],
"cSpell.enabledLanguageIds": ["*"]
```
（"*" 表示对所有语言 ID 启用，包括 vue）

若只想精准控制，改用：

"cSpell.enabledLanguageIds": ["vue", "javascript", "typescript", "html", "markdown"]

中文复合词（如“登录页”“useStore”）必须配：
```
"cSpell.allowCompoundWords": true
```
，否则会被拆成单字报错
项目专属词（如 pinia、unocss）加到根目录 .cspell.json 的 words 字段，别加进用户词典

为什么 `Ctrl + .` 灯泡里总缺关键修复项？

Quick Fix 菜单的内容由当前光标位置的诊断信息（diagnostic）决定，而诊断来源取决于谁在报告问题：Volar 报 import/类型问题，ESLint 报风格/逻辑问题，Prettier 不报问题只格式化。三者不重叠，也不自动合并修复项。

例如：

光标停在未导入的 ref 上 → Volar 提供 “Import ref from vue”
光标停在多一个空格的 const a = 1 ; 上 → ESLint 提供 “Fix spacing around =”
光标停在 <div class="foo"> 上 → 可能啥都不显示（除非装了 <code>stylelint 或 html-validate）
实操建议：
- 不要指望一个快捷键解决所有问题；先看波浪线颜色和悬停提示，确认是哪类工具报的错
- 对 <template></template> 增强修复，可装 Vue - Official 插件（含 Volar）+ stylelint（配 stylelint-config-html）
- 对 <script setup></script> 的响应式解构缺失，Volar 的 source.addMissingImports 能补，但需确保 compilerOptions.isolatedModules: false（否则 TS 会跳过类型检查）
- 如果灯泡长期空白，检查右下角语言模式、Developer Tools 里有没有 LSP crash 日志、以及当前文件是否被 files.exclude 或 search.exclude 忽略
Volar 的修复能力高度依赖 tsconfig.json 是否有效加载，哪怕只是空文件也比没有强；而 ESLint 的修复范围永远受限于规则本身的 fixable 属性 —— 这两点最容易被忽略，却直接决定你每天要手动敲多少次 import 或删多少个分号。