Top 5 VS Code (Visual Studio Code) Extensions Every Developer Should Have

Throughout the years I have tried a lot of different Visual Studio Code extensions but there are a few extensions that I always download with every new computer and struggle to work without.

1. GitLens

   this extension is by far the most useful extension in VS Code. Most people use it just to see inline who made the last commit for each line and what the commit message was. HOWEVER, what most people don’t know is it also lets you see each commit diff that has been made on that file and the changes that were made. This makes it really easy to see where an issue may have occurred and where you should start debugging at, what mistakes you had made, or potentially what changes you have made locally that may have caused an issue. It can also give you some insight about the progression of the file to get a better understanding of requirements and so you don’t fall into the same traps someone before you may have already fallen into.

2. ESLint/Prettier

   Depending on your setup or your team’s setup you may use ESLint, Prettier, or both. This extension makes it really easy to see where your mistakes are, gives you a point and click the option to fix most of them, and auto formats for you. These are based on rules your set or the default rules that they provide for you. This helps keep your code clean and readable and can help you figure out where you may be. missing that stupid bracket since your format will start looking off once it hits that spot that is missing one.

3. Bracket Pair Colorizer

   Speaking of a missing bracket… This extension colors your brackets and parens n pairs. This makes it easier to see where all your brackets are and which bracket they match up to. This makes it easier to see where you may be missing one and can help you see where your functions are efficiently.

4. React/Vue/Angular snippets

   Whichever library you are working with I strongly suggest you download the snippets for them. They will help you with formatting and will give you the formats for things like imports, functions hooks, etc. by starting to type what you want and pressing “tab”. It will be a huge time saver!

5. Styled-components snippets/SCSS Intellisense

   This one is another time-saver. It will show you where your errors may be, attributes that don’t exist that you may have written, and can help you again with formats. The styled-components one is very helpful because without it the code editor will not catch any errors or wrong attributes in your styled components files because the code editor doesn’t know how to check it. This will save you so much time when you accidentally spell something wrong or use the wrong casing like “alignItems” instead of “align-items“.

6. BONUS - Path Intellisense

   This extension can save you so much time on your imports. Instead of having to track down where your files are this will bring in the path for you. This can get a little tricky/not work with scoped imports but other than that works like a charm. This is also great because you can set it to bring in the import when you try to use something that hasn’t been imported yet. Again you have to be careful with scoped imports but this extension is great.

7. BONUS 2!- Atom One Dark Theme and Material Icons

   Let’s be real. Everyone knows the most important part of your code editor is the theme. I use the Atom One Dark theme. I just like the color palette especially for all the different languages I use the color structure just works well for me and makes it easier to read. I also download the Material icons extension because I think they just look better.