VSCode REST Client 使用总结-EW帮帮网

1. 插件简介

在这里插入图片描述

REST Client 是 VSCode 的一个插件，用于直接在编辑器中发送 HTTP/HTTPS 请求，类似 Postman，但更轻量，且可直接在代码仓库中保存请求。

主要特点：

支持 GET / POST / PUT / PATCH / DELETE / OPTIONS 等常见请求。
语法简洁，存为 .http 或 .rest 文件即可。
结果直接在 VSCode 内部展示（JSON 高亮、格式化、预览图片/HTML）。
支持环境变量、请求链、认证（Basic、Bearer Token、OAuth2）。

2. 安装

打开 VSCode 扩展市场，搜索 REST Client。
安装并重启 VSCode。
新建一个 test.http 文件即可使用。

3. 基本语法与用法

3.1 基本请求

### GET 请求
GET https://jsonplaceholder.typicode.com/posts/1

### POST 请求
POST https://jsonplaceholder.typicode.com/posts
Content-Type: application/json

{
  "title": "foo",
  "body": "bar",
  "userId": 1
}

每个请求之间用 ### 分隔。
点击上方的 Send Request 发送请求
支持在请求中直接写请求体。

使用变量：
你也可以定义变量来复用

@host = https://jsonplaceholder.typicode.com

GET {{host}}/posts?userId=1&sort=desc

3.2 设置请求头

GET https://httpbin.org/headers
User-Agent: REST Client
Authorization: Bearer mytoken123

3.3 查询参数

GET https://httpbin.org/get?user=neo&role=developer

3.4 变量与环境

在 .vscode/settings.json 中定义环境变量：

http-client.env.json

{
  "dev": {
    "host": "http://localhost:8000",
    "token": "dev-token-123"
  },
  "prod": {
    "host": "https://api.example.com",
    "token": "prod-token-xyz"
  }
}

上面有dev和prod环境

ctl + shift + p

切换环境：命令面板 → Rest Client: Switch Environment。

在请求中使用：

### 使用环境变量
GET {{host}}/users
Authorization: Bearer {{token}}
Cookie: {{token}}; {{user_id}}

3.5 动态变量

REST Client 提供内置变量：

{{$timestamp}} → 当前 Unix 时间戳
{{$uuid}} → 随机 UUID
{{$randomInt min max}} → 随机整数
{{$dotenv KEY}} → 从 .env 文件读取

示例：

POST {{host}}/logs
Content-Type: application/json

{
  "id": "{{$uuid}}",
  "time": "{{$timestamp}}"
}

3.6 请求链（依赖前一个响应）

### 登录，获取 token
POST {{host}}/login
Content-Type: application/json

{
  "username": "neo",
  "password": "123456"
}

### 使用上个请求的 token
GET {{host}}/profile
Authorization: Bearer {{login.response.body.token}}

4. 响应展示

JSON → 自动高亮、折叠、格式化。
HTML → 内置浏览器预览。
图片 → 可直接渲染。
保存响应 → 点击右上角保存图标即可。

VSCode REST Client 使用总结