Visual Studio Code – Few tips, HTML preview & live preview

Tips:

  • When you create a new file in Visual Studio code, you should save the file. When you do that, VS Code will enable code suggestion, autocomplete the code and more.
Visual Studio Code preview and live html preview, <span>Visual Studio Code – Few tips, HTML preview & live preview</span>, KandZ
unsaved file
Visual Studio Code preview and live html preview, <span>Visual Studio Code – Few tips, HTML preview & live preview</span>, KandZ
Saved file as an HTML file
  • If you move the mouse over an HTML tag, a pop-up window will appear with information about this tag.
Visual Studio Code preview and live html preview, <span>Visual Studio Code – Few tips, HTML preview & live preview</span>, KandZ
  • beautifying the code with Ctrl + Shift + I for Linux and for Windows Shift + Alt + F

Preview HTML

Go to View > Extensions

Visual Studio Code preview and live html preview, <span>Visual Studio Code – Few tips, HTML preview & live preview</span>, KandZ

Type open-in-browser. Click Install

Visual Studio Code preview and live html preview, <span>Visual Studio Code – Few tips, HTML preview & live preview</span>, KandZ

Now by clicking Ctrl + Alt + O you can select the browser you want to preview the HTML file

Visual Studio Code preview and live html preview, <span>Visual Studio Code – Few tips, HTML preview & live preview</span>, KandZ

Click Ctrl + k and then d the file will open on the browser you have selected

Live HTML Preview

Go to View > Extensions

Visual Studio Code preview and live html preview, <span>Visual Studio Code – Few tips, HTML preview & live preview</span>, KandZ

Type live server. Click Install

Visual Studio Code preview and live html preview, <span>Visual Studio Code – Few tips, HTML preview & live preview</span>, KandZ

Now at the taskbar click Go Live

Visual Studio Code preview and live html preview, <span>Visual Studio Code – Few tips, HTML preview & live preview</span>, KandZ

It will open in your default web browser. Now you can edit your code and you just need to save the file.

THE END!!!

88180cookie-checkVisual Studio Code – Few tips, HTML preview & live previewVisual Studio Code – Few tips, HTML preview & live preview

Related posts