VSCode必备代码管理插件_VSCode自动校验Vue参数【经验】-VSCode-PHP中文网

根本原因是eslint、prettier、volar三者权限未厘清且volar未接管vue语法层：需正确配置eslint.validate、禁用eslint.autofixonsave改用codeactionsonsave、启用volar模板校验、确保tsconfig.json存在并配置types和vuecompileroptions。

vscode必备代码管理插件_vscode自动校验vue参数【经验】

Vue 项目在 VSCode 里保存后格式错乱、ESLint 报错不修复、v-model 参数没提示、props 类型校验失效——根本不是插件装得少，而是 ESLint、Prettier、Volar 三者权限没划清，且 Volar 没接管 Vue 语法层。

为什么 `eslint.autoFixOnSave` 在 .vue 文件里不生效

VSCode 默认把 .vue 当作 HTML 处理，ESLint 插件只监听 javascript 和 vue 语言模式，但旧版配置常漏掉对 script 块的显式声明。

确认右下角语言模式是 Vue（不是 HTML 或 Plain Text），点它手动切换
在 settings.json 中必须包含："eslint.validate": ["vue", "javascript", "typescript"]，不能只写 ["javascript", "vue"] —— Vue SFC 的 script 块实际走的是 JS/TS 解析器
禁用已废弃的 eslint.autoFixOnSave（VSCode 1.89+ 已弃用），改用："editor.codeActionsOnSave": { "source.fixAll.eslint": true }
确保项目有 eslint-plugin-vue，并在 .eslintrc.cjs 的 extends 中加入 'plugin:vue/vue3-essential' 或 'plugin:vue/vue3-recommended'

`v-model`、`defineProps` 等 Vue 语法无类型提示

这是 Volar（非 Vetur）未激活或被其他插件压制的典型表现。Vetur 已停止维护，Volar 是 Vue 3 官方推荐的语言服务器，负责 script setup 的类型推导、props 自动补全、模板中 v-model 参数名提示等核心能力。

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

卸载 Vetur，安装 Volar（由 John C. Lin 发布）和 TypeScript Vue Plugin (Volar)（二者需配套）
在 settings.json 中添加："volar.ignoreProjectName": ["node_modules", "dist"]，避免大目录拖慢启动
若仍无提示，按 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Win），输入 Volar: Restart Server 手动重载
检查 tsconfig.json 是否启用了 "compilerOptions": { "types": ["vue"] }，否则 defineProps 推导会退化为 any

保存时 Prettier 格式化和 ESLint 修复互相覆盖

冲突本质是：Prettier 改了缩进/引号，ESLint 紧跟着删分号或加空格，再保存又触发 Prettier 回滚——光标跳、波浪线闪、文件变“脏”。

彻底关闭 ESLint 的格式化权："eslint.format.enable": false（必须写在工作区 settings.json，用户级设置会被覆盖）
.prettierrc 里明确写死与团队规则一致的选项，例如："semi": false, "singleQuote": true, "tabWidth": 2
.eslintrc.cjs 的 extends 数组中，'eslint-config-prettier' 必须放在最后，且顺序不能颠倒：['standard', 'plugin:vue/vue3-essential', 'eslint-config-prettier', 'prettier']
不要启用 prettier.eslintIntegration（该配置已在 2024 年被 Prettier 官方移除，VSCode 插件新版会直接忽略）

Vue 模板中 `props` 名称输错却无报错

这通常不是 ESLint 没配好，而是 Volar 的模板类型检查被禁用，或组件未正确导出 defineProps 类型定义。

确保 script setup 中使用了显式类型，例如：const props = defineProps()，而非 defineProps({ title: String })（后者无法推导 TS 类型）
在 settings.json 中启用模板检查："volar.validation.template": true
如果用了 defineModel，需升级到 Vue 3.4+ 并在 tsconfig.json 中添加 "vueCompilerOptions": { "target": 340 }
第三方 UI 组件库（如 Element Plus）需额外安装对应类型包，例如 @element-plus/icons-vue，否则图标组件属性不提示