Niranjan Singh's coding blog

Today is the first day when i have used Visual Studio code after uninstalling the Bracket. Bracket has nice feature live preview to run the html document in the browser. I was expecting the same in Visual Studio code but it took me half an hour to figure that how to run the html from VSCode. VSCode use Node.js for most of the work to be done.
Finally i have figure out that how to start a small project, containing only a single HTML file in VSCode and edit it with preview in a browser similar to live preview feature in Bracket. I have all my tools setup to start creating my first project in VSCode but if you are not installed VSCode and Node.js then download VSCode and Node.js.  You can find little bit information to install Node.js here.
After you have done installation of the Node.js, either you need to setup the PATH variables in windows or the setup automatically done this work for you. You can verify this by typing below command on command prompt that Node package manager is globally accessible or not:

npm -v

Now it the right time to setup the webserver. Run the below command on the command prompt:

npm install -g live-server

Now create a html file in VSCode configured folder.



To preview the html document, run the below command at the project folder.

live-server

It is also possible to see the live preview in VSCode split windows. You have follow below steps to do this:

1. Create a live-view.md file with this in it (Place it wherever you want. I put it at the base folder of all my projects since I can use it for whatever I'm currently working on):
   

   <div style="border:1px solid #777;
   position:absolute;left:10px;top:10px;bottom:10px;right:10px;"> 
     <iframe src="http://localhost:8080/"; width="100%" height="100%" frameborder="0" /> 
   </div>
   

2. Open live-view.md in the second/split pane in VS Code and click the "Open preview" button (top right of file).

Happy coding.