如何用VSCode开发Vue.js项目？

使用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 创建项目。

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

• 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 在保存时自动格式化代码并检查错误。

笔目鱼英文论文写作器

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

87

查看详情

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

{
  "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项目？的详细内容，更多请关注php中文网其它相关文章！