If you are on your journey to becoming a web developer and have decided to work with a Visual Studio Code, this article will help you to set this code editor in the most efficient way so that you will be able to enjoy the full potential of its developer environment. We won’t dive deep into the Visual Studio Code features here, but we will look at one of the section called ‘Extension’. Keep on reading to customise your editor.
The Extension section of Visual Studio Code
This section can be found on the left navigation bar. Upon hovering, you will be prompted with its name. This section is a sort of a market place where you can install various extensions to suit your developing needs. For your starter pack, we will get into some specific extensions which will be highly useful right from the beginning.
Go there and look for the extensions mentioned below and install them. Note, some installation may require a reload for completion. Also, if you need any details about the extension, you can read their documentation right on the page of your chosen extension.
Auto rename tag
This extension, as its name suggests, will help you to rename your html tags. For example, if you set <p>…</p> tag and you decide not to keep it and change it, you can change the opening tag <p> to <h1> and the closing tag will automatically be renamed for you. You do not need to individually go there and change each of your tags.
Better comments by Aron Bond
This extension is even more useful if you are getting started. It allows users to comment with colourful styles in any way as you want while creating your own annotations. As you start, you will need to take lot of notes alongside the tutorials or documenting your own projects. This one is particularly handy!
Bracket Pair Colorizer 2
Just in case if you do not know it, most of your code will be inside a code block, which starts with opening and closing curly braces. As you begin writring your code, there will be hundreds and thousands of such curly braces or any other brackets. Bracket pair colorizer will help you to keep a track of these opening and closing brackets with a thin coloured guiding from the top to bottom. This will give you a visual queue of where things might have gone wrong and where your chunks of code reside.
Eslint
This extension will help you to debug your code, so you can imagine it is definitely one of the most useful features. Using this extension will immediately let you know if you have made any mistake while writing code and help you avoid bugs in advance!
HTML snippet
One of the most useful extension you will have as a web developer. This one will help you to complete or suggest html tags. In addition to it, with one exclamation mark, you can drop a whole preset figure of HTML right inside your editor and save your time from writing it over and over again from scratch.
Live server by Ritwick Dey
With the help of this extension you will be able to see live mark-up changes you are making inside your html file. With a click of a button, the server will open the browser for you allowing you to show live changes on the go.
These are some of the top-notch extensions for HTML code provided by Visual Studio Code. Yet, these are just the examples of the extensions that can save tons of your development time and you can have a lot more in the Extension section.