如何用VSCode的扩展插件快速搭建Vue.js开发环境【教程】

vscode vue开发需装Volar、ESLint、Prettier三插件并正确配置：启用Volar接管模式，配置eslint.config.js支持.vue和TS，设置tsconfig.json路径别名并重启服务。

VSCode 本身不自带 Vue 开发支持，所谓“快速搭建”其实是组合几个关键插件 + 正确配置，跳过手动配 eslint、prettier、volar 冲突、tsconfig.json 路径别名这些典型卡点。

必须装的三个插件：Volar（不是 Vetur）

Volar 是 Vue 3 官方推荐的语言服务器，Vetur 已停止维护且与 Composition API / TS 类型推导严重不兼容。装错会导致 ref 类型不识别、defineProps 报红、模板中无法跳转到 script 变量。

• 在扩展市场搜 Volar，认准作者是 Vue 官方（ID: vuejs-language-tools）
• 禁用或卸载 Vetur —— 两者共存会直接让 .vue 文件失去语法高亮和类型检查
• 启用 Take Over Mode：按 Ctrl+Shift+P（windows/linux）或 Cmd+Shift+P（macOS），输入 Volar: switch to Take Over Mode 并执行；这是让 Volar 接管全部 .vue 文件的关键一步

ESLint + Prettier 协同工作的最小配置

只装插件不配规则，eslint 会报一堆 no-unused-vars 或 no-undef，尤其在 setup 语法糖里。核心是让 ESLint 知道它正在处理 Vue SFC，且要兼容 typescript。

• 项目根目录下确保有 eslint.config.js（或 .eslintrc.cjs），内容至少包含：

  export default [   {     files: ['**/*.vue'],     languageOptions: {       parserOptions: {         parser: '@typescript-eslint/parser',         ecmaFeatures: { jsx: true }       }     },     plugins: ['@typescript-eslint', 'vue'],     rules: {       'vue/multi-word-component-names': 'off'     }   } ]

• 装两个插件：ESLint（作者：microsoft）和 Prettier（作者：Esben Petersen）
• 在 VSCode 设置中搜索 format on save，勾选；再搜索 default formatter，对 vue 文件类型设为 esbenp.prettier-vscode，但必须配合 eslint.format.enable 设为 true，否则保存时只格式化不校验

路径别名（@/）跳转失效？检查 tsconfig.json 和 Volar 配置

import HelloWorld from '@/components/HelloWorld.vue' 点击跳转失败，90% 是因为 Volar 没读取到 tsconfig.json 中的 compilerOptions.baseUrl 和 paths。

立即学习“前端免费学习笔记（深入）”；

• 确认 tsconfig.json 里有：

  "compilerOptions": {   "baseUrl": ".",   "paths": {     "@/*": ["src/*"]   } }

• 在 VSCode 设置中搜索 volar take over，确保 Volar: Enable Take Over Mode 是开启状态（前面已提，但这里容易漏）
• 重启 VSCode 或执行 Volar: Restart Server，否则修改 tsconfig.json 后不会立即生效

真正卡住人的从来不是“装什么”，而是插件之间的接管权、配置文件的优先级、以及某个开关没点开。比如 Take Over Mode 不开，Volar 就只是个装饰；eslint.config.js 里没声明 files: ['**/*.vue']，ESLint 就根本不会扫描单文件组件。这些细节比记住插件名字重要得多。