LiveReload for VS Code

A web browser page reloading plugin for the VS Code editor.

Features

Reloads web pages when any file is created, removed or modified.
Applies changes without reloading when any CSS or image changed.
Works with LiveReload extension.

Installing

You can install the latest version of the extension via the Visual Studio Marketplace here.

Alternatively, open Visual Studio code, press Ctrl+P or Cmd+P and type:

ext install livereload

Restart VS Code (if required)

Usage

You can use this by either adding a snippet of code to the bottom of your HTML pages or install the Browser Extensions.

Browser extension

Install the LiveReload browser plugins by visiting LiveReload Extensions.

Add code to page

You can use VS Code to insert script tag via Ctrl+Shift+P add type livereload.js and the script tag is added to you html document.

Or manually add the following script of your html document.

<script>
  document.write(
    '<script src="http://' +
      (location.host || '${1:localhost}').split(':')[0] +
      ':${2:35729}/livereload.js?snipver=1"></' +
      'script>'
  );
</script>

Note: If you are using a different port other than 35729 you will need to change the above script.

Settings

Open VS Code user setting by pressing CTRL+, and set the following as you need:

Name	Type	Details
`debug`	`boolean`	To show debug messages in console.
`port`	`integer`	To specify the listening port.
`useHTTPS`	`object`	An optional object of options to be passed to `https.createServer` (if not provided, `http.createServer` is used instead)
`applyCSSLive`	`boolean`	Tells LiveReload to reload CSS files in the background instead of refreshing the page. The default for this is true.
`applyImageLive`	`boolean`	Tells LiveReload to reload image files in the background instead of refreshing the page. The default for this is true.
`delayForUpdate`	`integer`	To add a delay (in miliseconds) between when livereload detects a change to the filesystem and when it notifies the browser.
`exts`	`string`	To include additional extentions that you want to observe e.g. `jade,scss`.
`exclusions`	`string`	To specify additional exclusion patterns e.g. `html, images`.

Example

{
    "livereload.debug": false,
    "livereload.port": 35729,
    "livereload.useHTTPS": {},
    "livereload.applyCSSLive": true,
    "livereload.applyImageLive": true,
    "livereload.delayForUpdate": 0,
    "livereload.exts": "html,htm,css,js,png,gif,jpg,php,php5,py,rb,erb,coffee",
    "livereload.exclusions": ".DS_Store,.gitignore,.git,.svn,.hg"
}

Note

The LiveReload extension only works with default port 35729.

LiveReload

ziishaned