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.
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.
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.
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 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.
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.
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.
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.
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!