手把手教你在VSCode里秒建Vue项目快捷键、插件与完整实操先回答一个被问烂了的问题VSCode里创建Vue项目到底有没有快捷键严格来说官方没有提供一键生成Vue项目的组合键但通过组合使用终端命令快捷键自定义代码片段完全可以把从输入命令到项目跑起来的耗时压到一分钟以内。我这几年用VSCode写Vue项目从Vue 2的CLI时代一路用到Vue 3的Vite时代积累了一套固定的操作流。这篇就把环境准备、脚手架选型、插件配置、快捷键体系和避坑经验一次说透不管你是刚入门还是已经写了几年前端都能在这篇文章里找到能立刻用上的东西。这篇文章适合两类人一类是刚接触Vue想在VSCode里尽快把项目跑起来的新手另一类是已经在写Vue但总觉得自己的操作流不够顺想把手速再提一档的老手。文章不会停留在按哪个键的层面更重要的是讲清楚为什么这样配、这样按遇到问题怎么排查。1. 环境准备项目创建前的三件套检查1.1 Node.js版本怎么选才顺手创建Vue项目之前Node.js是绕不开的基础环境。很多人栽在第一步就是Node版本不对。Vue 3官方推荐的Vite脚手架要求Node.js版本至少是16.0而2024年以后新发布的Vite 5进一步把要求提到了18.0。也就是说你本地如果还停在Node 14安装依赖的时候会直接报错。判断自己当前版本的方法很简单在终端里执行node -v npm -v如果版本偏低我建议直接用nvmNode Version Manager来做版本管理。为什么因为不同项目可能依赖不同版本的Node比如老项目用Vue CLI可能需要Node 14新项目用Vite则需要Node 18用nvm可以随时切换不用频繁重装。以macOS为例安装nvmcurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bashWindows用户建议直接去官网下载nvm-windows的安装包安装完后在管理员身份的PowerShell里用nvm install 18和nvm use 18来安装切换。注意装完nvm后终端可能提示command not found这时需要重启终端或者手动执行source ~/.bashrcLinux/macOS刷新环境变量。1.2 VSCode必装插件清单与配置理由VSCode本身只是一个编辑器真正让它变成Vue开发利器的是插件生态。我推荐以下插件按重要性排序插件名作用为什么必须有Vue Language Features (Volar)Vue 3语法高亮、类型检查、模板补全官方推荐的Vue 3插件替代了Vue 2时代的VeturVue VSCode SnippetsVue代码片段输入vbase等前缀即可快速生成模板结构ESLint代码规范检查和Vue项目里的ESLint配置联动保存时自动修复Prettier - Code formatter统一代码格式少花时间在手动调整格式上Auto Rename Tag自动重命名配对标签改一个标签闭合标签同步更新Path Intellisense路径提示引入组件、图片时不用全靠手敲npm Intellisensenpm依赖包名补全require/import时自动补全包名Turbo Console Log快速生成console.log一键选中变量并生成日志输出装完插件后有几个基础设置建议改一下。打开设置界面Ctrl ,或Cmd ,搜索format on save把保存时格式化打开再搜索auto save建议设置为onFocusChange这样光标离开一个文件就自动保存配合格式化和ESLint修复效率提升非常明显。1.3 验证环境能不能用的快速测试法很多新手装完环境就急着创建项目结果运行时各种报错。我习惯先做一次快速自检。在终端中依次执行node --version npm --version接着检查VSCode是否能在集成终端中执行npm命令。可以打开VSCode按Ctrl 唤出终端直接输入npm -v如果提示找不到命令多半是VSCode没有继承系统环境变量。Windows用户在系统设置里检查PathmacOS用户检查~/.zshrc配置。这一步没问题后面的创建流程就会非常顺畅。2. 快速创建Vue项目三种方式对比与选型2.1 Vite脚手架2024年最推荐的创建方式Vite是Vue作者尤雨溪团队维护的构建工具Vue 3官方已经推荐使用Vite创建新项目。它最大的特点就是快冷启动几百毫秒热更新几乎无感知。创建Vue 3 TypeScript项目的命令如下npm create vitelatest my-vue-app -- --template vue-ts逐段拆解一下这条命令的含义npm createnpm 7以上版本的固定语法是npm init的别名。vitelatest指定使用Vite脚手架的最新版本。my-vue-app项目文件夹名称可以按需修改。--后面的参数原样传给脚手架工具不加这个可能被npm吞掉参数。--template vue-ts指定使用Vue 3 TypeScript模板。如果要用纯JavaScript把vue-ts换成vue即可。命令执行后会生成一个标准的Vite项目结构。进入项目并安装依赖cd my-vue-app npm install npm run dev默认端口是5173浏览器打开http://localhost:5173就能看到项目页面。注意Vite 5要求Node 18如果你的Node版本不够创建过程可能不会报错但npm install时会遇到ERR_OSSL_EVP_UNSUPPORTED等错误。这类问题在第五章会详细讲排查方法。2.2 Vue CLI方式还在用Vue 2的话得了解Vue CLI是Vue 2时代的主流脚手架目前官方已经进入维护模式如果不是维护老项目我不建议新项目再用CLI。但如果你所在团队还在用Vue 2CLI还是必须掌握的。全局安装Vue CLInpm install -g vue/cli创建项目的命令vue create my-vue-app执行后会进入交互式选择界面有Default (Vue 3),Default (Vue 2),Manually select features三个选项。选第三个可以手动勾选Router、Vuex/Pinia、ESLint等。项目创建完成后进入目录运行npm run serve默认端口是8080。Vue CLI比Vite慢很多原因在于它使用Webpack做打包冷启动需要做完整的依赖分析。Vite利用了浏览器原生ES Module能力开发时不需要打包所以速度差异明显。2.3 手动创建最小项目理解原理的必经之路如果你想彻底搞懂Vue项目每一层是怎么搭起来的我力荐手动创建一次最小项目。这个过程虽然麻烦但做完之后你对Vite、Vue组件、入口文件的理解会完全不一样。手动创建一个最简项目只需要5个文件my-min-vue/ ├── index.html # 页面入口 ├── package.json # 项目信息与依赖 ├── vite.config.js # Vite配置文件 └── src/ ├── main.js # 应用入口 ├── App.vue # 根组件package.json内容{ name: my-min-vue, version: 1.0.0, scripts: { dev: vite, build: vite build, preview: vite preview }, dependencies: { vue: ^3.4.0 }, devDependencies: { vitejs/plugin-vue: ^5.0.0, vite: ^5.0.0 } }vite.config.js内容必须加上Vue插件import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], })index.html内容!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title最小Vue项目/title /head body div idapp/div script typemodule src/src/main.js/script /body /htmlsrc/main.jsimport { createApp } from vue import App from ./App.vue createApp(App).mount(#app)src/App.vuetemplate div classcontainer h1Hello Vue 3/h1 /div /template script setup /script style scoped .container { text-align: center; margin-top: 40px; } /style然后在项目根目录执行npm install npm run dev手动搭过一遍之后你再看Vite自动生成的脚手架会发现每多出来的文件都有它的作用不会再觉得项目结构是个黑盒。3. 快捷键与代码片段把VSCode操作流拉到最快3.1 终端与命令面板创建项目的快捷键底层逻辑VSCode里Ctrl Shift PWindows/Linux或Cmd Shift PmacOS打开命令面板另一个常用快捷键是Ctrl P用于快速打开文件。这两个键组合起来可以覆盖绝大多数操作场景。在创建Vue项目的场景下实际高频快捷键是Ctrl 打开/关闭集成终端 Ctrl Shift 新建一个终端实例 Ctrl Shift 5 将终端分屏多开终端特别有用我自己习惯的创建项目流程是在VSCode中打开准备存放项目的文件夹Ctrl K再按Ctrl O或者直接Ctrl O打开文件夹。按Ctrl 调出终端。输入npm create vitelatest my-app -- --template vue-ts。按Enter确认脚手架生成完后输入cd my-app。再输入npm install等待依赖安装。输入npm run dev启动开发服务器。同时按Ctrl Shift 5把终端分屏一个窗口跑开发服务另一个窗口敲Git命令或装其他依赖。这套操作熟练之后全程不到两分钟。没有快捷键的参与每一步都要用鼠标点体感完全不一样。3.2 文件与代码编辑Vue模板里最常用的几组快捷键项目创建好以后真正耗时的还是日常写代码。VSCode的这组快捷键我在写Vue组件时使用频率最高快捷键作用Ctrl D选中下一个相同的词连续按可多选批量修改变量名Alt Up/Down将当前行向上/向下移动Shift Alt Up/Down向上/向下复制当前行Ctrl /注释/取消注释Vue模板里也能用Ctrl Shift I格式化当前文件等同于Shift Alt FCtrl B切换侧边栏显示/隐藏增加编辑区域后写代码更沉浸F12跳转到定义Alt F12速览定义浮动小窗不离开当前文件以Ctrl D为例Vue模板里你想把一个类名从container改成wrapper正常做法是逐个手动删改。用Ctrl D选中第一个container之后每按一次就会选中下一个配合直接输入新内容所有选中处一起变化。这个快捷键在改props传递的参数名时简直救命。3.3 自定义代码片段一键生成Vue模板的骚操作如果问VSCode中创建Vue快捷键最贴近字面含义的答案那就是自定义代码片段。它允许你输入几个字母然后回车展开成一大段代码。操作路径Ctrl Shift P→ 输入snippets→ 选择配置用户代码片段→ 选择或新建一个全局片段文件比如vue.code-snippets或者在Vue项目里配置Config snippets。我分享一套我自己的Vue 3片段配置放在vite或vue后缀的代码片段文件里{ Vue3 Single File Component: { scope: vue, prefix: v3, body: [ template, div class\$1\, $2, /div, /template, , script setup, import { ref, computed } from vue, , const $1 ref($3), , /script, , style scoped lang\scss\, .$1 {, $4, }, /style ], description: 生成Vue3单文件组件基本模板 }, Vue3 Script Setup With Props: { scope: vue, prefix: vprops, body: [ script setup, const props defineProps({, $1: {, type: String,, default: , }, }), /script ], description: 生成带props的script setup } }配置完成后新建一个.vue文件输入v3回车几秒内就生成一个包含模板、脚本、样式的完整组件骨架。在新建组件文件前我建议配合VSCode的新建文件快捷键使用Ctrl N新建空白文件然后Ctrl S保存时输入完整文件名执行保存后右下角会提示选择语言模式如果Volar插件装好了.vue文件会自动识别。提示代码片段中的$1、$2是Tab跳转位置。回车展开代码片段后按Tab依次跳到$1,$2等位置方便填充内容。善用这个机制可以把填写参数的步骤也加速。3.4 配置自己的快捷键绑定如果你觉得某个操作没有默认快捷键可以自己绑定。方法是Ctrl Shift P→ 输入keyboard shortcuts→ 打开键盘快捷方式设置面板。这里可以看到所有命令的当前绑定双击某个命令即可修改快捷键。一个我经常用的自定义绑定例子把运行开发服务器关联到快捷键。虽然这不改变VSCode本身行为但可以配合任务功能实现一键启动。先配置.vscode/tasks.json{ version: 2.0.0, tasks: [ { label: dev, type: npm, script: dev, group: { kind: build, isDefault: true }, problemMatcher: [] } ] }然后在键盘快捷方式里搜索workbench.action.tasks.run绑定实际顺手的键比如Ctrl R。之后在VSCode里按Ctrl R就会弹任务列表选dev就能启动项目不用每次切到终端敲命令。4. 完整实操从零创建Vue 3项目并跑通4.1 一步一步创建全新的Vue 3 TypeScript项目这一节给你一套可以照抄的完整流程。假设你的Node.js环境已经按第一章的内容准备好了。打开VSCode按Ctrl 打开集成终端输入命令创建项目npm create vitelatest vue3-ts-app -- --template vue-ts执行后终端会输出Done. Now run:这样的提示依次执行cd vue3-ts-app npm install npm run dev看到VITE v5.4.x ready这样的输出说明开发服务器已经拉起。浏览器访问http://localhost:5173会看到Vue Vite的官方默认欢迎页。到这一步你的项目已经创建成功并跑起来了。4.2 安装路由、状态管理和样式库一个生产级项目通常需要路由和状态管理。Vue 3生态中对应的是Vue Router 4和Pinia。在终端中执行安装命令npm install vue-router4 pinia装完之后在src目录下创建router/index.ts文件import { createRouter, createWebHistory } from vue-router import HomeView from ../views/HomeView.vue const router createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: /, name: home, component: HomeView, }, ], }) export default router在src/main.ts中注册import { createApp } from vue import { createPinia } from pinia import App from ./App.vue import router from ./router const app createApp(App) app.use(createPinia()) app.use(router) app.mount(#app)如果你需要在项目里使用UI组件库这里选择很多。熟悉React的用Ant Design Vue偏移动端的可以用Vant桌面端后台管理我一般用Element Plusnpm install element-plus在main.ts里全局引入import ElementPlus from element-plus import element-plus/dist/index.css4.3 在VSCode中运行的注意事项npm run dev跑起来之后我强烈建议不要直接在终端里看日志而是在VSCode里给项目配置调试和问题面板的组合使用。首先安装Volar后.vue文件会被正确识别。你可以给项目添加一个.vscode/extensions.json文件{ recommendations: [ vue.volar, dbaeumer.vscode-eslint, esbenp.prettier-vscode ] }这样任何人在团队项目里用VSCode打开时都会收到插件推荐减少因为插件缺失导致的奇怪问题。其次问题面板Ctrl Shift M会显示ESLint和TypeScript的报错保存后格式化会让大部分纯风格问题自动消失。我通常的检查顺序是终端看npm run dev有没有报编译错误。Ctrl Shift M看编辑器收集到的问题。浏览器控制台看运行时错误。三层排查下来绝大多数问题都能定位。4.4 设置代码规范和保存自动修复很多人写Vue的时候被ESLint的红色波浪线烦得不行。解决方式是在项目根目录配置eslint.config.jsESLint 9之后是扁平配置import js from eslint/js import vue from eslint-plugin-vue import tseslint from typescript-eslint export default tseslint.config( { ignores: [dist] }, { files: [**/*.{ts,vue}], extends: [ js.configs.recommended, ...tseslint.configs.recommended, ...vue.configs[flat/recommended], ], rules: { vue/multi-word-component-names: off, }, } )配合VSCode的format on save和ESLint插件保存时会自动执行eslint --fix。我建议在.vscode/settings.json里加上{ editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, eslint.validate: [vue, javascript, typescript], eslint.codeActionsOnSave: { source.fixAll: explicit } }这样写完代码按Ctrl S一键搞定格式和规范修复不用在代码能跑但全是波浪线的状态里内耗。5. 常见问题与排查技巧实测5.1 提示command not found或依赖安装报错创建项目时最常遇到的报错有两类。第一类是npm create执行后提示command not found。这种情况通常出现在用户使用了旧版npm。解决办法是更新npmnpm install -g npmlatest第二类是npm install时报ERR! code 1之类的大段红色错误。看到这种问题我先教你一个快速判断方向的方法先在终端里执行node -v和npm -v如果npm比Node版本旧很多优先考虑Node和npm版本不匹配。解决办法是用nvm切换Node版本或者卸载重装LTS版Node。另一个高频原因是网络问题国内用户建议把npm镜像切换到淘宝源npm config set registry https://registry.npmmirror.com设置完再执行npm install速度通常有明显提升。如果卡在某个包装不上可以先执行npm cache clean --force再重试。5.2 端口被占用导致dev server起不来启动Vite时偶尔会看到Port 5173 is already in use的提示。Vite默认会自动切换到下一个可用端口也就是5174、5175……所以很多时候并不需要处理。但如果你希望固定端口可以在vite.config.ts里显式配置import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { port: 5173, strictPort: true, }, })strictPort: true表示如果端口被占用就直接报错而不是自动换端口。配合这个配置排查端口占用问题时可以先找到占用进程。Windows下在终端执行netstat -ano | findstr :5173然后根据PID结束进程taskkill /PID PID /FmacOS下lsof -i :5173 kill -9 PID5.3 快捷键冲突与插件遮挡实际开发中VSCode快捷键最常见的坑不是按了没反应而是按了却触发了别的功能。比如Ctrl D在某些输入法里与剪切板历史冲突Ctrl Space这个默认的触发建议快捷键会跟中英文输入法切换冲突导致代码补全失灵。解决办法是在键盘快捷方式面板Ctrl Shift P→keyboard shortcuts里搜索triggerSuggest修改默认绑定。我自己改成了Alt /用顺手之后再也没冲突过。类似的Ctrl Shift I在某些浏览器远程调试场景中会与开发者工具冲突如果遇到同样在这个面板里重新绑定。另外插件之间也可能抢快捷键。比如装了Vim插件后几乎所有按键都会被Vim接管写Vue的时候容易误触。遇到这种情况不需要卸载插件可以在插件设置里关闭Vim模式或者用Ctrl Shift P输入toggle vim mode临时切换。5.4 组件模板补全不生效Volar装好之后如果发现模板里输入el-之类的组件名没有补全提示按下Ctrl Space也没有反应可以按以下顺序排查确认Volar插件已激活看右下角状态栏是否有Vue图标。检查.vue文件关联右键文件 →选择语言模式→ 确认是Vue。检查TS配置文件tsconfig.json里include字段是否覆盖了src目录。重启VSCode的语言服务Ctrl Shift P→Vue: Restart Vue Server。最后一步经常被忽略但非常有效。Volar的Language Server偶尔会状态异常重启一下基本都能恢复。5.5 常见开发快捷键速查表把前面提到的快捷键整理成一张速查表建议收藏备用场景快捷键说明打开终端Ctrl 切换集成终端新建终端Ctrl Shift 新开一个终端实例命令面板Ctrl Shift P所有命令的入口快速打开文件Ctrl P输入文件名跳转保存并格式化Ctrl S配合format on save自动修复选中相同词Ctrl D批量改名、批量编辑整行移动Alt Up/Down移动当前行复制行Shift Alt Up/Down向上或向下复制跳转定义F12跳到组件/函数定义速览定义Alt F12小窗预览不离开当前文件问题面板Ctrl Shift M查看编译错误和ESLint问题切换侧边栏Ctrl B扩大编辑区域触发建议Ctrl Space手动代码补全我个人用了四年的VSCode Vue组合最想强调的一件事是工具链的每一个环节从Node版本、插件、代码片段到快捷键绑定都应该为减少切换服务。创建项目的最佳状态是打开VSCode后手不离开键盘敲完一串命令项目就起来了。这套流程熟练之后试错成本会低很多你会更有底气去尝试不同的脚手架、不同的项目结构。如果你照文章的流程操作时遇到和上面不一样的报错别急着卸载重装先看报错信息的最后几行通常那里已经告诉了你真正的原因。