REST Client for Visual Studio Code

repository·master·Indexed 26 days ago

https://github.com/huachao/vscode-restclient

A Visual Studio Code extension that allows developers to send HTTP and GraphQL requests and view responses directly within the editor. It supports cURL command parsing, environment variables, file-based request bodies, and various authentication schemes including Basic, Digest, AWS Signature v4, and AWS Cognito. Version 0.26.0.

Tokens
7.7K
Snippets
16
Records
39
Agent score
89%

What's inside REST Client

  1. Make cURL requests

    master

    REST Client allows you to run curl commands directly. The extension automatically parses the command.

    Supported cURL options:

    • -X, --request
    • -L, --location, --url
    • -H, --header (Note: no @ support in headers)
    • -I, --head
    • -b, --cookie (Note: no cookie jar file support)
    • -u, --user (Basic auth support only)
    • -d, --data, --data-ascii, --data-binary, --data-raw
  2. Save response data

    master

    In the response preview tab, use the icons in the upper right corner:

    • Save Full Response: Saves the entire response to a local file. You will be prompted to choose a file path.
    • Save Response Body: Saves ONLY the response body. The file extension is determined by the response MIME type (e.g., .json for application/json).

    You can customize MIME type to extension mappings in settings using rest-client.mimeAndFileExtensionMapping.

    "rest-client.mimeAndFileExtensionMapping": {
        "application/atom+xml": "xml"
    }
  3. Chain requests using Request Variables

    master

    Request variables allow you to extract data from a previous request's response (body or headers) to use in a subsequent request within the same file.

    • Naming a Request: Use # @name requestName before a request URL to give it an identifier.
    • Reference Syntax: {{requestName.(response|request).(body|headers).(*|JSONPath|XPath|Header Name)}}.
      • Response Body: Use * for the full body, or JSONPath/XPath to extract specific fields (e.g., $.id).
      • Response Headers: Use the header name (case-insensitive) to extract a value.
    • Requirement: You must manually trigger the named request first to populate its response data before referencing it.
    # @name login
    POST {{baseUrl}}/api/login HTTP/1.1
    Content-Type: application/x-www-form-urlencoded
    
    name=foo&password=bar
    
    ###
    
    @authToken = {{login.response.headers.X-AuthToken}}
    
    # @name createComment
    POST {{baseUrl}}/comments HTTP/1.1
    Authorization: {{authToken}}
    Content-Type: application/json
    
    {
        "content": "fake content"
    }
    
    ###
    
    @commentId = {{createComment.response.body.$.id}}
  4. Define multiple requests in a single file

    master

    To store and execute multiple requests in one file, use ### (three or more # symbols) as a delimiter between requests. Place your cursor between the delimiters to target a specific request.

    GET https://example.com/comments/1 HTTP/1.1
    
    ###
    
    GET https://example.com/topics/1 HTTP/1.1
    
    ###
    
    POST https://example.com/comments HTTP/1.1
    content-type: application/json
    
    {
        "name": "sample"
    }
  5. Define and use File Variables in .http files

    master

    File variables are constant throughout a single .http file.

    • Definition: Use the syntax @variableName = variableValue on a complete line. Variable names must not contain spaces.
    • Scope: Once defined, they can be referenced in any request within the same file using {{variableName}}.
    • Special Characters: Use a backslash \ to escape special characters like line breaks (e.g., \n).
    • Percent Encoding: When referencing a file variable, you can use the % symbol to percent-encode the value: {{%variableName}}.
    @hostname = api.example.com
    @port = 8080
    @host = {{hostname}}:{{port}}
    @contentType = application/json
    
    ###
    
    @name = Strunk & White
    
    GET https://{{host}}/authors/{{%name}} HTTP/1.1
  6. Send an HTTP request

    master

    You can send HTTP requests directly from the editor using several methods:

    • CodeLens: Click the Send Request link that appears above the request block (requires the file language mode to be set to HTTP).
    • Keyboard Shortcut: Press Ctrl+Alt+R (or Cmd+Alt+R on macOS).
    • Command Palette: Press F1 and select/type Rest Client: Send Request.
    • Context Menu: Right-click in the editor and select Send Request.

    Note: Shortcuts are only available when using http or plaintext language modes.

    Responses are previewed in a separate webview panel. To preview responses in an untitled document instead, set the setting rest-client.previewResponseInUntitledDocument to true.

    POST https://example.com/comments HTTP/1.1
    content-type: application/json
    
    {
        "name": "sample",
        "time": "Wed, 21 Oct 2015 18:27:50 GMT"
    }
  7. Use auto-completion for HTTP requests

    master

    Auto-completion is available for the following categories while writing HTTP requests:

    1. HTTP Methods
    2. HTTP URLs from request history
    3. HTTP Headers
    4. System variables
    5. Custom variables (defined in the current environment, file, or request)
    6. MIME Types for Accept and Content-Type headers
    7. Authentication schemes for Basic and Digest
  8. Manage request history

    master

    REST Client saves the last 50 request items (method, URL, headers, and body) for future reference.

    • View History: Press Ctrl+Alt+H (Cmd+Alt+H on macOS) or use F1 -> Rest Client: Request History. Selecting an item displays details in a temporary file.
    • Clear History: Press F1 and select Rest Client: Clear Request History.
  9. Use Prompt Variables for dynamic user input

    master

    Prompt variables allow you to input values via a VS Code popup when sending a request. This is useful for dynamic values that shouldn't be hardcoded.

    • Definition: Add // @prompt {varName} or # @prompt {varName} before the request URL.
    • Descriptions: Add a description for the popup using // @prompt {varName} {description}.
    • Security: If the variable name is password, passwd, pass, or similar case-insensitive variations, the input will be hidden as you type.
    • Precedence: Prompt variables override any previously assigned variables of the same name but are not stored for subsequent requests.
    # @prompt username
    # @prompt refCode Your reference code display on webpage
    # @prompt otp Your one-time password in your mailbox
    POST https://{{host}}/verify-otp/{{refCode}} HTTP/1.1
    Content-Type: {{contentType}}
    
    {
        "username": "{{username}}",
        "otp": "{{otp}}"
    }