刚学Vue3怎么用VSCode搭建高效开发环境？新手避坑指南+2024实用插件推荐

terry 45分钟前阅读数 9 #Vue

文章标签 Vue3新手VSCode环境搭建 2024Vue3实用VSCode插件

首先得说清楚，不管是用脚手架还是直接练手，VSCode绝对是Vue3开发的“黄金搭档”——轻量、扩展性强、上手门槛低，但新手很容易踩“配置太乱报错”“插件装多卡死”“找不到好用快捷键”这类坑,接下来咱们一步步拆解：

第一步：选对VSCode的基础版本，别乱装beta版

很多人图新鲜去下beta版的VSCode，觉得功能更多，其实对新手完全没必要——beta版偶尔会有兼容性问题，比如和刚更的Vue3语法插件冲突，或者某些插件更新慢跟不上，就下官网最新的正式稳定版就行，安装的时候记得勾上「将‘通过Code打开’添加到Windows资源管理器目录上下文菜单」「添加到PATH（重启后生效）」这两个选项，后面打开项目文件夹会方便很多,不用每次都右键选路径折腾半天。

第二步：必备的基础开发环境先搭好，VSCode只是“编辑器外壳”

新手常犯的一个错就是先装一堆VSCode插件，结果写代码的时候连npm install都执行不了，还懵懵地问插件怎么不好使，这里得明确：Vue3开发不管用Vite还是CLI，都得先有Node.js环境，Node.js建议选LTS长期维护版，别选Current尝鲜版——LTS版修复了大部分已知bug，而且生态里的插件、库基本都能兼容。

怎么确认Node.js和npm安装成功？打开VSCode的终端（快捷键Ctrl+`，别和输入法切换冲突），分别输入node -v和npm -v，如果能看到版本号，说明没问题，对了，国内用户建议先把npm镜像换成淘宝的，不然下载依赖慢到怀疑人生，终端里输入npm config set registry https://registry.npmmirror.com就行，换完可以用npm config get registry确认一下有没有生效。

第三步：创建一个干净的Vue3练手/项目文件夹，学会VSCode的终端操作

很多人一开始喜欢把所有代码堆在桌面一个大文件夹里，时间久了根本找不到，建议新建一个专门的Vue3工作区文件夹，D:\Vue3-Workspace」，以后每个项目都单独建子文件夹，你可以选择用脚手架创建标准项目，或者直接建个HTML+JS+Vue3 CDN的练手文件：

练手版快速上手（不用装脚手架）

适合刚接触Vue3语法、不想花时间配依赖的阶段，在Vue3工作区里建个子文件夹「Vue3-Basic-Practice」，打开VSCode，用上面勾的右键菜单或者直接拖进去都行，然后新建三个文件：index.html、style.css、main.js。 index.html里引入Vue3的CDN就行，比如最新的3.4+稳定版：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Vue3练手</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入Vue3的CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
    <script src="main.js"></script>
</body>
</html>

main.js里写个简单的计数器试试水：

const { createApp, ref } = Vue
createApp({
    setup() {
        const count = ref(0)
        return { count }
    },
    template: `<div class="counter"><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div>`
}).mount('#app')

style.css稍微美化一下按钮，然后直接用VSCode右下角的「Live Server」插件启动就行（后面会讲这个插件的安装和用法）。

标准项目版：用Vite还是CLI？

2024年了，新手完全不用考虑Vue CLI了——Vite更快、更轻量、更新维护更及时，连Vue官方现在主推的都是Vite，怎么用Vite创建Vue3标准项目？在VSCode终端里cd到刚才的Vue3工作区（如果已经拖进去子文件夹练手了，就先cd..回到上一级），然后输入npm create vite@latest,按提示操作：

输入项目名称，Vue3-Vite-Project」
选「Vue」框架（不是Vue + TypeScript哦，新手先从原生JS上手,等语法熟了再加TS）
选「JavaScript」变种然后终端会提示你cd进项目文件夹、npm install、npm run dev，跟着做就行，npm run dev之后会给你一个本地预览地址，比如http://localhost:5173/,复制到浏览器打开就能看到Vue3的默认页面了。

第四步：安装2024年最实用的VSCode Vue3插件，别装超过10个！

很多新手插件装二三十个，结果VSCode启动慢、卡输入法、甚至频繁崩溃——插件不是越多越好，只装真正能提高效率的就行，我整理了6个必装+4个进阶可选的，一共10个,刚好够用：

必装插件（新手练手到开发项目都能用）

Volar：这个是Vue3官方推荐的语法高亮、智能提示、格式化插件，也是新手踩坑最多的——千万记得把之前装的Vue2专用插件Vetur禁用，不然会和Volar冲突，出现代码不高亮、提示乱码的问题，禁用Vetur很简单，打开VSCode左侧的扩展面板（快捷键Ctrl+Shift+X），搜索Vetur，点右下角的「禁用」就行，Volar还自带TypeScript Vue Plugin，如果你后面学TS的话,记得把这个插件也启用。
ESLint + Prettier：这两个是黄金搭档，ESLint负责检查代码语法错误和代码规范，Prettier负责自动格式化代码，不用你手动调缩进、换行、引号什么的，新手可以直接装「ESLint Prettier」这个整合插件，然后稍微配置一下就行——配置也很简单，不用写复杂的.eslintrc.js或者.prettierrc文件，直接在VSCode的设置里搜「Format On Save」，勾上；搜「Default Formatter」，选「Prettier - Code formatter」；搜「ESLint Validate」，把Vue、JavaScript、HTML这些加上就行。
Vue VSCode Snippets：这个插件提供了大量Vue3的快捷键代码片段，比如输入v3setup回车，就能自动生成一个带ref、reactive、computed这些常用API的setup函数；输入v3routerlink回车，就能自动生成router-link标签,能省很多打字时间。
Live Server：刚才练手版用到的，这个插件能给本地HTML文件启动一个微型服务器，还能实时刷新——只要你改了HTML、CSS、JS文件，浏览器会自动更新，不用你手动刷新,练手的时候特别方便。
Auto Rename Tag：自动重命名HTML/Vue的标签对，比如你把<div改成<p，后面的</div会自动改成</p,改模板的时候特别省心。
Path Intellisense：自动补全文件路径，比如你要引入assets里的图片，输入src/assets/，插件会自动列出里面的文件,不用你手动记路径或者去文件夹里找。

进阶可选插件（等语法熟了、做稍微大一点的项目再装）

TypeScript Vue Plugin (Volar)：刚才Volar自带的，学TS的时候必须启用，不然.vue文件里的TS语法会报错。
Vue DevTools：这个不是VSCode插件，是浏览器插件，但开发Vue3项目必备——Chrome和Edge都能装，能实时查看Vue3组件的状态、props、事件、路由、Vuex/Pinia状态机，调试的时候特别好用，虽然不是VSCode里的，但必须提一下，很多新手不知道怎么调试Vue3组件,就是因为没装这个。
Git Graph：可视化Git分支、提交记录，做团队协作或者个人项目版本管理的时候特别方便，不用每次都在终端输git log、git branch这些命令。
Tailwind CSS IntelliSense：如果你用Tailwind CSS写样式的话，这个插件能自动补全类名，还能实时预览样式,比手动查Tailwind文档快很多。

第五步：新手常见的5个VSCode Vue3开发坑，提前避坑！

坑1：Vetur和Volar冲突，代码不高亮、提示乱码

刚才已经提过了，千万记得禁用Vetur！禁用Vetur！禁用Vetur！重要的事情说三遍，如果禁用了还不行,就重启一下VSCode。

坑2：npm install慢到怀疑人生

记得提前把npm镜像换成淘宝的，刚才也讲过了，终端输入npm config set registry https://registry.npmmirror.com就行，如果换了还慢，可以试试用cnpm或者pnpm——pnpm比npm和cnpm都快，而且更省磁盘空间，新手可以试试，终端输入npm install -g pnpm安装pnpm，然后用pnpm create vite@latest创建项目，pnpm install下载依赖。

坑3：Live Server启动后看不到Vue3练手代码的效果

检查一下main.js里有没有正确引入Vue3的CDN，有没有正确createApp和mount；检查一下style.css、main.js的路径有没有和index.html在同一个文件夹里；如果这些都没问题，就重启一下Live Server。

坑4：ESLint Prettier格式化规则冲突

比如ESLint要求用单引号，Prettier要求用双引号；ESLint要求句尾不加逗号，Prettier要求句尾加逗号，这时候可以稍微改一下VSCode的设置，或者直接用Vite创建项目时自动生成的.eslintrc.cjs和.prettierrc.json文件——Vite的默认配置已经帮你把ESLint和Prettier的冲突解决了,直接用就行。

坑5：找不到好用的快捷键

VSCode的快捷键很多，新手记不住也没关系，不用刻意背,常用的几个记住就行：

打开/关闭终端：Ctrl+`
打开/关闭扩展面板：Ctrl+Shift+X
打开/关闭设置：Ctrl+,
格式化代码：Shift+Alt+F（如果勾了Format On Save,保存的时候会自动格式化）
快速打开文件：Ctrl+P
查找替换：Ctrl+H
注释一行：Ctrl+/
注释多行：Shift+Alt+A

写在最后

刚学Vue3用VSCode搭建开发环境，不用追求太复杂的配置，先把基础的Node.js、Vite/Vue3练手文件、必装插件装好，踩几个小坑没关系，踩过了印象才深刻，等语法熟了、做稍微大一点的项目，再慢慢加TS、Vuex/Pinia、Vue Router这些东西，再装进阶插件，希望这篇文章能帮到刚学Vue3的你，少走弯路,快速上手！