20 Brilliant VS Code Extensions & Themes To Use In 2020

We are now going into 2020, and the VS Code extension library is bigger than ever. Here are 20 brilliant VS Code Extensions that are well worth a look at this year.

1. Prettier

Prettier is one of the popular code formatter used by developers. It formats the code in a proper and standard way.

The reason for using a formatter like prettier is to make sure that all the developers in the team are using a single standard styling.

2. Bracket Pair Colorizer

Bracket Pair Colorizer makes matching brackets highlight with a different colour to differentiate the block of code.

This helps a lot if you have thousands line of code and it helps you to debug in an efficient way.

3. ES7 React / Redux / GraphQL / React-Native snippets

If you’re a React developer. This is a must-have extension, period. It helps you to save a lot of time by generating particular snippets with defined keyboard shortcuts.

You can search the snipper in the VSCode using the shortcut CMD/Ctrl + Shift + P

4. Git Lens

If you’re working in a team and want to know who modified the code in the code itself. GitLens is your answer in VS Code.

This extension helps you to visualize the code authorship quickly at a glance and you can seamlessly navigate and explore Git repositories.

5. Colorize

This extension is another must-have if you are a front end developer. It helps you to visualize the CSS colors in the code itself, which is pretty damn awesome if I must say.

6. Live Server

In previous days of web design and development. if we want to test something in the browser, we have to put those files in the apache server (XAMPP/MAMP) to test it.

Nowadays, you can do that in the VSCode itself using the live server extension, which of course saves time and disk space from installing third-party software.

7. TODO Highlight

This extension helps you to highlight the TODO’s and FIXME within comments.

It will help you to remind the pending features and bug fixes which can save you a lot of development time.

8. ESLint

ESLint is a pluggable linting utility for Javascript. In simple words, every developer follows a different style of coding in development.

Some use single quotes for variable assigning and some use double-quotes. To make a standard within the team. Linting will come in handy.

9. Debugger for Chrome

This extension helps you to debug javascript code in the chrome browser or any other target that supports the Chrome Debugger protocol. This is an extremely handy extension as JavaScript can act in some really peculiar ways sometimes. Debug like a pro with Chrome Debugger.

10. indent-rainbow

This extension solves the same problem as bracket pair colorizer but, in a different way. If you like to differentiate the block of code with different line colors. then, this extension is for you.

11. Markdown All in One

If you play a lot with markdown in your development(Example Gatsby). then, Markdown All-In-One is perfect.

This extension helps you quickly generate markdown snippets with defined keyboard shortcuts.

12. Vetur

Vetur is a Vue extension-tool for VS Code. It Aids with syntax highlighting, snippet generation, debugging, formatting, linting and more for JS Vue projects.

13. Code Spell Checker

This extension helps you to check the spelling for source code. it is a basic spell checker that works well with camelCase code. Just because all of us devs like to type at 100MPH and are prone to typos!

14. Auto Rename Tag

As the name suggests, this extension helps you to auto rename the HTML tag. it can be helpful for front end development since it auto renames the HTML tags. It may only save a couple of seconds each time it’s used but it simply makes life easier.

 

15. Turbo Console log

This extension automates the process of writing meaningful log messages. you just need to select the variable and press CMD/CTRL+ALT+L.

16. vscode-icons

VSCode-icons brings the icons for all the files and folders within your solution. It takes away the ‘>’ arrows and replaces them with nice to look at icons.

Themes

In addition to all of the above extensions Here are some of the most popular themes available for VSCode.

17. Flat UI Dark

Install Flat UI Dark from here.

18. One Dark Pro

Get OneDarkPro here.

19. Dracula

Get the beautiful Dracula theme here.

20. Atom One Dark Theme

Find the theme here.

 

 

 

And that is it, if you have any recommended extensions, please drop them into the comments!

 

SHARE ON
20 Brilliant VS Code Extensions & Themes To Use In 2020

You May Also Like

Leave a Reply

Your email address will not be published.