mkloubert/vscode-http-client

Simple way to do HTTP requests in Visual Studio Code.

vscode-http-client

Simple way to do HTTP requests in Visual Studio Code.

Table of contents

1. Install
2. How to use
   • Settings
   • How to execute
     • Execute scripts
       • Constants
         • cancel
         • output
         • progress
       • Functions
         • alert
         • decode_html
         • encode_html
         • from
         • guid
         • new_request
         • now
         • open_html
         • open_markdown
         • sleep
         • uuid
         • utc
       • Modules
3. Enhancements
   • Authorization
     • Basic Auth
4. HTTP files
5. Customizations
   • CSS
6. Syntaxes
7. Support and contribute
8. Related projects
   • node-enumerable
   • vscode-helpers

Install [↑]

Launch VS Code Quick Open (Ctrl + P), paste the following command, and press enter:

ext install vscode-http-client

Or search for things like vscode-http-client in your editor.

How to use [↑]

Settings [↑]

Open (or create) your settings.json in your .vscode subfolder of your workspace or edit the global settings (File >> Preferences >> Settings).

Add a http.client section:

{
    "http.client": {
    }
}

Name	Description
open	An array of one or more paths to .http-request files, which should be opened on startup.
openNewOnStartup	(true), if a new tab with an empty request should be opened on startup. Default: (false)
rejectUnauthorized	(true), to reject unauthorized, self-signed SSL certificates. Default: (false)

How to execute [↑]

Press F1 and enter one of the following commands:

Name	Description	command
HTTP Client: Change style ...	Changes the CSS style for request forms.	extension.http.client.changeStyle
HTTP Client: Create new script ...	Opens a new editor with an example script.	extension.http.client.newRequestScript
HTTP Client: New HTTP request ...	Opens a new HTTP request form.	extension.http.client.newRequest
HTTP Client: New HTTP request (split view) ...	Opens a new HTTP request form by splitting the current view.	extension.http.client.newRequestSplitView
HTTP Client: Send editor content as HTTP request ...	Uses the content of a visible editor as body for a HTTP request.	extension.http.client.newRequestForEditor
HTTP Client: Send file as HTTP request ...	Uses a (local) file as body for a HTTP request.	extension.http.client.newRequestFromFile
HTTP Client: Show help ...	Shows a new help tab.	extension.http.client.showHelp

There are currently no predefined key bindings for these commands, but you can setup them by your own.

Execute scripts [↑]

For things, like batch operations, you can execute scripts, using the Node.js API, which is provided by VS Code.

const USERS = [{
    id: 5979,
    name: 'TM'
}, {
    id: 23979,
    name: 'MK'
}];

const SESSION_ID = uuid();
const CURRENT_TIME = utc();

// show output channel
output.show();

for (let i = 0; i < USERS.length; i++) {
    if (cancel.isCancellationRequested) {
        break;  // user wants to cancel
    }
    
    const U = USERS[i];

    try {
        output.append(`Sending request for '${ U }' ... `);

        const REQUEST = new_request();

        // do not show any result
        // in the GUI
        // this is good, if you do many requests
        REQUEST.noResult(true);

        REQUEST.param('user', U.id)  // set / overwrite an URL / query parameter           
               .header('X-User-Name', U.name)  // set / overwrite a request header
               .header('X-Date', CURRENT_TIME)  // automatically converts to ISO-8601
               .header('X-Session', SESSION_ID)
               .body( await $fs.readFile('/path/to/bodies/user_' + U.id + '.json') );  // set / overwrite body

        // you can also use one of the upper setters
        // as getters
        if ('MK' === REQUEST.header('X-User-Name')) {
            REQUEST.param('debug', 'true');
        }

        await REQUEST.send();

        output.appendLine(`[OK]`);
    } catch (e) {
        output.appendLine(`[ERROR: '${ $h.toStringSafe(e) }']`);
    }
}

Constants [↑]

cancel [↑]

Provides the underlying CancellationToken object.

const USER_IDS = [1, 2, 3];

for (let i = 0; i < USER_IDS.length; i++) {
    if (cancel.isCancellationRequested) {
        break;  // user wants to cancel
    }

    // TODO
}

output [↑]

Provides the OutputChannel of the extension.

output.show();

output.append('Hello');
output.appendLine(', TM!');

progress [↑]

Stores the underlying Progress object, provided by withProgress() function.

const USER_IDS = [1, 2, 3];

for (let i = 0; i < USER_IDS.length; i++) {
    const UID = USER_IDS[i];

    progress.report({
        message: `Executing code for user ${ i + 1 } (ID ${ USER_ID }) of ${ USERS.length } ...`,
        increment: 1.0 / USERS.length * 100.0
    });

    // TODO
}

Functions [↑]

alert [↑]

Shows a (warning) popup.

alert('Hello!');

// with custom buttons
switch (await alert('Sure?', 'NO!', 'Yes')) {
    case 'NO!':
        console.log('User is UN-SURE!');
        break;

    case 'Yes':
        console.log('User is sure.');
        break;
}

decode_html [↑]

Decodes the entities in a HTML string.

let encodedStr = '<strong>This is a test!</strong>';

// all entities
decode_html(encodedStr);  // '<strong>This is a test!</strong>'

// HTML 4
decode_html(encodedStr, '4');
// HTML 5
decode_html(encodedStr, '5');
// XML
decode_html(encodedStr, 'xml');

encode_html [↑]

Encodes a string to HTML entities.

let strToEncode = '<strong>This is a test!</strong>';

// all entities
encode_html(strToEncode);  // '&lt;strong&gt;This is a test!&lt;/strong&gt;'

// HTML 4
encode_html(strToEncode, '4');
// HTML 5
encode_html(strToEncode, '5');
// XML
encode_html(strToEncode, 'xml');

from [↑]

Creates a new LINQ style iterator for any iterable object, like arrays, generators or strings. For more information, s. node-enumerable.

const SEQUENCE     = from([1, '2', null, 3, 4, undefined, '5']);
const SUB_SEQUENCE = SEQUENCE.where(x => !_.isNil(x))  // 1, '2', 3, 4, '5'
                             .ofType('string');  // '2', '5'

for (const ITEM of SUB_SEQUENCE) {
    // TODO
}

guid [↑]

Generates a new unique ID, using node-uuid.

// v1
const GUID_v1_1 = guid('1');
const GUID_v1_2 = guid('v1');

// v4
const GUID_v4_1 = guid();
const GUID_v4_2 = guid('4');
const GUID_v4_3 = guid('v4');

// v5
const GUID_v5_1 = guid('5');
const GUID_v5_2 = guid('v5');

new_request [↑]

Creates a new instance of a HTTP client, by using the data of the current request form. All important data, like URL, headers or body can be overwritten.

const REQUEST = new new_request();

REQUEST.param('user', 5979)  // set / overwrite an URL / query parameter
       .header('X-My-Header', 'TM')  // set / overwrite a request header
       .body( await $fs.readFile('/path/to/body') );  // set / overwrite body

await REQUEST.send();

now [↑]

Returns a new instance of a Moment.js object, by using an optional parameter for the timezone.

const CURRENT_TIME = now();
console.log( CURRENT_TIME.format('YYYY-MM-DD HH:mm:ss') );

const CURRENT_TIME_WITH_TIMEZONE = now('Europe/Berlin');
console.log( CURRENT_TIME_WITH_TIMEZONE.format('DD.MM.YYYY HH:mm') );

open_html [↑]

Opens a new HTML tab.

let htmlCode = `<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <script>

    const vscode = acquireVsCodeApi();

    </script>
  </head>

  <body>
    <div>Hello, TM!</div>
  </body>
</html>`;

// the function returns the underlying webview
// s. https://code.visualstudio.com/docs/extensionAPI/vscode-api#WebviewPanel
html(htmlCode);

// with custom title
html(htmlCode, 'My HTML document');

SECURITY HINT: The new tab is opened with the following settings:

{
    "enableCommandUris": true,
    "enableFindWidget": true,
    "enableScripts": true,
    "retainContextWhenHidden": true
}

open_markdown [↑]

Opens a new HTML tab with parsed Markdown content.

let markdownCode = `# Header 1

## Header 2

Lorem ipsum dolor sit amet.
`;

// the function returns the underlying webview
// s. https://code.visualstudio.com/docs/extensionAPI/vscode-api#WebviewPanel
md(markdownCode);

// with custom title
md(markdownCode, 'My Markdown document');

// with custom, optional title and CSS
md(markdownCode, {
    css: `
body {
  background-color: red;
}
`,
    title: 'My Markdown document'
});

The parser uses the following settings:

{
    "breaks": true,
    "gfm": true,
    "mangle": true,
    "silent": true,
    "tables": true,
    "sanitize": true
}

SECURITY HINT: The new tab is opened with the following settings:

{
    "enableCommandUris": false,
    "enableFindWidget": false,
    "enableScripts": true,
    "retainContextWhenHidden": true
}

sleep [↑]

Waits a number of seconds before continue.

await sleep();  // 1 second

await sleep(2.5);  // 2.5 seconds

uuid [↑]

Alias for guid().

utc [↑]

Returns a new instance of a Moment.js object in UTC.

const UTC_NOW = utc();

console.log( UTC_NOW.format('YYYY-MM-DD HH:mm:ss') );

Modules [↑]

Constant	Name	Description
_	lodash	A modern JavaScript utility library delivering modularity, performance and extras.
$fs	fs-extra	Extensions for the Node.js file system module, especially for use in async Promise context.
$h	vscode-helpers	A lot of helpers classes and functions.
$html	node-html-entities	HTML / XML parser.
$linq	node-enumerable	Provides LINQ-style functions and classes.
$md	Marked	Markdown parser.
$moment	Moment.js	Parse, validate, manipulate, and display dates and times in JavaScript. moment-timezone is already provided.
$vs	Visual Studio Code	VS Code API.

You also can include any module, shipped with VS Code, Node.js, that extension or any external script, which is available on your current system, by using the require() function.

Enhancements [↑]

Authorization [↑]

Basic Auth [↑]

Instead of setting up a Basic Auth request header by using a Base64 string like

Authorization: Basic bWtsb3ViZXJ0Om15UGFzc3dvcnQ=

you can use the value as simple plain text, separating username and password by : character:

Authorization: Basic mkloubert:mypassword

Keep in mind: The string right to Basic will be trimmed!

HTTP files [↑]

Requests can be imported from or to HTTP files.

Those files are encoded in ASCII and their lines are separated by CRLF (\r\n):

POST https://example.com/users/1 HTTP/1.1
Content-type: application/json; charset=utf8
X-User: 1

{
    "id": 1,
    "name": "mkloubert"
}

Customizations [↑]

CSS [↑]

You can save a custom CSS file, called custom.css, inside the extension's folder, which is the sub folder .vscode-http-client inside the current user's home directory.

Syntaxes [↑]

Syntax highlighting supports all languages, which are part of highlight.js.

Support and contribute [↑]

If you like the extension, you can support the project by sending a donation via PayPal to me.

To contribute, you can open an issue and/or fork this repository.

To work with the code:

• clone this repository
• create and change to a new branch, like git checkout -b my_new_feature
• run npm install from your project folder
• open that project folder in Visual Studio Code
• now you can edit and debug there
• commit your changes to your new branch and sync it with your forked GitHub repo
• make a pull request

Related projects [↑]

node-enumerable [↑]

node-enumerable is a LINQ implementation for JavaScript, which runs in Node.js and browsers.

vscode-helpers [↑]

vscode-helpers is a NPM module, which you can use in your own VSCode extension and contains a lot of helpful classes and functions.

vscode-http-client's Issues

Keyboard shortcuts not processed by "VSCode" when running using Codespaces in browser

When running Codespaces in browser (chrome) and HTTP Client is focused, all the keyboard shortcuts go directly to the browser, and are note handled by "VSCode".
e.g.: Cmd + Shift + F: Instead of opening search, toggles: show/hide toolbar in full screen mode.

[feature request] dark theme in settings.

hope there's a dark theme switch in vscode settings pannel

Errors with self-signed certificate

When I attempt to send a request to a server with a self-signed certificate, the only response I receive is "self signed certificate". How can I configure the client to accept the certificate and continue with the request?

Adopt VS Code's 'asWebviewUri' API

Hi, I maintain VS Code's Webview API

Issue

Our telemetry suggests that your extension uses webviews and may be loading resources in these webviews using hardcoded vscode-resource: URIs. These URIs have some important limitations and don't work properly when VS Code is run in a browser. We are also making changes in the desktop version of VS Code that may cause these URIs to not work properly in future versions of VS Code.

While we are making our best effort to continue support existing webview extensions that use vscode-resource: URIs on desktop versions of VS Code, we will not able to fully support all uses cases.

Fix

To ensure that your extension continues to work in as many environments as possible—including on web and remotely—please:

• Switch to use the Webview.asWebviewUri function for loading resources.

• Switch to use the Webview.cspSource property in content security policies.

These APIs shipped around 2 years ago so they should be available in all modern versions of VS Code. You can find additional information about the issue here: microsoft/vscode#97962

Let me know if you have any questions about this change

Extension issue

• Issue Type: Bug
• Extension Name: vscode-http-client
• Extension Version: 0.34.0
• OS Version: Windows_NT x64 10.0.19043
• VS Code version: 1.62.3

⚠️ We have written the needed data into your clipboard. Please paste! ⚠️

GET request's parameter character are exchanged lower

request

server receive

How to solve the decoding problem? Garbled

How to solve the decoding problem? Garbled

• I have garbled codes in all the website tests and cannot decode properly

Garbled

HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/10.0
X-Aspnet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Tue, 13 Oct 2020 07:30:12 GMT
Content-Length: 198

{"ResultCode":1,"Message":"h/7h>�e�%f-#g!.e/�g �,h/7e�?e0�h/�f

Request

POST http://127.0.0.1:11210/api/SignInVersion1 HTTP/1.1
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
Content-Length: 10
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json, text/javascript, */*; q=0.01
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Origin: http://127.0.0.1:11210
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://127.0.0.1:11210/App/Authority/
Accept-Encoding: gzip, deflate, br

Pass=123

Extension issue

• Issue Type: Bug
• Extension Name: vscode-http-client
• Extension Version: 0.34.0
• OS Version: Windows_NT x64 10.0.22000
• VS Code version: 1.71.2

⚠️ We have written the needed data into your clipboard. Please paste! ⚠️

Extension causes high cpu load

• Issue Type: Performance
• Extension Name: vscode-http-client
• Extension Version: 0.34.0
• OS Version: Windows_NT x64 10.0.18362
• VSCode version: 1.37.1

⚠️ Make sure to attach this file from your home-directory:
⚠️C:\Users\xxxxxxxxxxxxxx\mkloubert.vscode-http-client-unresponsive.cpuprofile.txt

mkloubert.vscode-http-client-unresponsive.cpuprofile.txt

Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load

Rendering is very slow

In the latest vscode version, the plug-in response time is very long, it takes about a few minutes to display the screen

Too Many Open Responses Causing Lag/Crash

Hello, this is my first issue here so please give me some pointers if you need any more information.

Issue

When sending HTTP requests and receiving responses, responses are stored at the bottom of the page in the Responses portion of the current request.

When 12 previous saved responses are reached, the plugin begins to lag, the lag exponentially increases when even more responses are saved.

Other Machines

I currently have a Laptop and a Desktop PC, this issue occurs on both of these devices.

How To Replicate

1. Run a local web server at the URL localhost
2. Attempt to send in excess of 12 requests to the local web server using the HTTP Client Plugin

Screenshot

Feature Request/Suggestions

Suggestions:
* Title becomes the file name when saved
Features:
* [Custom Theme Integration] or at least [Dark Mode] please