VSCode 通过 REST Client 扩展实现轻量 API 测试:安装后新建 .http 文件,用 GET/POST 等语法发请求,支持变量、环境切换和多请求分隔;需注意语法细节(如冒号后空格、@baseUrl 顶格)及常见错误排查。

VSCode 本身不内置 API 测试功能,但通过 REST Client 扩展可以零配置、免启服务、直接在编辑器里发 HTTP 请求并查看响应——这是目前最轻量、最贴近开发流的调试方式。
安装 REST Client 扩展并验证是否生效
在 VSCode 扩展市场搜索 REST Client(作者是 Huachao Mao),安装后重启(或重载窗口)。生效标志是:新建一个文件,保存为 test.http 或 api.rest,输入以下内容后,光标停在请求行末尾,按 Ctrl+Enter(Windows/Linux)或 Cmd+Enter(macOS)能发出请求:
GET https://httpbin.org/get User-Agent: vscode-restclient
若弹出右侧响应窗且显示 JSON,则扩展已就绪。注意:.http 是默认识别后缀,.rest 需手动在设置中启用(rest-client.defaultLanguage 设为 rest)。
写好一个可复用的 .http 文件结构
单个 .http 文件可包含多个请求,用空行分隔。支持变量、环境、注释和多段响应处理。常见易错点:
-
@baseUrl = https://api.example.com必须顶格写,且不能有空格;后续用{{baseUrl}}/users引用 - 请求头必须写在 URL 下方,且冒号后要加一个空格:
Content-Type: application/json(Content-Type:application/json会失败) - 请求体如果是 JSON,需在头中声明
Content-Type: application/json,否则后端可能解析为空 - 用
###分隔不同请求(非必需但强烈推荐),避免光标跳错位置
示例:
### 获取用户列表
GET {{baseUrl}}/users
Authorization: Bearer {{token}}
创建用户
POST {{baseUrl}}/users
Content-Type: application/json
{
"name": "Alice",
"email": "alice@example.com"
}
管理 Token 和环境变量(避免硬编码)
把敏感值(如 token)写死在 .http 文件里极不安全,也难切换环境。正确做法是使用 rest-client.environmentVariables 设置:
在 VSCode settings.json 中添加:
"rest-client.environmentVariables": {
"local": {
"baseUrl": "http://localhost:3000",
"token": "dev-token-123"
},
"prod": {
"baseUrl": "https://api.example.com",
"token": "prod-jwt-token"
}
}然后在 .http 文件顶部加一行:@env = local(或 prod),所有 {{xxx}} 变量会自动从对应环境取值。切换环境只需改这一行,无需动任何请求逻辑。
调试失败请求:看哪里卡住了?
常见失败现象及排查方向:
- 返回
401 Unauthorized:检查Authorization头拼写、token 是否过期、环境变量是否加载成功(光标悬停在{{token}}上应显示实际值) - 返回
400 Bad Request:确认Content-Type与请求体格式一致;JSON 中有语法错误(如尾逗号、单引号)会导致解析失败 - 请求无响应 / 超时:检查
@baseUrl是否带协议(http://不可省略);本地服务是否真的在运行;防火墙或代理是否拦截 - 响应乱码或截断:右键响应窗 →
Change Encoding→ 选UTF-8;或在设置中开启rest-client.previewResponseInUntitledDocument查看原始流
REST Client 不支持断点或 step-by-step,但它能快速验证「网络层是否通」「参数是否被正确接收」——这正是 API 调试中最常卡住的两环。
真正复杂交互(比如需要从响应中提取 token 再用于下个请求)得靠脚本或 Postman;但对日常开发中的接口联调、Mock 验证、文档即测试来说,.http 文件写起来比写 curl 命令还快,而且天然版本可控、可 Review。










