vue开发够用插件是volar（需开启takeovermode）、eslint（配.eslintrc.cjs）、prettier（禁用自动格式化）；ts项目必用tsconfig.json并配置types和paths，路径别名须与vite alias一致，且.vue后缀不可省。

装哪些插件才算够用 Vue 开发不是装个 Vue 插件就完事。VS Code 默认不识别 .vue 文件的语法高亮和跳转，得靠插件补足。核心就三个：Volar（必须，替代已废弃的 Vetur）、ESLint（校验 JS/TS 逻辑）、Prettier（格式化，但注意别和 ESLint 冲突）。 - Volar 要开启 "volar.enableTakeOverMode": true 配置，否则 Ctrl+Click 跳不到组件内部、ref 类型推导失效 - ESLint 插件需配合项目里有 .eslintrc.cjs 或 eslint.config.js，否则报 “No ESLint configuration found” - Prettier 和 ESLint 同时启用时，关掉 Prettier 的自动格式化（"prettier.enable": false），改用 ESLint 的 eslint.format.enable，避免样式反复打架

tsconfig.json 和 jsconfig.json 怎么选 Vue 3 + TS 项目必须用 tsconfig.json；纯 JS 项目才轮到 jsconfig.json。很多人配错导致路径别名（如 @/components）不生效、defineProps 类型丢失。 - tsconfig.json 里必须含 "compilerOptions": { "types": ["vue"] }，否则 defineComponent 报红 - 若用 Vite，tsconfig.json 的 "include" 至少要包含 ["src/**/*", "src/**/*.d.ts"]，漏掉 .d.ts 会导致自定义类型声明无效 - jsconfig.json 仅用于 JS 项目，且必须设 "checkJs": true 才能触发基础类型检查，否则 ref(null) 这类写法不会报警

热更新失效或控制台没报错 Volar 接管了语言服务，但旧版 Volar 或配置冲突会导致 HMR（热更新）卡住、错误不显示在 Problems 面板。常见现象：改了模板没刷新、console.log 不输出、TS 错误只在终端闪一下。 - 检查 VS Code 右下角是否显示 “TypeScript Version: Bundled” —— 必须是项目本地的 TS 版本（如 5.2.2），否则类型检查脱节 - 关闭其他可能干扰的插件，比如 Auto Rename Tag 或老版 Vetur（卸载后重启 VS Code） - 在设置里搜 volar.trace.server，设为 verbose，然后看 Output 面板里的 Volar Server 日志，常能看到 “Failed to resolve xxx” 这类真实原因

路径别名跳转不了怎么办@/ 或 ~/ 点不进去，不是插件问题，是配置没对齐。Volar 依赖 TS 的路径映射，而 Webpack/Vite 的别名只是运行时生效，编辑器不认。 - tsconfig.json 的 "compilerOptions.paths 必须和 Vite 的 resolve.alias 保持一致，例如：

"paths": {
  "@/*": ["src/*"],
  "@assets/*": ["src/assets/*"]
}

- 如果用的是 Vite，确保 vite.config.ts 里 alias 也写了同样结构，否则跳转时提示 “Cannot find module” - 单文件组件里写 import Comp from '@/components/Comp.vue'，路径结尾的 .vue 不能省——TS 默认不解析无后缀的 .vue 导入

Volar 的接管模式很轻，但也因此更依赖配置对齐；一个 tsconfig.json 里多一个逗号、少一个星号，都可能导致整个类型系统静默失效。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！