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

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 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
phpenv搭建网站 vscode+xdebug+phpenv调试php代码
共1课时 | 424人学习
使用 Xdebug 精通 PHP 高级调试技巧【零基础到精通】
共3课时 | 493人学习
vscode手册
共0课时 | 0人学习
