VS Code(Visual Studio Code) is the most popular IDE for developers right now because of its simplicity and the availability of useful extensions.
So In this article, we will see some of the most useful and popular extensions in the VS Code that helps in faster coding.
Auto Rename Tag
This extension automatically renames the ending HTML tag while renaming the starting tag and vice versa.
This extension comes in handy If you have a lot of nested tags and you don’t want to manually check which is the ending/starting tag to rename it.
Auto Close Tag
This extension automatically closes the ending HTML tag while adding a new HTML tag which helps in avoiding the missing tags issue.
Git History
Git History extension allows us to see the git history in our repository, compare it with the previous version, create a new branch and a lot more.
Just right-click on any file/folder from VS Code that is added to git and select the `Git: View File History` option to see all the Git history for that file/folder.
Relative Path
This is one of my favorite extensions. This extension allows us to quickly add the import for any file even if it’s deeply nested by using a quick search.
Just press `Ctrl + Shift + H` or `Cmd + Shift + H (Mac)` to activate it and search for the file you want to import.
Bracket Pair Colorizer
This extension allows us to easily find matching pair of the bracket as it shows different color for each of the bracket.
As you can see in the above image, each matching bracket is displayed using different color so it’s easy to find the closing bracket or add the missing bracket.
Change Case
This extension allows us to quickly change the casing of selected text. For example from camel case to pascal case, or kebab case etc.
First, highlight the text you want to convert in Visual Studio Code and then press `Ctrl + Shift + P` or `Cmd + Shift + P (Mac)` to open the command palette and type `change case` and select the case you want to convert to.
Prettier
**This is a must-have extension for every developer whether you’re using HTML or JavaScript or React or any other framework or library.**
It saves a lot of time by avoiding the need for formatting after every line of code. It automatically formats your code when you save the file.
It also helps to catch errors in your code as it will not format the code if there is an error for example missing bracket or invalid syntax.
**Usage:**
– To automatically format the file on saving, In Visual Studio Code, press `Ctrl + Shift + P` or `Cmd + Shift + P (Mac)` to open the command palette and type `setting` and then select `Preferences: Open User Settings` option
– Search for the `format on save` setting and check the checkbox.
That’s it. You have configured prettier to format as per the default settings.
Now, open any HTML/JavaScript/CSS/React code. Let’s say your code looks like this:
If you save the file using `Ctrl + S` or `Cmd + S (Mac)`, the prettier will format your code as shown below:
This is much nicer and as per the React style guidelines.
If you have code like this:
Then on saving, it will be formatted like this:
So now, you don’t have to worry about adding or removing space or moving code to the second line if it does not fit on one line. Prettier does that job for you.
Now, write the code any way you want and just save the file to format it.
This will make you more productive as you will not be wasting your time in formatting code.
But sometimes, it may happen that, you don’t want the formatting done by prettier and you want to keep your own formatting for a particular file, then you can do the following:
– In Visual Studio Code, press `Ctrl + Shift + P` or `Cmd + Shift + P (Mac)` to open command palette and type `save` and then select `”Save without Formatting”` option
Code Runner
Using this extension we can quickly execute the code of many languages like C, C++, Java, JavaScript etc.
Google Fonts
Using this extension you can quickly add any google font in your code without the need of searching through the google fonts website.
Live Server
Using this extension, you can start your local development server to serve your HTML/CSS files from within the VS Code.
## Emmet for React
If you are HTML/CSS developer, then you might already be aware of the emmet plugin.
It provides autocompletion for HTML and CSS code by reducing the need for extra typing.
It’s already included for all HTML and CSS files by default in VS code but we need to do some extra configuration to enable it for React.
**Steps to enable:**
– In Visual Studio Code, press `Ctrl + Shift + P` or `Cmd + Shift + P (Mac)` to open command palette and type `setting` and then select `Preferences: Open User Settings` option
– Search for emmet in the search box as shown in the below screenshot
– On the left side, expand the extensions menu and click on `emmet`
– Then click on the `Add Item` button under `Emmet: Include Languages` section
– And then enter `javascript` under the `Item` textbox and enter `javascriptreact` under the `Value` textbox.
– You’re done.
Now open any component file from React application and type `.container` and press the tab key and it will autocomplete it to
<div className="container"></div>This little configuration will save you a lot of time by removing the need of typing `className` every time to add a new `class` in React.
or type `ul.list>li*3>a` and press the tab key to convert it to
<ul className="list">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul> Emmet Shortcut
You can learn more Emmet shortcuts [here](https://docs.emmet.io/).
**Extra Tips:**
– If you have created a new `.html` file then instead of typing the `doctype`, `head`, `meta` and `body` tags yourself, just type exclamation mark (`!`) and press tab and emmet will add the default HTML code
Default HTML Code
– If you want to generate some random lorem ipsum text then just type `p*4>lorem` and press tab and emmet will add 4 paragraphs with some random lorem ipsum text
– To add multiple classes like `list` and `item` to the same element, type `.list.item` and press tab which will be converted to
html
<div className=”list item”></div>
If you are in a CSS file, to add any property you can use shorthand syntax. for example, to add `letter-spacing` of `10px` just type `ls10` and press tab and it will be converted to `letter-spacing: 10px`
ES7 React/Redux/GraphQL/React-Native snippets
**This is a must-have extension If you’re a React.js Developer.**
It provides a [ton of prefixes](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) that we can use to quickly add snippets of code without wasting time in re-writing the same code again and again.
Thanks for reading!
That’s is about this article. I hope using these extensions will make your coding faster.
Good Article