VS Code 党必看：老司机都在用的插件清单来了！

闲来莳蕙芷 朝露湿青裳

“我用了三年 Prettier，直到昨天才知道 REST Client 能让我少开 10 个 Postman 标签页。” —— 某位刚升级工作流的前端工程师

新手装 VS Code，会装：

• Prettier
• Live Server
• Chinese (Simplified) Language Pack

但资深开发者装的是：

• 能减少上下文切换的工具
• 能让代码自解释的插件
• 能把文档变成可执行测试的系统

今天，我们就来揭秘 5 个真正改变工作流的 VS Code 扩展，并告诉你每个的 最佳使用场景——不是“能用”，而是“非它不可”。

1️⃣ REST Client：API 测试不再离开编辑器

下载量：300 万+ 作者：Huachao Mao

🎯 Best Use Case：版本可控的 API 测试套件

你是不是这样测 API？

1. 打开 Postman
2. 手动填 URL、Header、Body
3. 点 Send
4. 复制 token 到下一个请求
5. 团队问：“这个接口怎么调？” → 你发截图 or 口述

问题：

• 测试不随代码走
• 新人上手慢
• 接口变更后，Postman 集合没人更新

✅ 正确姿势：用 .http 文件写可执行文档

### @baseUrl = https://api.dev.myapp.com

### 登录并获取 token
# @name login
POST {{baseUrl}}/auth/login
Content-Type: application/json

{
  "email": "{{$processEnv EMAIL}}",
  "password": "{{$processEnv PASSWORD}}"
}

### 获取用户资料（自动用上一步 token）
GET {{baseUrl}}/user/profile
Authorization: Bearer {{login.response.body.access_token}}

💡 保存为 api.test.http，和代码一起提交 Git！

优势：

• ✅ 接口文档 = 可运行测试
• ✅ 环境变量支持（dev/staging/prod）
• ✅ 零切换：写完代码，直接在编辑器里测

就像给 API 装了个“说明书+遥控器”二合一。

2️⃣ Error Lens：错误不再藏在红波浪线下

🎯 Best Use Case：大规模重构时的即时反馈

当你重命名一个函数，影响 20 个文件，你会：

• 逐个打开文件找红波浪线？
• 还是靠 CI 告诉你哪里错了？

Error Lens 直接在代码行末显示错误：

funcGetUser(id int)(*User,error){...}

// ❌ undefined: GetUser → 立刻看到！

✅ 配置建议（settings.json）：

{

"errorLens.enabledDiagnosticLevels":["error","warning"],

"errorLens.delay":300,

"errorLens.fontSize":"11px"

}

最佳场景：

• 重构核心模块
• 升级依赖导致类型变更
• TypeScript 严格模式迁移

它不是“美化工具”，而是重构安全网。

3️⃣ Code Spell Checker：别让 typo 毁掉专业形象

🎯 Best Use Case：客户可见内容的零拼写错误

你以为拼写检查只对注释有用？ 错！它能帮你发现：

• "sucess" → 应该是 "success"（API 返回字段）
• "recieve" → "receive"（日志关键词）
• "enviroment" → "environment"（配置文件）

✅ 配置你的技术词典：

{

"cSpell.words":[

"kubernetes","postgresql","middleware","idempotent"

],

"cSpell.ignorePaths":["node_modules/**","dist/**"]

}

真实案例： 某公司前端因 "authentification" 拼错，导致 OAuth 回调失败，排查 3 小时。

拼写错误不是小事，它是专业度的细节体现。

4️⃣ Thunder Client：Postman 的轻量级替代

🎯 Best Use Case：自动化登录 + 请求链

REST Client 适合静态测试，但如果你需要：

• 动态生成时间戳
• 自动提取 token 并用于后续请求
• 生成随机测试用户

那就用 Thunder Client。

✅ 最佳实践：预请求脚本

// 自动生成测试邮箱

const email =`test_${Date.now()}@example.com`;

tc.setVar("testEmail", email);



// 发送注册

// → 自动提取 userId

// → 用于后续订单创建

优势：

• 内置变量管理
• 支持测试集合导出
• 与 VS Code 深度集成

它不是“另一个 Postman”，而是开发者专属的 API 自动化引擎。

5️⃣ Bookmarks：在 10 万行代码中自由穿梭

🎯 Best Use Case：跨文件调试复杂业务流

想象你在调试一个支付流程：

• handlers/payment.go
• services/order.go
• repos/transaction.go
• events/webhook.go

你想快速跳转？ Bookmarks 让你给关键函数打书签！

快捷键 Ctrl+Shift+B 切换书签，Ctrl+Alt+K 查看所有书签列表。

✅ 高级技巧：

• 书签保存到项目（.vscode/bookmarks.json）
• 不同颜色标记不同类型逻辑（如红色=错误处理，绿色=主流程）

就像给代码地图加了“GPS 路标”。

🧠 资深开发者的秘密：工具链要“系统化”

这些扩展不是孤立的，它们组成一个专业工作流系统：

🚀 快速安装命令

code --install-extension humao.rest-client

code --install-extension usernamehw.errorlens

code --install-extension streetsidesoftware.code-spell-checker

code --install-extension rangav.vscode-thunder-client

code --install-extension alefragnani.bookmarks

🔚 结语：工具决定上限，习惯决定下限

这些扩展不会让你“瞬间变大神”，但它们能：

• 减少低级错误
• 提升协作效率
• 保持心流状态

真正的生产力，不是写得更快，而是想得更清楚。