夜雨聆风
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？
-
打开 Postman -
手动填 URL、Header、Body -
点 Send -
复制 token 到下一个请求 -
团队问：“这个接口怎么调？” → 你发截图 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 直接在代码行末显示错误：
1funcGetUser(id int)(*User,error){...}
2// ❌ undefined: GetUser → 立刻看到！
✅ 配置建议（settings.json）：
1{
2"errorLens.enabledDiagnosticLevels":["error","warning"],
3"errorLens.delay":300,
4"errorLens.fontSize":"11px"
5}
最佳场景：
-
重构核心模块 -
升级依赖导致类型变更 -
TypeScript 严格模式迁移
它不是“美化工具”，而是重构安全网。
3️⃣ Code Spell Checker：别让 typo 毁掉专业形象
🎯 Best Use Case：客户可见内容的零拼写错误
你以为拼写检查只对注释有用？
错！它能帮你发现：
"sucess"
→ 应该是 "success"（API 返回字段）"recieve"
→ "receive"（日志关键词）"enviroment"
→ "environment"（配置文件）
✅ 配置你的技术词典：
1{
2"cSpell.words":[
3"kubernetes","postgresql","middleware","idempotent"
4],
5"cSpell.ignorePaths":["node_modules/**","dist/**"]
6}
真实案例：
某公司前端因 "authentification" 拼错，导致 OAuth 回调失败，排查 3 小时。
拼写错误不是小事，它是专业度的细节体现。
4️⃣ Thunder Client：Postman 的轻量级替代
🎯 Best Use Case：自动化登录 + 请求链
REST Client 适合静态测试，但如果你需要：
-
动态生成时间戳 -
自动提取 token 并用于后续请求 -
生成随机测试用户
那就用 Thunder Client。
✅ 最佳实践：预请求脚本
1// 自动生成测试邮箱
2const email =`test_${Date.now()}@example.com`;
3tc.setVar("testEmail", email);
4
5// 发送注册
6// → 自动提取 userId
7// → 用于后续订单创建
优势：
-
内置变量管理 -
支持测试集合导出 -
与 VS Code 深度集成
它不是“另一个 Postman”，而是开发者专属的 API 自动化引擎。
5️⃣ Bookmarks：在 10 万行代码中自由穿梭
🎯 Best Use Case：跨文件调试复杂业务流
想象你在调试一个支付流程：
handlers/payment.goservices/order.gorepos/transaction.goevents/webhook.go
你想快速跳转？
Bookmarks 让你给关键函数打书签！
快捷键 Ctrl+Shift+B 切换书签，Ctrl+Alt+K 查看所有书签列表。
✅ 高级技巧：
-
书签保存到项目（ .vscode/bookmarks.json） -
不同颜色标记不同类型逻辑（如红色=错误处理，绿色=主流程）
就像给代码地图加了“GPS 路标”。
🧠 资深开发者的秘密：工具链要“系统化”
这些扩展不是孤立的，它们组成一个专业工作流系统：
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
🚀 快速安装命令
1code --install-extension humao.rest-client
2code --install-extension usernamehw.errorlens
3code --install-extension streetsidesoftware.code-spell-checker
4code --install-extension rangav.vscode-thunder-client
5code --install-extension alefragnani.bookmarks
🔚 结语：工具决定上限，习惯决定下限
这些扩展不会让你“瞬间变大神”，但它们能：
-
减少低级错误 -
提升协作效率 -
保持心流状态
真正的生产力，不是写得更快，而是想得更清楚。
