VS Code 高效配置实战：插件、快捷键与工作区设置

「插件装得越多，编辑器反而越卡、越乱」，这是装了二三十个插件后的常见感受。多数问题不在插件本身，而在缺少统一的配置口径：格式化器互相打架、换行符来回跳。

一、settings.json 核心配置

VS Code 的行为几乎都能落到 settings.json，直接编辑比图形界面点选更易备份复用。它分用户级与工作区级两层，Windows 下用户级路径为 %APPDATA%\Code\User\settings.json。

1. 保存即格式化与自动保存

把 files.autoSave 设为 onFocusChange，切走窗口就落盘，避免调试时跑的还是旧代码。

{
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }
}

editor.formatOnSave 管排版，codeActionsOnSave 让 ESLint 自动修复未使用变量、引号风格，缺一个就会出现「格式对了报错还在」。

2. 编码与换行符统一

跨平台协作最常见的是换行符：Windows 用 CRLF，Linux 与 macOS 用 LF，混用会让 Git 标记整个文件已修改。

{
  "files.eol": "\n",
  "files.encoding": "utf8",
  "files.insertFinalNewline": true
}

files.eol 设为 \n 后，新建文件一律按 LF 写入，差异对比更干净。

二、插件协同与工作区共享

插件遵循「一个职责一个插件」，让格式化、校验、语法支持各司其职。

1. 格式化与校验插件

前端三件套：Prettier 管排版，ESLint 管质量，EditorConfig 管基础约定。别让两者都改排版，否则保存时来回回退。要在语言级指定格式化器，把 javascript 的 editor.defaultFormatter 指向 esbenp.prettier-vscode，eslint.validate 覆盖 vue、typescript。

2. 工作区配置共享

用户级配置只对你自己生效，团队统一口径要靠项目里的 .vscode/settings.json，它随代码提交，新同事克隆后打开即套用：

{
  "files.watcherExclude": { "**/node_modules/**": true },
  "eslint.workingDirectories": [{ "mode": "auto" }]
}

把 node_modules 加进 files.watcherExclude 能降低大项目文件监听占用。

三、调试与快捷键提效

1. launch.json 断点调试

相比到处写 console.log，配置一次 launch.json 就能打断点、看调用栈。在 .vscode/launch.json 声明一个 node 配置，request 用 launch，program 取内置变量 ${file}，按 F5 即停。

2. 常用快捷键

省时间的快捷键不多：Ctrl+P 按文件名跳转，输入 @ 跳到符号；Ctrl+D 选中相同词做多光标改名；Alt+↑/↓ 移动整行，Ctrl+/ 切换注释。macOS 上把 Ctrl 换成 Cmd。

关键配置提示

• 个人习惯放用户级配置，团队约定放 .vscode/settings.json 并提交仓库。
• Prettier 管格式、ESLint 管质量，避免两个插件同时改排版；files.eol 统一为 LF，消除整个文件被标记为修改。