10 Visual Studio Code Extensions that Will Make You More Efficient

in Frontend, Backend by Marcin on December 17th, 2020

According to StackOverFlow’s 2019 developer survey, Microsoft’s Visual Studio Code is the most popular code editor among programmers. The reason why developers choose VS code is the fact that it allows them to customize and extend its functionality so much. When it comes to speed and efficiency and saving time while coding, extensions in your code editor seem to be crucial. However, an endless number of plugins can cause headaches. Therefore, I decided to talk about my favorite extensions that’ll make you a more productive developer and make your life so much easier.

Auto-Close Tag

Auto-Close Tag

This extension is a must-have. Missing a close tag can be very irritating, especially if you’ve just started your coding adventure. At the beginning this kind of mistake occurs commonly. Auto-Close Tag adds the closing bracket of the opening tag automatically, so that you can be sure that no bugs appear!

Download here: Auto-Close Tag

Auto-Rename Tag

Auto-Rename-Tag

Instead of changing open and close tags by yourself, you can use Auto-Rename Tag and do this simultaneously. Start changing an open tag and its close tag will change automatically. This is very useful, especially when you have a lot of nested code.

Download here: Auto-Rename Tag

Prettier

Prettier

Prettier is considered to be one of the crucial plugins in daily work as a programmer. It lets you save a lot of time which in other case you would waste formatting your code and taking care of its readability. Prettier works very well with JavaScript, TypeScript, HTML, CSS, Markdown and others.

Download here: Prettier

ESLint

ESLint

It allows you to forget about common errors.The difference between ESLint and Prettier is the fact that the first extension is more focused on detecting errors while the second one is rather focused on correcting formatting. It manages your code pretty easily and auto-formats it after pressing a save button. If there are any problems, ESLint shows you warnings with more detailed information and/or hints. What is more, you’re able to fully customize it. When you’re ready with your own settings, you need to be sure that automatic fixes work on saving by adding { "eslint.autoFixOnSave": true } to settings.json.

Download here: ESLint

Bracket Pair Colorizer

Bracket Pair Colorizer

Having tons of nested code can be painful for most coders, especially when a project is big. Trying to match brackets with each other is definitely time-consuming but in some cases it may even seem to be impossible. Therefore, I highly recommend taking advantage of using this extension.

Download here: Bracket Pair Colorizer

Material Icon Theme

Material Icon Theme

Sometimes you can feel lost when you are trying to figure out a structure of your project in a code editor. However, with this extension this process will become more user-friendly. Material Icon Theme gives your files and folders simple icons which increase the clarity of this list.

Download here: Material Icon Theme

TabNine

TabNine

TabNine is one of the greatest shocks I experienced when it comes to VS code extensions. It is based on machine learning technology and helps you to write your code by autocompleting it. It works with all languages and the relevance of its hints is astounding. When you start using TabNine, you’ll be amazed how quickly it learns and how much faster and easier your work will become.

Download here: TabNine

Path Intellisense

Path Intellisense

Remembering a whole file’s path that you want to import is completely redundant. Unfortunately, it can cause issues and that is why this is the moment where Path Intellisense comes to aid. After having been installed, it’ll start showing you hints of next directories or files you can use.

Download here: Path Intellisense

ES7 React/Redux/GraphQl/React-Native snippets

ES7

This is one of those extensions which can make your code writing process significantly faster. If you are not a great fan of writing boilerplate code or you’d just want to become more efficient - this is definitely for you. In your VS code you can check a list of commands very easily, which ES7 provides.

Download here: ES7

Quokka.js

Quokka.js

Quokka is a very useful extension which lets you write your JavaScript code and test if it does what it should in real time. Results of these verifications are displayed in your IDE, on the right side of your code.

Download here: Quokka.js

To conclude, extensions seem to be a blessing, however, you should be aware of the fact that it’s highly recommended to keep your code editor as light as possible. So try to install only these plugins which you really need but remember: don’t be afraid to experiment with them!


← back to the blog

You May Also Like

Dump Links #3 - Make a Clean Code

by Kamil in , on October 20th, 2015

Another portion of cool tools found on the Internet and useful in developer's everyday life.

Dump Links #2 - JavaScript Tools

by Kamil in on September 30th, 2015

Previous part of the „Dump Links” was about server side languages. Today I'm gonna show you tools written using JS. But not only...

Dump Links #1

by Kamil in on September 21st, 2015

In DeSmart we find interesting things every day. I found it very useful and I'll try to share all those interesting things on our Blog. I'll mostly write about PHP, Frameworks, CSS and all technology news.

Interested in Creating a Successful Project?

Contact us and together we'll bring your ideas to life!