Top 13 Best VSCode Extensions You'll Actually UseCurated list of the best VSCode Extensions for developers to enhance productivity and make those programming tasks less challenging.
VSCode Extensions are a powerful tool that can enhance your development workflow, allowing you to write code faster, cleaner, and more consistently. With VS Code's rich extensibility model, you can add languages, debuggers, and tools directly to your installation, empowering you to customize your coding environment to your liking.
Installing VSCode Extensions
Visual Studio Code is lightweight by design; most features of other coding tools are available as extensions in VSCode. Just download and enable the ones you want to use. Here are a few ways to download and install extensions in Visual Studio Code.
Browse for VSCode Extensions
Exploring and installing extensions in VS Code is a breeze. Simply open the Extensions view by selecting the View > Extensions menu, the command (Ctrl+Shift+X), or the Extensions icon in the Activity Bar. This will present you with a list of the top VS Code extensions available on the VS Code Marketplace, giving you the confidence to choose the ones that best suit your needs.
When you have chosen an extension you want to use, click the Install button. A Reload button will appear after the extension has been successfully installed. Restarting VS Code after clicking this will enable the new extension. To uninstall an extension, open the Extensions view in Visual Studio Code. Find the extension you want to uninstall and click the Uninstall button next to it. After the extension is uninstalled, you may need to restart VS Code for the changes to take effect.
VSCode Extension Marketplace
You can get extensions through the Microsoft Extension Market. To do this, visit the market's website and search for the extension you want to install. Once you have chosen the extension, click the install button on the website. After the installation is complete, open Visual Studio Code. You will then be directed to the extension's dialogue within VS Code, where you can enable or disable the extension as needed.
When you install a new extension, VS Code must be restarted for it to take effect.
Essential VSCode Extensions for Developers
Without further ado, here is my list of 10 essential VSCode Extensions for developers.
Colour Info
Visual Studio Code extension that provides quick information about CSS colours. Visualise and select colours using a popup colour editor.
Trailing Spaces
VSCode highlights trailing whitespace and delete them in a flash! VS Code provides a way to automate the deletion of trailing spaces by using the Trim Trailing Whitespace command. Depending on your settings, it may be easier to highlight them and delete them by hand at any time. This plugin provides just that and many options to fine-tune the way you want to decimate trailing spaces.
TODO Highlight
Highlight TODO, FIXME and other annotations within your code. Sometimes, you need to review the TODOs you've added while coding before publishing the code to production. So, I've wanted an extension for a long time that highlights them and reminds me that some notes or things still need to be done.
Indent Rainbow
This extension colourizes the indentation before your text, alternating four colours for each step. Some may find it helpful when writing code for Nim or Python.
It uses the current editor window tab size and can handle mixed tab + spaces, but that is not recommended. In addition, it visibly marks lines where the indentation is not a multiple of the tab size. This should help to find problems with the indentation in some situations.
VSCode Icons
This extension replaces the default VS Code icons for a new flat-style theme that is much easier to identify.
TypeScript Hero
TypeScript Hero is a VSCode extension that makes your life easier. When coding a lot of TypeScript, you may want VC Code to organize your imports, outline a view of your open TS / TSX document, add import to the document or add an import under the cursor to the document.
Regex Previewer
No matter how often I use Regular Expressions, I still need help. I need help to write my own Regex correctly. One of the reasons for this is that I cannot verify my Regex on the fly. That is where Regex Preview comes into play. After installing Regex Preview, it will show the preview of your Regex side-by-side. If you play with many regular expressions, give Regex Preview a try and see if it fits your needs.
Angular Language Service
This plugin to VS Code provides Angular language services for Angular.
This plugin will provide completions in template files and template strings and diagnostics for templates and Angular annotations.
Vue.js Extension Pack
Popular VSCode Extensions for Vue.js development providing Syntax highlighting, Code format, Code snippets, IntelliSense, Linting support, npm & node tools.
Extensions Included in this pack
- vetur - Vue tooling for VSCode
- vue-peek - Allows peek and goto definition for Vue single-file components
- auto-rename-tag - Auto rename paired HTML/XML tag
- auto-close-tag - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
- npm - npm support for VS Code
- JavaScript (ES6) Snippets - Code snippets for JavaScript in ES6 syntax
- NPM IntelliSense - Visual Studio Code plugin that autocompletes npm modules in import statements
- Path IntelliSense - Visual Studio Code plugin that autocompletes filenames
- ESLint - Integrates ESLint into VS Code.
- Prettier - Code formatter - VS Code plugin for prettier/prettier
- Formatting toggle - VSCode Extensions that allows you to toggle the formatter on and off with a simple click
Download Extension from Microsoft
Prettier - Code formatter
Prettier is a VS Code package that allows you to format your JavaScript / TypeScript / CSS using Prettier.
Download Extension from Microsoft
REST Client
REST client might be one of the best extensions I have used in a while, as it allows you to send HTTP requests and view the responses directly in VS Code. I like Postman to death, but I also prefer keeping as much stuff as possible in one environment, so REST client was the perfect balance between having a functioning tool to test my APIs and not ever having to leave my code editor.
Fira Code
Fira Code is one of the best programming fonts with ligatures that can help you scan code much faster once you get used to it. It takes a few steps more than installing an extension to set it up as your editor's font, but it's easily located. If you want to make your code look better, impress a colleague or make those comparison operators easier on the eyes, this is worth checking out.
Installation is more complex than an extension; however, there are comprehensive instructions on the author's website. Installation for Visual Studio Code and Visual Studio 2017
VSCode Spotify
Provides integration with Spotify Desktop client to control Spotify inside VS Code.
