VS Code 效率指南：10个提升开发效率的插件与技巧

每天在 VS Code 里写代码，但你真的用对它了吗？

作为一个每天和代码打交道的开发者，我发现很多同事其实只用了 VS Code 20% 的功能。今天分享 10 个让我效率翻倍的插件和技巧，每一个都是经过实战检验的。

必备插件

1. Error Lens

把错误信息直接显示在代码行尾，不用再悬停鼠标看报错了。

javascript

// 没有 Error Lens：你得把鼠标移到这里 ⬆️ 才能看到错误信息
const x: string = 123; // ❌ 类型不兼容

// 有 Error Lens：错误直接显示在行尾

安装后在每一行代码右侧直接显示诊断信息，包括错误、警告、提示。对于 TypeScript 项目尤其好用，一眼就能看到所有类型问题。

2. GitLens

VS Code 最强的 Git 增强工具，没有之一。

每一行代码旁边显示最后修改者和时间

内置的 File History 和 Line History

可视化的 Git 图谱

自动生成 Release Notes

bash

# 常用快捷键
Ctrl+Shift+G   # 打开 Git 面板
Alt+B          # 在 Blame 和普通视图间切换

3. Prettier + ESLint

这两兄弟配合使用，让你的代码自动变整洁。

配置方式：

json

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

保存文件时自动格式化并修复 ESLint 问题，再也不用手动调整缩进和空格了。

4. GitHub Copilot

AI 编程助手，这可能是近年来对开发者效率提升最大的工具。

javascript

// 只要写注释或函数名，Copilot 就会自动补全
// 比如输入：
function calculateFibonacci(n) {
  // Copilot 会自动补全：
  if (n <= 1) return n;
  return calculateFibonacci(n - 1) + calculateFibonacci(n - 2);
}

不仅仅是补全，Copilot 还能：

理解整个文件的上下文

生成单元测试

解释复杂的代码片段

重构老代码

5. Thunder Client

轻量级 API 测试工具，不用打开 Postman 了。

直接在 VS Code 里测试 REST API，支持：

GET/POST/PUT/DELETE 请求

环境变量和预置脚本

GraphQL 查询

请求历史记录

效率技巧

6. 多光标编辑

这个功能用好了效率翻倍。

javascript

// 场景：把下面的变量声明从 let 改为 const
let name = '张三';
let age = 25;
let city = '北京';

// 按 Alt+Click 在每个 let 前加光标
// 或者选中 "let" 按 Ctrl+D 多次
// 然后直接输入 "const"

常用快捷键：

Alt+Click：添加光标

Ctrl+D：选中下一个相同词

Ctrl+Shift+L：选中所有相同词

7. Snippet 自定义

把常用的代码片段做成快捷指令。

json

// 文件：~/.vscode/typescript.code-snippets
{
  "React Function Component": {
    "scope": "typescript,typescriptreact",
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "interface ${1:Component}Props {",
      "  $2",
      "}",
      "",
      "export const ${1:Component}: React.FC<${1:Component}Props> = ({ $3 }) => {",
      "  return (",
      "    <div>$4</div>",
      "  );",
      "};",
      ""
    ],
    "description": "React Function Component with TypeScript"
  }
}

输入 rfc 按 Tab 就能生成完整的 React 组件模板。

8. 命令面板

这是 VS Code 的万能入口。

按 Ctrl+Shift+P 打开命令面板，然后输入任何操作：

text

> 删除行          # 删除当前行
> 重命名符号      # 重命名所有引用
> 重新打开已关闭  # 恢复刚关闭的文件
> 切换集成终端    # 打开/关闭终端

记住一个原则：任何操作都可以通过命令面板完成，不需要记大量快捷键。

9. 工作区配置

不同项目使用不同的设置，避免全局配置冲突。

json

// .vscode/settings.json（项目级别）
{
  "editor.tabSize": 2,
  "typescript.preferences.quoteStyle": "single",
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/dist": true
  }
}

json

// .vscode/extensions.json（推荐团队安装的插件）
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "github.copilot",
    "eamodio.gitlens"
  ]
}

把 .vscode/ 目录提交到 Git 仓库，团队成员自动使用相同的设置。

10. 调试器的高级用法

大多数人的断点调试只用了皮毛。

javascript

// 条件断点：只在满足条件时暂停
// 在断点红点右键 -> 条件断点
for (let i = 0; i < 1000; i++) {
  processItem(items[i]); // 只在 i === 42 时暂停
}

// 日志断点：不中断程序，只打印日志
// 在断点红点右键 -> 日志断点
// 输入：${i}: ${items[i].name}

调试面板还支持：

监视表达式（Watch）

调用堆栈导航

运行时修改变量值

断点导入/导出

总结

VS Code 的强大在于它的可扩展性。与其抱怨写代码慢，不如花点时间配置好你的编辑器：

✅ 装上 Error Lens，错误一目了然

✅ GitLens 让你看清每一行代码的历史

✅ Prettier + ESLint 自动保持代码整洁

✅ 多光标编辑和 Snippet 告别重复劳动

✅ 工作区配置让团队风格统一

工具顺手了，写代码的效率自然就上来了。

推荐指数：⭐⭐⭐⭐⭐

官方插件市场：https://marketplace.visualstudio.com/

VS Code 效率指南：10个提升开发效率的插件与技巧

VS Code 效率指南：10个提升开发效率的插件与技巧

必备插件

1. Error Lens

2. GitLens

3. Prettier + ESLint

4. GitHub Copilot

5. Thunder Client

效率技巧

6. 多光标编辑

7. Snippet 自定义

8. 命令面板

9. 工作区配置

10. 调试器的高级用法

推荐配置

总结

💬 评论区 (0)