怎样使用VSCode进行REST API测试？_无需离开编辑器的调试【教程】

vscode需安装REST Client扩展才能发送http请求；保存为.http文件、设语言模式为HTTP后，可用快捷键或按钮发送GET/POST请求，并通过环境变量管理多环境API地址。

VSCode 本身不内置 REST 客户端，但通过 REST Client 扩展可直接在编辑器内发送 HTTP 请求、查看响应、管理环境变量——无需切换 postman 或 curl 命令行。

安装并启用 REST Client 扩展

在 VSCode 扩展市场搜索 REST Client（作者：Huachao Mao），点击安装并重载窗口。安装后，VSCode 会自动识别以 .http 或 .rest 为后缀的文件，并提供语法高亮与发送按钮。

常见错误现象：Send Request 按钮不出现，或点击无响应——通常因文件未保存（必须先保存为 .http）、或当前语言模式未设为 HTTP（右下角点击语言模式，手动选 HTTP）。

编写并运行一个基础 GET 请求

新建文件，保存为 test.http，输入以下内容：

GET https://jsonplaceholder.typicode.com/posts/1 User-Agent: VSCode-REST-Client

将光标置于该请求块内（任意位置），按 Ctrl+Alt+R（windows/linux）或 Cmd+Alt+R（macOS），或点击右上角 Send Request 链接。响应会直接在新标签页中显示，含状态码、头信息与响应体。

注意点：

• GET 后必须跟完整 URL（支持变量，见下一条）
• 空行分隔请求头与请求体（POST/PUT 时需用）
• 不支持自动重定向（302 等会原样返回，不会跳转）

使用环境变量管理不同 API 地址

在工作区根目录创建 .vscode/settings.json，添加：

"rest-client.environmentVariables": {   "local": {     "host": "http://localhost:3000"   },   "prod": {     "host": "https://api.example.com"   } }

再新建 env.http，写入：

@host = {{host}}  GET {{host}}/users Accept: application/json

点击右下角环境选择器（默认显示 local），切换即可复用同一请求适配多环境。变量名如 {{host}} 必须在 @ 声明之后才可用，且不能跨文件共享。

容易踩的坑：

• 变量名拼写错误（如 {{hosst}}）会导致 URL 解析失败，报错 Invalid URI
• 环境变量值末尾带斜杠（"host": "http://localhost:3000/"）会导致双斜杠 //，部分服务拒绝解析

发送 POST 请求并携带 JSON Body

确保请求头明确指定 Content-Type，并在空行后写入 JSON：

POST {{host}}/login Content-Type: application/json  {   "username": "alice",   "password": "secret123" }

注意：

• Body 必须是合法 JSON（键名加引号，无尾逗号），否则报错 Unexpected Token
• 若需动态值（如时间戳），可用 {{timestamp}} 变量，但需配合插件脚本或外部工具生成——REST Client 原生不支持函数式变量（如 {{now()}}）
• 二进制文件上传不可用；表单提交需手动构造 multipart/form-data，极不推荐——此时应换用 curl 或 Postman

真正卡住人的往往不是语法，而是环境变量作用域、URL 拼接逻辑和 Content-Type 是否匹配实际 payload。建议每个项目单独建 .http 文件，按功能分组，避免混用全局变量。