🤺 7 Useful VS Code extension for junior web developers
Tags: vscode, codenewbie
Published: 2021-09-16 19:45:26

In my early days of coding I used to get quickly frustrated when my code didn't run. It felt like I was doing everything right but the web app still didn't work. Mostly it was a silly mistake, some sort of typo, a missed comma, bracket or semicolon. This made me question my potential of becoming a developer. 

More experienced developers always had fancy extensions and in the beginning I felt quite nervous downloading any. I didn't see the value and I didn't want to add stuff that might break my current setup or that I didn't quite understand. 

With the extensions I share below I became a bit more productive and spend less time debugging. 


## 1. Prettier

This extension is a code formatter that you can set to automatically format your code on save. This will make it easier to read and write code as it removes unnecessary space and aligns everything well. 

It works with JavaScript, TypeScript, Flow, JSX, JSON, CSS , SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown and YAML.

![Demo Prettier extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2u0z8x742go3zqaanvfa.gif)



To make this extension format your code automatically on save you have to change this in settings as per the screenshot below.

![Settings - automatically format your code on save](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1quup7fsar69nj2peh3.png)

<marquee class="calltoaction">
   <blink><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">>>> Get Prettier here <<<</a></blink>
</marquee>

## 2. Highlight Matching Tag

This extension is useful to find matching opening and/or closing tags especially when having tags with a lot of tags inside.


![Demo Highlight Matching Tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68pwj26la1p0x9gare9z.png)

<marquee class="calltoaction">
   <blink><a href="https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag">>>> Get Highlight Matching Tag here <<<</a></blink>
</marquee>

## 3. Auto Rename Tag 

Have you ever had to change maybe an h1 for an h3 or div for a ul? If so with this extension when you rename one HTML/XML tag, you can automatically rename the paired HTML/XML tag. Pretty useful I'd say.

![Demo Auto Rename Tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnd8hsasvg654c8luvtj.gif)

<marquee class="calltoaction">
   <blink><a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag">>>> Get Auto Rename Tag here <<<</a></blink>
</marquee>

## 4. Error Lens 

A bit annoying at times as I don't finish typing and it tells me something is missing but found it super useful for those forgotten brackets or commas. It highlights errors visibly right in the line where something is not right.

![Screenshot 2021-09-06 at 15.46.00](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9oefz8qzd865hs99ola6.png)

![Screenshot 2021-09-06 at 15.45.14](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/do9n64p6nwz7jm8fj03s.png)

<marquee class="calltoaction">
   <blink><a href="https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens">>>> Get Error Lens here <<<</a></blink>
</marquee>



## 5. Live Server 

A helpful extension when working on static websites - HTML, CSS and JS and no framework as you won't have to reload every time you make a change. After each save it will be automatically reload the page.

<marquee class="calltoaction">
   <blink><a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer">>>> Get Live Server here <<<</a></blink>
</marquee>

## 6. Sort Lines

I'm not sure if one really needs this extensions but I've found that some people like to sort their CSS lines plus you look cool. Simply select the content you want to sort alphabetically and click: Keybound to F9 on a Mac.

![Demo Sort Lines](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4db11y7nb2jhtw3c3ik.gif)

## 7. Bracket Pair Colorizer 2
This extension highlights matching brackets with the same colour. This makes it easier to find a missing bracket. 

Demo without extension: 
![Screenshot 2021-09-06 at 15.37.11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxo0nkk0l7504u0xli6p.png)
 

Demo with extension:
![Screenshot 2021-09-06 at 15.41.07](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xm2wrhdjrx71rq2bjdm0.png)

Although with the new VS Code update you could activate this functionality directly the IDE by setting the bracketPairColorization.enabled in the settings section.

<marquee class="calltoaction">
   <blink><a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2">>>> Get Bracket Pair Colorizer 2 here <<<</a></blink>
</marquee>

-----
**Bonus extensions**

* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - super useful for debugging as well
* [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
* [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) - makes your IDE more fancy looking
* [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) - helpful especially when working with others via source control

----

Do you use other extensions that you find useful? Please add them in the comments below. 

Thank you!