Skip to content

BrandonGillis/vscode-livereload

 
 

Repository files navigation

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.

License

MIT © Zeeshan Ahmed

About

LiveReload plugin for VS Code

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 84.0%
  • TypeScript 16.0%