Top 15 Visual Studio Code Extensions in 2019

As a developer, you want to be efficient with your time and automate where you can. Here are 15 VS Code extensions you should be taking advantage of today.

Visual Studio Code is one of the most popular IDEs available in the market, and it has been making waves for some time now. As developers, we need to automate most of our process. Thankfully, VS Code offers extensions that’ll enable us to extend the capability of the code editor.

In this article, I’ll be sharing the top 15 VS Code extensions you should be using in 2019 to boost your productivity as a developer. VS Code provides a host of extensions, ranging from linters, debuggers, snippets, keymaps, themes and a lot more. All of these are located in the VS Code Extension Marketplace.

Import Cost

The Import Cost extension is great for viewing the package size at a glance for imported packages. This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babel-webpack-plugin in order to detect the imported size.

Quokka JS

Ever had the need to test out a JavaScript code and you had to spin up the console in Chrome DevTools? Never again! I’ll introduce you to Quokka.js. This extension is a live scratchpad for JavaScript, and it serves as a rapid prototyping playground in your editor, with access to your project’s files, inline reporting, code coverage, and rich output formatting.

Turbo Console.log

Turbo Console Log is a VS Code extension that helps you automate logging statements across your codebase. It works by selecting a variable and quickly writes the whole console.log statement with keyboard shortcut ctrl + alt + l for Windows or cmd + opt + l for Mac. In addition, it is also possible to remove all console.log statements at once.

Night Owl

The Night Owl theme is one of my favorites themes, and has an impressive 240k installations from the marketplace. This theme is ideal for fans of dark mode themes — fine-tuned for people who love working late at night, and the color choices take into consideration the level of accessibility for people with color blindness and in low-light circumstances.

Azure Functions

The Azure Functions extension for VS Code is really handy. It allows you to create, debug, manage, and deploy Azure Functions directly from VS Code, which makes the entire process of working with Azure Functions seamless.

Path Intellisense

The Path Intellisense extension is another great tool to give a try. It helps you automatically complete filenames. When working on large codebases, it can become a pain when you need to look up path names for files or directories. This extension provides intellisense for files and will save you time looking up a file name.

ESLint

The ESLint extension is quite handy for writing clean code. This extension helps you integrate ESLint into your editor such that your code is automatically formatted, and also linting is enabled for errors and warnings. With over 18 million downloads, this is one of the most-downloaded extensions.

Prettier

Manually formatting code can be a pain for developers and mostly slows you down while coding. This is why it is important to automate things like formatting so you don’t have to worry again. The Prettier code extension helps you format your code so you don’t have to manually do it. Prettier is really popular and used by a lot of developers, and this is why it has an approximate 7 million downloads.

Live Server

The Live Server extension provides you with a quick development Live Server, with live browser reload enabled for static and dynamic pages. The cool thing about this extension is it has a go-live button on the taskbar, so you can easily spin up a development server at any time and it works seamlessly.

Vetur

The Vetur extension is the official Vue tooling for VS Code. This extension helps Vue.js development with features like syntax highlighting, linting/formatting, emmet support, and code auto-completion. The extension is really popular, with over 10 million downloads from the marketplace. If you’re developing with Vue.js, you should definitely have this extension installed.

GitLens

The GitLens extension is a very powerful extension for VS Code. It helps to supercharge the git capabilities built into VS Code. Some of the features it supports include the ability to visualize code authorship, you can view git blame and also see the history of a file with diff enabled, which is super cool.

Polacode

Polacode is a VS Code extension for creating fancy screenshots for your code snippets. How does this work, you ask? It’s as easy as installing the extension; then you can then spin it up and copy the code to paste it in Polacode; then you can download as an image.

Bracket Pair Colorizer

Many times I’ve had issues identifying matching brackets in a deeply nested codebase as a result of having no differentiating factor between all brackets. But with the Bracket Pair Colorizer extension, which is one of my favorite extensions, it is possible to match brackets in my codebase with matching colors, allowing me to easily select a scope of the code block with ease.

Settings Sync

Settings Sync is a great extension that enables you to synchronize settings, snippets, themes, file icons, keybindings, and extensions across multiple machines using GitHub gist. This way, it is easier to migrate to a new system without losing any of your customized VS Code settings.

Debugger for Chrome

Quite a lot of developers use the console.log method for debugging, which is okay, right? But they miss out on the awesome capabilities of the Chrome Debugger. The Debugger for Chrome extension is an official extension for debugging your code directly in VS Code. And this is by far a better experience for debugging your code.

Conclusion

In this article, I’ve listed the top 15 extensions to give a try in 2019, but this is in no way a complete list of great extensions to try. VS Code has a huge library of extensions, and there are more extensions to check out that will help you increase productivity when writing code and which are available on the marketplace. Feel free to leave a comment if you find any of these helpful and if you have suggestions for other extensions I can check out.

For More Info on Building Great Web Apps

Want to learn more about creating great web apps? It all starts out with Kendo UI  - the complete UI component library that allows you to quickly build high-quality, responsive apps. It includes everything you need, from grids and charts to dropdowns and gauges.

Learn More about Kendo UI

Get a Free Trial of Kendo UI