Ayush Agarwal

Posted on Sep 11, 2020 • Edited on Sep 13, 2020 • Originally published at ayushdev.com

My Favorite VS Code Extensions As A Web Developer

#webdev #vscode #devops

There are many such blogs out there on best extensions but it is no harm to read a new one and get to know possibly few new extensions which can prove useful in your programming life.

We have a lot of wonderful and excellent editors out there like Atom, Sublime Text,Microsoft Visual Studio Code...

Out of all these the crowd favorite is Visual Studio Code. Yeah the name is too long so lets use the acronym VSC for the rest of the blog.

VSC has a lot to offer to be the most popular editor. Its free, easy to setup, easy to use but one of the most important feature which makes VSC special is the availability of large number of extensions.

Here I'm writing a blog which is like a default blog for developers. Almost every developer has someday or the other given his recommendations of VS Code extensions. In this blog I'll be discussing about my favorite extensions and what makes them so good. So, stay tuned for some amazing recommendations.

To begin with,

1. Live Server:

If you make static webpages on HTML,CSS and Javascript, Live server is a must have extension. Coming to its feature, being a front end developer it is so frustrating to refresh the browser page repeatedly to check on the changes. And as the name suggests Live Server refreshes the page automatically when you save the changes. So, you see front end development got a lot easier.

Next up on the list is,

2. CSS Peek:

Again a gem extension for front end developers. How often we see have completed our project and it has aroound 300 lines of CSS. Now after a while we wish to change css of na particluar section or a tag, then we don't need to search the complete CSS file instead we can use CSS peek.

Just hover to the html tag whose CSS you wish to edit and then press:

Ctrl/Cmd + Mouse Pointer

Doing this will directly take us to the exact line in our CSS file.

See, you just saved yourself the trouble to ponder over 400 CSS lines to find your element.

3. Prettier:

Assume you have written around 200 lines of HTML,CSS or any other language and after completing the project you return after 5 days and see everything is messed about. No formatting of code, nothing is readable. Had the formatting be done the code would look much better.

After all a formatted code is not only makes the code readable but also presentable.

So, how can we format our complete code in one go?
Very easy, just install Prettier extension and then press

Shift + Alt/Option + F

4. Material Theme:

We all need a suitable environment for anything we do. Cool and clear skies for going out, Music and AC in a gym, but what developers need is a good theme which accompanies their editor so that the programming is not as boring as everyone thinks.
So, to get some of the best themes you can download Material Theme extension which gives some cool themes to select from. My favorite is Dark High Contrast, comment below yours.

5. Auto Rename Tag:

Just assume you are writing a html code and there is tag you suddenly thought needs to be changed. So you change it but now the closing tag is after about 60 80 lines so you scroll down and now you are not identify which is the correct closing tag. You again scroll up...

Painful!! Isn't it?

Download the Auto Rename Tag extension and after that when you change the opening tag,closing tag is changed automatically.

6. Bracket Pair Colorizer:

Similar to tags sometimes we can get tossed up between a lot of brackets in a code script. Well, the above mentioned extension lets you set color for different types of brackets. Also when you select an opening bracket it draws a colorful line connecting to the closing one for easy identification.

7. Live SASS Compiler:

Working on Sass is much better than CSS. Sass gives you freedom to use parent child concept in writing CSS. Create multiple files for different pages and use them wherever you want just like react components which make styling much easier.

But we need a SASS Compiler to convert the Sass into CSS so that the styling works and that is where Live Sass Compiler comes in handy. It compiles your sass into CSS as soon as the file is saved.

8. Better Comments:

Writing comments is a good habit for developers. It increases the chances of understanding your code better when you re visit.
Now what if I told you there is a way to add comments in different colors rather than old school light shade of gray. Just install better comments extension and enjoy beautiful comments.

9. ES7 react/redux/graphql/react-native snippets:

Mostly pre-installed but if not you need to install it right away. After all you don't want to write few default snippets on every code page of yours. This extension suggests you the code snippet and also have some shortcut keys for snippets of most of the frameworks.

That concludes my list of extensions, so if you are reading this till here I would love to know the extensions you use.

Comment them below so that we can have a good collection of useful extensions.