5 个提升开发效率的 VS Code 插件

工欲善其事，必先利其器。这 5 个插件让我的编码效率提升了至少 50%。

作为一名全栈开发者，我每天都在 VS Code 中度过大量时间。经过几年的折腾和筛选，我总结了 5 个必装插件，它们能显著提升你的开发效率。

1️⃣ GitLens — Git 超级助手

安装量： 28M+ | 评分： ⭐⭐⭐⭐⭐

核心功能

• 行级 Git 注解 — 鼠标悬停即可看到每行代码的作者、提交时间、提交信息
• 代码历史追溯 — 快速查看文件的完整修改历史
• 对比功能 — 轻松比较不同分支、提交的差异
• 可视化提交图 — 直观展示项目提交历史

为什么必备？

接手老项目时，GitLens 能帮你快速理解代码演进过程。看到某行代码时，你不需要 INLINE_CODE_0，直接悬停就能看到"谁在什么时候为什么改了这行"。

配置建议：

{
  "gitlens.currentLine.enabled": true,
  "gitlens.hovers.currentLine.over": "line"
}

2️⃣ Prettier — 代码格式自动化

安装量： 35M+ | 评分： ⭐⭐⭐⭐⭐

核心价值

彻底告别格式争论 — 保存时自动格式化，团队代码风格统一。

支持的格式

• JavaScript / TypeScript
• HTML / CSS / SCSS
• JSON / YAML / Markdown
• Vue / React / Angular

快速配置

在项目根目录创建 INLINE_CODE_1：

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

启用保存时格式化：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

3️⃣ Thunder Client — 轻量级 API 测试

安装量： 2M+ | 评分： ⭐⭐⭐⭐⭐

为什么不用 Postman？

Postman 很好，但太重了。Thunder Client 直接集成在 VS Code 中，无需切换窗口。

核心功能

• ✅ REST API 测试（GET/POST/PUT/DELETE）
• ✅ 环境变量管理
• ✅ 认证配置（Bearer Token、Basic Auth）
• ✅ 响应格式化查看
• ✅ 测试用例保存与组织

使用场景

开发后端接口时，我直接在 VS Code 里测试，不需要：

1. 打开 Postman
2. 导入集合
3. 配置环境变量
4. 切换窗口

效率提升：至少节省 30% 的接口调试时间。

4️⃣ Error Lens — 错误实时高亮

安装量： 5M+ | 评分： ⭐⭐⭐⭐⭐

痛点解决

传统方式：代码下方红色波浪线 → 鼠标悬停 → 查看错误信息

Error Lens：直接把错误信息显示在代码行末尾，一目了然。

效果对比

之前：

const name: string = 123  // ← 红色波浪线，不知道啥错

之后：

const name: string = 123  // Type 'number' is not assignable to type 'string'

配置推荐

{
  "errorLens.enabled": true,
  "errorLens.addAnnotationTextPrefixes": true,
  "errorLens.annotationTextLength": 200
}

5️⃣ Path Intellisense — 路径自动补全

安装量： 3M+ | 评分： ⭐⭐⭐⭐⭐

解决的问题

写 import 路径时，是不是经常：

• 记不住文件名，一个个试？
• 手写路径，拼写错误？
• 相对路径 INLINE_CODE_2 数不清楚？

功能特点

• ✅ 文件路径自动补全
• ✅ 支持别名配置（INLINE_CODE_3、INLINE_CODE_4）
• ✅ 自动添加文件扩展名
• ✅ 支持 monorepo 项目

配置示例

{
  "path-intellisense.mappings": {
    "@": "${workspaceFolder}/src",
    "~": "${workspaceFolder}"
  }
}

配置后，输入 INLINE_CODE_5 自动补全 INLINE_CODE_6 目录下的文件。

🎁 bonus：我的完整配置

我把这些插件的配置整理成了一个完整的 INLINE_CODE_7，可以直接复制使用：

{
  // 编辑器基础配置
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "editor.minimap.enabled": true,
  "editor.tabSize": 2,
  
  // 保存时自动格式化
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
  },
  
  // GitLens 配置
  "gitlens.currentLine.enabled": true,
  "gitlens.hovers.currentLine.over": "line",
  
  // Error Lens 配置
  "errorLens.enabled": true,
  "errorLens.addAnnotationTextPrefixes": true,
  
  // Path Intellisense 配置
  "path-intellisense.mappings": {
    "@": "${workspaceFolder}/src"
  }
}

📊 效率提升对比

综合效率提升：约 50%

🔗 插件安装链接

1. GitLens
2. Prettier
3. Thunder Client
4. Error Lens
5. Path Intellisense

💬 互动话题

你还有哪些私藏的 VS Code 插件？

欢迎在评论区分享，我会持续更新这个系列！

如果这篇文章对你有帮助，欢迎分享给你的同事和朋友。折腾不止，分享不息！

最后更新： 2026 年 3 月 15 日
作者： sunwenyu
标签： #VSCode #开发工具 #效率提升