一个好用的VSCode配置重在贴合开发节奏、减少重复操作、提升代码质量与协作效率，核心是精选插件（ESLint、Prettier、Volar/Vetur、Auto Import、Path Intellisense）与关键设置（保存即修复、Tab宽度为2、隐藏node_modules等），辅以别名配置和快捷操作习惯。
一个好用的 VSCode 配置，不在于插件堆得多，而在于贴合日常开发节奏、减少重复操作、让代码更干净、协作更顺畅。下面这些配置和习惯，是我作为前端工程师长期打磨出来的「最小可行高效组合」，不炫技，重实用。
核心插件：精挑细选，各司其职
以下插件覆盖了语法支持、格式化、提示增强、调试和协作等关键环节，装完重启一次即可生效：
-
ESLint：实时校验 JS/TS 代码规范，配合项目中的 .eslintrc 配置自动修复（推荐开启
"eslint.validate": ["javascript", "typescript", "vue"]） -
Prettier：统一格式化风格，和 ESLint 协作时建议禁用 Prettier 的 auto-format on save，改用 ESLint 的
fix on save，避免冲突 - Volar（Vue 3）或 Vetur（Vue 2）：Vue 开发必备，提供语法高亮、组件跳转、props 提示等，Volar 还原生支持 `
- Auto Import：写到一半按 Ctrl+Space 就能自动补全并插入 import，省去手动找路径的步骤
- Path Intellisense：路径补全神器，敲 `@/` 或 `../` 后直接看到项目内真实路径，支持别名（需配 `jsconfig.json` 或 `tsconfig.json` 中的 `baseUrl` 和 `paths`）
关键设置：几行配置，体验大不同
在 settings.json 中加入这些高频项，比点菜单更快也更稳定：
-
保存即修复：
"editor.codeActionsOnSave": { "source.fixAll.eslint": true } -
关闭烦人提示：
"editor.suggest.showWords": false（避免补全出现大量无关变量名） -
Tab 宽度统一为 2：
"editor.tabSize": 2，搭配"editor.insertSpaces": true，前端主流选择 -
隐藏无用文件：
"files.exclude": { "**/node_modules": true, "**/.git": true, "**/dist": true } -
快速打开同名样式文件：装插件
Open in Editor或用快捷键Ctrl+Shift+P → Open SCSS/LESS/CSS for current file（可自定义命令绑定）
推荐的 jsconfig.json / tsconfig.json 配置
别名支持不是玄学，是提升导入效率的基础。在项目根目录加一个 jsconfig.json（Vue/JS 项目）或 tsconfig.json（TS 项目），内容类似：
立即学习“前端免费学习笔记（深入）”；
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@components/*": ["src/components/*"],
"@utils/*": ["src/utils/*"]
}
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
配完记得重启 VSCode，Path Intellisense 和跳转就都生效了。
小技巧：让日常操作再快 1 秒
这些不是配置，而是我每天都在用的手势级习惯：
-
快速复制当前文件绝对路径：右键文件页签 → Copy Path，粘贴出来就是工程内相对路径；按住
Alt再点右键 → Copy Relative Path -
多光标精准编辑：按住
Ctrl+ 点击多个位置，或Ctrl+D逐个选中相同词，Ctrl+U撤回上一次多选 -
快速切换 .vue 文件三块区域：在 `` 区域按
Ctrl+Shift+P → Vue: Go to Script（Volar 提供），反之亦然 -
临时禁用 ESLint：在某行末尾加
// eslint-disable-next-line，或在代码块上下加// eslint-disable和// eslint-enable
基本上就这些。没有必须装的“神级插件”，也没有一劳永逸的万能配置。关键是根据你当前的框架、团队规范和手速习惯，做减法、调细节、常更新。VSCode 的强大，在于它愿意陪你一起进化。
