VSCode 配置与插件

VSCode 是前端与全栈开发的主力编辑器，但默认配置并不一定贴合每个人的习惯。把 settings.json、插件、快捷键、调试这四件事调顺，编码效率能上一个台阶。下面是我们在真实项目里沉淀的配置笔记，所有内容均可直接复制使用。

一、常用配置 settings.json

打开命令面板（Cmd/Ctrl + Shift + P）输入 Open Settings (JSON)，把下面这份配置按需合并到自己的 settings.json：

{
  // 字体与行高
  "editor.fontFamily": "Fira Code, Menlo, monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 22,
  // 自动保存与格式化
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 制表符统一为 2 空格
  "editor.tabSize": 2,
  "[vue]": { "editor.defaultFormatter": "Vue.volar" },
  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  // 关闭烦人的小地图与提示
  "editor.minimap.enabled": false,
  "editor.hover.delay": 800,
  // 终端与搜路径
  "terminal.integrated.fontSize": 13,
  "search.exclude": { "**/node_modules": true, "**/dist": true }
}

提示：formatOnSave 依赖格式化插件，安装 Prettier 后效果最佳，避免保存时频繁弹窗。

二、推荐插件

插件不是越多越好，下面这组是我们在多个前端项目里反复验证的高频组合：

• Prettier：代码格式化事实标准，配合 formatOnSave 自动整理。
• ESLint：实时校验语法与规范，与 Prettier 配合形成「保存即规整」。
• GitLens：在行尾显示最近一次提交信息，定位责任人与变更历史。
• Volar：Vue3 官方推荐插件，提供模板类型推导与高亮。
• Path Intellisense：路径自动补全，告别手写相对路径出错。
• Error Lens：把报错与警告直接渲染到行尾，问题一眼可见。

三、常用快捷键

掌握下面这组快捷键，能减少 70% 的鼠标点击，macOS 把 Ctrl 换成 Cmd：

Ctrl + P          快速打开文件
Ctrl + Shift + P  命令面板
Ctrl + Shift + F  全局搜索
Ctrl + D          选中下一个相同词
Ctrl + G          跳转到指定行
Alt + ↑/↓         整行上下移动
Shift + Alt + ↓   向下复制一行
Ctrl + /          切换行注释

四、调试技巧

VSCode 内置 Debugger 强大但常被忽略。在项目根目录创建 .vscode/launch.json，配置一键调试：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "调试前端",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "调试 Node 脚本",
      "program": "${file}"
    }
  ]
}

在代码行号左侧点击设置断点，按 F5 启动调试，可在「运行与调试」面板查看变量、调用栈与表达式。前端配合 sourcemap，能直接在源码里断点调试打包后的产物。

小结

VSCode 的强大来自「配置 + 插件 + 快捷键 + 调试」四件套的协同。建议先从 settings.json 与 Prettier/ESLint 入手，把保存即规整跑通，再逐步加 GitLens、Error Lens 等效率插件，最后用 launch.json 把调试链路打通。