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 文件,按功能分组,避免混用全局变量。










