There is a new Visual Studio Code HTML preview, and it’s working for me now. This new feature uses the native WebKit to render the HTML as if it will appear in a real browser. Visual Studio Code has been improved a lot recently. For example, here’s a new feature: HTML code folding is supported now! Not only text but also scripts and tags can be folded now! That saves loads of time making edits!
Visual studio code, arguably the best code editor to use at the present time. Due to its wide range of extensions and support from Microsoft this editor is widely adopted.
Visual studio code is built on top of an open-source Monaco editor by Microsoft. This project receives around 14k stars in Github.
I didn’t know at first that visual studio wasn’t showing my HTML editor, but when I do see it I just installed some plugins to fix it. When I didn’t know how actually I figured this thing out about the HTML viewers in the visual studio code editor. And it’s quite easy really, below are the steps with images to make HTML preview work in your visual studio code editor.
IntelliSense
As you type in HTML, we offer suggestions via HTML IntelliSense. In the image below, you can see a suggested HTML element closure </div> as well as a context-specific list of suggested elements.
Document symbols are also available for HTML, allowing you to quickly navigate to DOM nodes by id and class name.
You can also work with embedded CSS and JavaScript. However, note that the script and style included from other files are not followed, the language support only looks at the content of the HTML file.
You can trigger suggestions at any time by pressing Ctrl+Space.
You can also control which built-in code completion providers are active. Override these in your user or workspace settings if you prefer not to see the corresponding suggestions.
// Configures if the built-in HTML language suggests HTML5 tags, properties and values.
"html.suggest.html5": trueJavascript (ES6) Code Snippets
No need to mention that JavaScript is the core of web development. There are lots of code snippets that we used on a daily basis and this extension helps you by not writing that repetitive code again and again.
It provides JavaScript, TypeScript, Vue, React, and HTML code snippets. I personally believe this is a must-have extension for web development.
Live Sass compiler
This VS Code extension is used for compiling SCSS files to CSS files quickly compared to the other compilers like Visual Studio extensions. This is handy for web developers while developing web pages with SCSS files. You can find detailed information regarding this at the following link.
Auto Rename Tag
auto rename visual code extension
VS Code can automatically add the closing tag, which can save a bunch of keystrokes and time. But what is lacks its ability to change the corresponding closing tag when you want to change any tag.
Because sometimes you may want to change one HTML or XML tag to another tag, then you need to manually change the corresponding closing tag also, and this is where the Auto Rename tag comes to the rescue.
When you make a change to the opening tag, then the corresponding closing tag automatically gets renamed.
It takes away the pain of working and changing with HTML or XML tags.
CSS Peek
As its name suggests, this extension lets you jump to the CSS code using classes and IDs.
You can install it by searching the name on the extension section of the visual studio code.
Live Server
This extension is used for launching a development local server with a live reload feature for static and dynamic pages. This saves time for previewing the changes made to your source code by just making the changes in the VS code and saving the file. This will automatically refresh the browser and reflect the changes you have made in it, instead of us manually refreshing the browser page. You can find the detailed information regarding this extension at the following link.
Beautify
Beautify is one of the highest-rated VS code extensions. It is an extension for formatting your javascript, JSON, CSS, Sass, and HTML code. Who likes messy code, which is not indented correctly, etc.
Moreover, formatting code manually takes a lot of time. Here, Beautify comes to the rescue. You can format all of your code with just a click or automatically on save.
REST Client
Testing API and integration to the UI is a huge part of web development. I am sure you have done it so many times.
I often used REST clients such as Postman to test my APIs. Using this extension, we can test APIs and view their response directly in the visual studio code.
ESLint
This extension is used for analyzing your JavaScript code and fixing the errors in them. You can install and edit your JS code to fix the errors pointed out. You can find detailed information regarding the installation and usage of the ESLint at the following link.
Better Comments
Writing great comments is a must when you are working in a team or want someone else to understand your code better.
But most of the time, comments help us understand our own code. It is true when you are looking at it after a while.
And by default, comments are quite lame. As you can’t distinguish what is a query, a to-do, an alert, etc. Everything looks the same.
Better comments extension helps you in solving these issues. It helps you to create more human-friendly comments in your code.
Moreover, you can style a to-do, a query, a highlight differently.
Prettier – Code formatter
This extension performs the formatting of the JavaScript, CSS, and HTML code.
Link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
You can install it by searching the name on the extension section of the visual studio code.
Quokka
This extension is used for testing JavaScript code in the Visual Studio Code editor itself instead of checking it out in the browser console. You can find the detailed information regarding this extension in the following link.
Bracket Pair Colorizer 2
Bracket Pair Colorizer 2 is the second version of Bracket Pair Colorizer, which uses the same bracket parsing engine as VS Code, thus increasing sped and accuracy.
It makes navigating through braces much more comfortable. How many times do you get confused when working with a code block trying to find the closing braces.
Bracket Pair Colorizer 2 allows matching brackets with similar colors, which helps us in better identification. And of course, you can define the color to use.
It is one of the best VS Code extensions for developers for productivity.
GitLens
We use Git almost every day of our life. GitLens is the visual studio code plugin to supercharge git capabilities.
With GitLens, it’s so easy to view code authorship, check commit number, view changes between the last commit and existing changes, and so on.
You can install it by searching the name on the extension section of the visual studio code.
Polacode
This extension is used for taking code snippet screenshots. It can be used to copy and paste the code you need in snippet screenshots easily and save them after installing the extension. You can find the detailed information regarding the extension in the following link.
Project Manager
Do you work on multiple projects and switch back and forth? I know I do and the project manager has been a savior to manage multiple projects in visual studio code.
Conclusion:
Visual studio code offers a wide range of extensions. Here are various best visual studio code extensions for web development.
Perhaps you’re a Microsoft user who has been using their products for a while. Perhaps you’ve been working with Visual Studio for quite some time and have been using its HTML editor.
If not, don’t worry about the entire software, focus yourself only on its preview tools.