VSCode Vue
开发 Vue3 离不开顺手的编辑器。VSCode 免费、轻量、插件生态丰富，配合 Vue 官方插件即可获得完善的语法高亮、智能提示与调试能力，是目前 Vue 开发者的主流选择。
安装与基本设置
到 code.visualstudio.com 下载并安装 VSCode，建议做三件事：
- 安装中文语言包：在扩展面板搜索 Chinese 并安装，重启后界面变为中文。
- 开启保存时格式化：设置中搜索 Format On Save 并勾选。
- 把默认终端设为 PowerShell 或 Git Bash，方便运行 npm 命令。
安装 Vue 官方插件
在扩展面板搜索并安装：
- Vue - Official（即 Volar，Vue3 官方语言服务，提供语法高亮、模板补全、类型检查）。
- Vue Volar extension Pack（可选，一键安装全套 Vue 辅助插件）。
特别提醒：Vue2 时代常用的 Vetur 插件不要用于 Vue3 项目，两者会冲突。
体验：新建 .vue 文件
新建 src/App.vue 并输入以下内容，观察编辑器的变化：
<!-- src/App.vue -->
<template>
<h1>{{ title }}</h1>
<button @click="count++">点我</button>
</template>
<script setup>
import { ref } from 'vue'
const title = ref('VSCode + Vue3 示例')
const count = ref(0)
</script>
<style scoped>
h1 { color: #42b883; }
</style>
编辑器会把 template / script / style 三块分别高亮；把鼠标悬停在 {{ title }} 上还能看到类型提示与跳转入口。运行后页面显示绿色标题与按钮，每点一次按钮计数增加 1。
实用插件清单
| 插件 | 用途 |
|---|---|
| Vue - Official | Vue3 语法支持与类型提示 |
| ESLint | 代码规范检查 |
| Prettier | 统一代码格式 |
| Auto Rename Tag | 同步修改成对的开始/结束标签 |
| Live Server | 快速预览静态 HTML 页面 |
常用操作技巧
- 按 Ctrl + 反引号键打开内置终端，直接运行 npm 命令。
- 在 .vue 文件中按 F12 可跳转到变量定义，右键可重命名符号。
- 使用运行与调试面板（Ctrl+Shift+D）为项目配置调试启动。
小结
VSCode + Vue - Official 插件是开发 Vue3 的标准配置：高亮、补全、调试一步到位。编辑器就绪后，下一节学习如何打包 Vue3 项目。