提升Vue项目开发效率的VSCode快捷键配置-VSCode-PHP中文网

vue.json 配置 script setup 组件模板需设 prefix 为 vue3/v3，body 中属性用双引号，含 ref/reactive 导入及 $0 占位符；ctrl+d 用于可控多选，ctrl+shift+l 为全量替换；原型属性跳转需在 src/types/vue.d.ts 中 declare module 'vue/types/vue' 并重启 vscode；格式化失效优先排查 prettier 与 eslint 冲突，volar 启用后需设 defaultformatter 为 vue.volar。

提升vue项目开发效率的vscode快捷键配置

配置 vue.json 代码片段生成 `script setup` 组件

直接用 vue.json 配置标准 Vue3 组件结构，比每次手动敲 <script setup></script>、<template></template> 和 <style scoped></style> 快得多。关键不是“有没有”，而是模板里是否包含真实开发中马上要用的导入和占位符。

prefix 建议设为 vue3 或 v3，避免和 Vue2 片段冲突
body 中必须用双引号包裹 HTML 标签属性（如 lang="scss"），否则 VSCode 解析失败报红
在 <script setup></script> 区域加入 import { ref, reactive } from 'vue'，省去后续补 import 的动作
模板末尾留一个 $0，光标会自动停在 <template></template> 内部，而不是卡在文件末尾

`Ctrl + d` 多光标选中与 `Ctrl + shift + l` 全量替换的区别

这两个快捷键看着相似，但适用场景完全不同：前者是「可控选择」，后者是「无差别覆盖」。在 Vue 模板里改 class 名或重命名 ref 变量时，选错一个就可能破坏响应式逻辑。

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

Ctrl + d 每按一次只加选下一个匹配项，适合检查每个上下文是否真该被改（比如 userList 在 data、methods、template 三处出现，但只想改前两处）
Ctrl + shift + l 会一次性选中当前文件所有匹配文本，若组件用了 v-for="item in list"，又恰好 list 是个通用变量名，极易误伤
改完后务必检查 <script setup></script> 里 defineProps 或 defineEmits 的参数名是否同步更新，VSCode 不会自动帮你做这个

让 `$router`、`$message` 等原型属性支持 Ctrl+点击跳转

不配类型声明，VSCode 就当它们是任意值，Ctrl + 鼠标左键 点击只会提示 “No definition found”。这不是插件问题，是类型系统缺失导致的。

必须在项目 src/types/vue.d.ts 中用 declare module 'vue/types/vue' 扩展 Vue 接口，不能写在 .ts 文件里
jsconfig.json 的 include 字段要包含 src/types/**/*，否则声明文件不被识别
改完声明文件后必须重启 VSCode，热重载不生效；如果用了 Volar 插件，还需确认它没被禁用（Volar 会接管 Vue 类型检查，覆盖原有声明）

格式化失效时优先查 `prettier` 和 `eslint` 冲突

按下 Shift + Alt + F 没反应，或者格式化后代码缩进错乱、引号混用，大概率不是快捷键没绑定，而是格式化工具链打架。

检查项目根目录是否有 .prettierrc，且内容不含 "semi": false 这类与 ESLint 规则硬冲突的配置
确保已安装 @vue/eslint-config-prettier，并在 .eslintrc.js 的 extends 中把它放在最后，用来兜底禁用 ESLint 的风格类规则
Volar 插件启用后，VSCode 默认格式化工具会从 Prettier 切换为 Volar 自带的格式器，此时 settings.json 中需明确指定："editor.defaultFormatter": "Vue.volar"