如何配置 VSCode 以支持 Vue.js 开发？

2025-9-19 16:42

|

16

|

开发工具

2750 字

|

11 分钟

安装Volar扩展以获得Vue 3全面语言支持，配置ESLint进行代码质量检查，集成Prettier实现统一格式化，并通过VSCode设置确保保存时自动格式化，从而保障Vue.js开发环境的高效与规范。

如何配置 VSCode 以支持 Vue.js 开发？

在VSCode里配置好Vue.js开发环境，核心其实就那么几步：安装对的扩展，设置好代码检查和格式化，然后确保编辑器能正确理解你的Vue文件。说白了，就是给VSCode装上“Vue的眼镜”，让它看得懂、写得顺。

解决方案

要让VSCode成为你Vue.js开发的得力助手，以下是关键步骤：

安装 Volar 扩展： 对于Vue 3项目，Volar (Vue Language Features) 是不可或缺的。它提供了全面的语言支持，包括模板语法高亮、智能提示、类型检查（尤其是针对TypeScript和
```
<script setup>
```
）、错误诊断等。直接在VSCode扩展市场搜索“Volar”并安装。如果你还在维护Vue 2项目，可以考虑同时安装Vetur，但请确保在Vue 3项目中禁用Vetur，以免冲突。

配置 ESLint： 保持代码风格一致性和捕获潜在错误至关重要。

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

在项目根目录安装ESLint及其Vue插件：

npm install eslint eslint-plugin-vue @vue/eslint-config-typescript --save-dev

（如果使用TypeScript）或者

npm install eslint eslint-plugin-vue --save-dev

（如果只用JavaScript）

创建或修改

.eslintrc.js

文件，配置规则集，例如：

module.exports = {   root: true,   env: {     node: true,   },   extends: [     'plugin:vue/vue3-essential', // 或 'plugin:vue/recommended' 等更严格的规则     '@vue/typescript/recommended', // 如果使用TypeScript     'eslint:recommended'   ],   parserOptions: {     ecmaVersion: 2020,     parser: '@typescript-eslint/parser' // 如果使用TypeScript   },   rules: {     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',     // 自定义规则   }, };

安装 VSCode 的 ESLint 扩展，它会自动读取项目配置并在编辑器中显示错误和警告。

集成 Prettier 进行代码格式化： 格式化工具能让代码保持整洁统一。

安装 Prettier 及其 ESLint 兼容插件：

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

在

.eslintrc.js

的

extends

数组中添加

'plugin:prettier/recommended'

，确保它在最后，以覆盖ESLint中可能与Prettier冲突的格式规则：

extends: [   // ...其他规则   'plugin:prettier/recommended' ],

在项目根目录创建

.prettierrc.js

或

.prettierrc

文件，定义你的格式化规则，例如：

module.exports = {   semi: false, // 不使用分号   singleQuote: true, // 使用单引号   printWidth: 100, // 每行最大字符数   tabWidth: 2, // 缩进宽度   trailingComma: 'es5', // 尾随逗号 };

安装 VSCode 的 Prettier – Code formatter 扩展。
在 VSCode 设置中，搜索
```
editor.defaultFormatter
```
，将其设置为
```
esbenp.prettier-vscode
```
。
勾选
```
editor.formatOnSave
```
，这样每次保存文件时代码都会自动格式化。

Vue 3 项目中，Volar 和 Vetur 应该如何选择？

我记得以前写Vue 2的时候，Vetur是绝对的主力，它几乎是当时Vue开发的标配。但到了Vue 3，尤其是用上

<script setup>

和TypeScript，Vetur就显得有点力不从心了。这时候，Volar的出现简直是救星。

简单来说，对于Vue 3项目，尤其是那些使用了Composition API、

<script setup>

语法糖和TypeScript的项目，Volar是唯一的、也是最佳的选择。 Vetur的设计哲学更偏向于Vue 2的Options API和JavaScript，它对Vue 3的很多新特性支持并不完善，比如在

<script setup>

块中，Vetur可能无法提供正确的类型推断和智能提示，这在大型项目中会非常影响开发效率。

Volar从一开始就是为Vue 3量身定制的，它利用了Vue 3的内部类型系统，能提供更精准的类型检查和更强大的语言服务。它能正确处理

<script setup>

的语法，理解其中的变量和函数，并且对TypeScript的支持也做得非常好，能让你在Vue组件中享受到和普通TypeScript文件一样的开发体验。

如果你同时维护Vue 2和Vue 3项目，我的建议是在VSCode中同时安装Vetur和Volar。然后，在你的Vue 3项目工作区设置中，明确指定禁用Vetur，或者在Volar的设置中启用“Takeover Mode”，让Volar接管所有的Vue文件处理。这样可以避免两个扩展之间的功能冲突，确保每个项目都能得到最佳的语言服务支持。

如何确保 VSCode 中的 Vue 代码风格统一且无错误？

代码风格这东西，团队协作时简直是老大难。每个人都有自己的习惯，但一旦项目大了，那简直是灾难。所以，ESLint和Prettier的组合，对我来说，不只是工具，更是一种规范和效率的保障。

MindShow

MindShow官网 | AI生成PPT，快速演示你的想法

972

查看详情

要确保Vue代码风格统一且无错误，关键在于ESLint和Prettier的协同工作。ESLint负责代码质量和潜在错误检查，例如不必要的变量、未使用的导入、Vue组件的最佳实践等。它就像一个严谨的语法老师，指出你代码中的“语法错误”和“表达不规范”的地方。而Prettier则专注于代码格式化，比如缩进、引号、分号、空格等，它更像一个排版设计师，确保你的代码看起来整洁美观。

配置步骤我通常是这样做的：

安装核心依赖： 先把
```
eslint
```
、
```
eslint-plugin-vue
```
（Vue项目的ESLint插件）和
```
prettier
```
、
```
eslint-config-prettier
```
（禁用ESLint中与Prettier冲突的规则）、
```
eslint-plugin-prettier
```
（将Prettier规则作为ESLint规则运行）这些npm包都装好。
ESLint配置 (

.eslintrc.js

)：在
```
extends
```
数组中，我会先引入
```
plugin:vue/vue3-recommended
```
（或者根据团队规范选择其他等级），然后是
```
eslint:recommended
```
，如果项目是TypeScript，还会加上
```
@vue/typescript/recommended
```
。最关键的一步是，在

extends

数组的最后，一定要加上

'plugin:prettier/recommended'

。这个顺序非常重要，它确保Prettier的格式化规则能覆盖ESLint中可能与之冲突的规则，避免了“ESLint报错，Prettier格式化后又变回去”的尴尬局面。
Prettier配置 (

.prettierrc.js

)：我会定义一些基本的格式化规则，比如
```
semi: false
```
（不加分号，个人习惯，更简洁）、
```
singleQuote: true
```
（统一单引号）、
```
printWidth: 100
```
（控制行宽）。这些配置决定了代码最终的“样子”。
VSCode扩展与设置： 安装VSCode的ESLint和Prettier扩展。然后在VSCode的用户设置（
```
settings.json
```
）中，我会把
```
editor.defaultFormatter
```
设置为
```
esbenp.prettier-vscode
```
，并开启
```
editor.formatOnSave
```
。这样，每次我保存文件时，Prettier就会自动根据我的配置来格式化代码，ESLint则会在后台持续检查代码质量并给出提示。

通过这种方式，你的Vue代码在VSCode中不仅能保持统一的风格，还能在编写过程中及时发现潜在的错误和不规范之处，大大提升了开发效率和代码质量。

除了核心插件，还有哪些 VSCode 扩展能进一步优化 Vue.js 开发体验？

除了Volar、ESLint和Prettier这些“基石”级别的扩展，还有一些辅助性的VSCode扩展，虽然不是Vue开发的核心，但它们能显著提升开发效率和舒适度，用起来会觉得很顺手。我个人在日常开发中，经常会用到以下几种：

Vue VSCode Snippets： 这个扩展提供了大量的Vue相关代码片段。比如你输入
```
vbase
```
就能快速生成一个基础的Vue组件结构，输入
```
vdata
```
就能生成data属性。对于我这种记性不太好，或者想快速搭建组件骨架的人来说，简直是神器。它能减少很多重复性的打字工作，让你更专注于业务逻辑。
Auto Rename Tag： 写HTML或Vue模板时，改一个标签名，另一个闭合标签也要跟着改，这很烦。Auto Rename Tag就能帮你解决这个问题。你修改一个开始标签，对应的结束标签会自动同步修改，反之亦然。这虽然是个小功能，但在频繁调整DOM结构时，能省下不少心力。
Path Intellisense： 在Vue组件中导入其他组件或资源文件时，
```
import Component from '../components/Component.vue'
```
这样的路径提示非常有用。Path Intellisense能提供文件路径的智能补全，在你输入路径时，它会显示当前目录和子目录的文件列表，避免了手动输入路径可能导致的拼写错误，也省去了来回查看文件结构的麻烦。
GitLens — Git supercharged： 虽然这不是Vue特有的扩展，但对于任何需要版本控制的项目来说，GitLens都是一个不可多得的利器。它能直接在代码行旁显示Git提交信息，谁在什么时候修改了这行代码，一目了然。对于理解代码历史、追踪问题来源，以及团队协作时的代码审查，都非常有帮助。它能让你更好地理解代码的“前世今生”。
Color Highlight： 在Vue样式块中写CSS时，
```
#f00
```
、
```
rgb(255,0,0)
```
这样的颜色值，如果能直接看到对应的颜色块，会直观很多。Color Highlight就能做到这一点，它会在颜色值旁边或下方直接显示出颜色预览。这对于调整UI颜色，或者快速识别某个颜色代码代表的含义，都非常方便。