Visual Studio Code Simple Website



With this extension you can create a simple http server and preview your html.

HTML in Visual Studio Code Visual Studio Code provides basic support for HTML programming out of the box. There is syntax highlighting, smart completions with IntelliSense, and customizable formatting. VS Code also includes great Emmet support.

  1. Explore VS Code features in the Interactive Editor Playground. User Interface - View the documentation for VS Code. Setup Overview - Documentation for getting up and running with VS Code, including platform specific setup. Keyboard Shortcuts - Customize your own shortcuts, download a reference sheet, or install a Keymap extension.
  2. Are you looking for a free, cross-platform and highly customizable code editor? Learn VS Code!Use VS Code with React.js, full course available here: https://.
  3. Installin g VSC: You can download Visual Studio Code for free here. If you happen to be on a Mac, you should really use Brew to install packages. You can then just install VSC with brew install.
Visual studio code website development

Create a HTTP server and edit your website while your Website will reload, either in your Browser or in Visual Studio Code, both works too!Other people can join you aswell, when your TCP port is forwarded, and you give your friends your external IP address.

How To Use

Press F1 and run the commands

'Simple HTTP Server: Create HTTP Server'After a HTTP Server has been created, and you can open the Website in Visual Studio Code or in your Browser, both works too!When editing the files they will refresh when you save the file, if other people are on your website too, it'll refresh for them aswell!

When starting a HTTP Server without a single file make sure you are in the current directory with the main file, by default it is the 'index.html' file.If this file is in the root directory of your current project you can start the HTTP Server without any problems.

'Simple HTTP Server: Create HTTP Server With Current File'This will be always the same function as the normal create HTTP Server. The difference is that you do not have to navigate into a folder.You can launch a single file with this command with no futher requrements.

When starting a HTTP server with a single file make sure that the current file is saved on your computer, it can't be a Untitled file in Visual Studio Code.So just save it on your computer and it'll work!

'shs.serverPort' This is the port that the HTTP server will be running on, and the port you need to use to access your website.

Visual Studio Code Simple WebsiteVisual Studio Code Simple Website

'shs.serverHost' This is the host that the HTTP server will be running on, it'll be like '0.0.0.0', '127.0.0.0' and so on, if set to '0.0.0.0' other people can view your website too, given that they know your external IP address and your TCP port is forwarded.

'shs.mainFile' This is the main file for the HTTP server, for example the 'index.html' if is differently the HTTP server will serve that as the main file.

This is a example of the Visual Studio Code HTML Preview.

This is a example of the Browser HTML Preview.

Visual Studio Code Create Website

License

Visual Studio Code Simple Websites

See Repository

Visual Studio Code Vs Visual Studio Community

Features

This extension provide preview of HTML which execute on web server.When you save files, this extension automatically reload browser or side panel (live preview feature).You can call these features from the context menu or editor menu.The main features are as follows.

  • Preview on side panel (ctrl+shift+v): Open preview of HTML on side panel. With this feature, you can easely check the operation of HTML, CSS and JavaScript.
  • Launch on browser (ctrl+shift+l): Open Web Page on default browser. You can check all operation with web page.
  • Stop the web server (ctrl+shift+s): Stop the web server. This feature can be used only from command palette.
  • Resume the web server (ctrl+shift+r): Resume the web server. This feature can be used only from command palette.
  • show UI Page (ctrl+shift+u): Show UI Page. You can change options at UI page.

Extension Settings

Description

This extension contributes the following settings:

  • previewServer.browsers: Browsers to launch. Even if you do not set this option, default browser launch if the ignoreDefaultBrowser is false. Default setting is null.
  • previewServer.ignoreDefaultBrowser: Controls whether launch default browser or not. Default setting is false.
  • previewServer.isWatchConfiguration: Controls whether resume the Web Server or not, when change settings. Default setting is true.
  • previewServer.port: Port number of the Web Server. If you set null, vscode-preview-server generate random number, and set port as random number. Default setting is 8080.
  • previewServer.proxy: Set proxy. This is usefull when execute web app on another web server. Default setting is '.
  • previewServer.sync: Controls whether synchronized or not. Default setting is true.
  • previewServer.ui: Port number of UI Page. Default setting is 3001.
  • startupProject: Name of startup project. This setting is meaningful only when in the workspace. This value is the name of the folder. When using this workspace and omitting this value, the first folder becomes the startup project Default setting is null.

Simple example

Settings with workspace

How to build locally

  1. Ensure that you have gulp-cli installed globally using npm i -g gulp-cli.
  2. Run npm install to bring in the dependencies.
  3. Run gulp build to produce i18n files.
  4. Press F5 key to launch extension.

Known Issues

Preview on side panel somethimes don't work with CDN, Link etc.

Acknowledgements

This extension use browsersync.I would like to thank browsersync team for useful work.

Lisence





Comments are closed.