使用VSCode开发Vue.js项目需先安装Node.js和VSCode，再通过Vue CLI或Vite创建项目，推荐Vite以获得更快的构建速度。安装Volar、ESLint、Prettier等插件以提升开发效率，并在settings.json中配置保存时自动格式化和修复代码。确保禁用Vetur避免冲突，安装项目依赖后运行npm run dev启动开发服务器，支持热更新。可选配置VSCode调试器进行前端调试，实现高效开发。

使用 VSCode 开发 Vue.js 项目非常高效，配合插件和工具能极大提升开发体验。下面介绍完整的配置和开发流程。

安装 VSCode 与 Node.js

确保你已安装最新版的 VSCode 和 Node.js（建议 16+ 版本）。Node.js 提供 npm 或 yarn 包管理器，用于创建和管理 Vue 项目。

创建 Vue 项目

推荐使用 Vue 官方脚手架工具 Vue CLI 或基于 Vite 的 create-vue 创建项目。

使用 Vue CLI：

• npm install -g @vue/cli
• vue create my-vue-project

使用 Vite（更快更现代）：

• npm create vue@latest
• cd my-vue-project && npm install

配置 VSCode 插件

安装以下常用插件提升开发效率：

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

• Volar：Vue 3 推荐的官方语言支持插件（取代 Vetur）
• ESLint：代码检查，配合项目中的 ESLint 规则使用
• Prettier：代码格式化工具
• Path Intellisense：自动补全文件路径
• Auto Close Tag / Auto Rename Tag：HTML 标签自动闭合与重命名

注意：如果使用 Volar，需禁用或卸载 Vetur，避免冲突。

启用代码格式化与语法检查

让 VSCode 在保存时自动格式化代码并检查错误。

在项目根目录创建或修改 .vscode/settings.json 文件：

笔目鱼英文论文写作器

写高质量英文论文，就用笔目鱼

49

查看详情

{   "editor.formatOnSave": true,   "editor.codeActionsOnSave": {     "source.fixAll.eslint": true   },   "files.associations": {     "*.vue": "vue"   },   "typescript.preferences.includePackageJsonAutoImports": "auto" } 

确保项目中已安装 eslint 和 prettier 相关依赖，并配置好 .eslintrc.cjs 和 prettier.config.js。

启动开发服务器

在 VSCode 终端中运行：

• npm run dev

通常会启动本地服务（如 http://localhost:5173），浏览器打开后即可查看页面，修改代码会实时热更新。

调试 Vue 项目（可选）

使用 VSCode 调试器调试前端代码：

• Debugger for Chrome 或 Microsoft Edge Tool
• launch.json

设置断点后按 F5 即可调试。

基本上就这些。配置完成后，你就可以在 VSCode 中流畅地编写、格式化、检查和调试 Vue.js 项目了。