VSCode代码规范检查插件_Vue项目自动校验方案

酷敏大大_2252

酷敏大大_2252

2026-06-02

337人浏览

原创

vue项目vscode保存错乱、v-model无提示、defineprops校验失效,根本原因是eslint/prettier/volar三者权限未厘清:volar未接管语法层导致类型推导失败;eslint未正确验证vue语言模式;pretterr与eslint修复冲突。

vscode代码规范检查插件_vue项目自动校验方案

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

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

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

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

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

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

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程