My Top 10 VS Code extensions

My Top 10 VS Code extensions

ยท

3 min read

This is my first article on hashnode. Hope you find it helpful.

So, in this article I am going to share some awesome VS Code extensions that might help you.

VS Code

VS Code logo Visual Studio Code is very advanced Code Editor with IDE like features. What makes it so popular is the wide variety of extensions available on the marketplace.

Here is a list of some handpicked ones

1) TabNine

TabNine.png TabNine is an all language auto-complete extension for VS Code. It requires no configuration, works out of the box. I would suggest you to use this if you are working on huge project(s). It uses AI and deep learning algorithms to provide smarter ๐Ÿค“ autocompletes. It even understands patterns in your code.

2) Prettier

Prettier.png Prettier is an optional code formatter. Works with HTML, CSS, JavaScript, TypeScript, JSON and many more languages. Highly configurable, you can also set it to format your code on save. Focus on coding, this extension will take care about code formatting.

3) Bracket Pair Colorizer 2

Bracket Pair Colorizer 2.png A must have extension. It pair colors your parenthesis '()', curly braces '{}' and square brackets '[]' so that you can figure out any extra or missing parenthesis.

Example image:- example.png Look at how the brackets are pair colored, VS Code does not have the ability to do this by default.

4) :emojisense:

Emojisense.png Emojisense adds emoji complete suggestions for Visual Studio Code. For unicode type ':' and search for the autocomplete from thr list of suggestions. Also supports markup. Type '::' and follow the same method. Supports display emoji on hover.

Example :- example

5) HTML Snippets

HTML Snippets.png

An amazing extension with lot's of handy snippets for HTML. No need to type the whole tags, just type the name of the tag and hit enter and see the magic โœจ.

Demo:- example

6) TODO Highlight

Todo Highlight.png

Highlights keywords such as "TODO", "FIXME" in your source file. Will help you find out what things are left to be done.

Screenshot :- Screenshot

7) Trailing Whitespace Visualiser

Microsoft.VisualStudio.Services.Icons.Default (1).png

Must for Python developers

Highlights trailing tab characters or spaces at the end of any line in red, so that you can fix them

8) Auto Close Tag

Microsoft.VisualStudio.Services.Icons.Default (2).png

Working with HTML or XML. Keep this extension. This will automatically complete your

<tagname>

with

<tagname></tagname>

9) Bookmarks

Microsoft.VisualStudio.Services.Icons.Default (3).png

Jump to a certain section of your source file with just a click. Bookmark important areas of your code.

10) Path Intellisense

Microsoft.VisualStudio.Services.Icons.Default (4).png

Enables path autocomplete in Visual Studio Code. It may help you linking JavaScript in your HTML file, or maybe much more.




If you feel that I missed your favourite extension, feel free to comment ๐Ÿ‘‡๐Ÿ‘‡.

If you have read this far, consider following me on Twitter (@CodingThunder)