Visual Studio Code is a very accessible code editor for beginners and professionals alike. It’s features that enhance productivity and its integrations with other services make it a great option for development teams.
Below we’ve compiled a list of our favorite extensions and tools that can help you get started.
Auto Rename Tag
While VSCode inherently highlights matching tags and immediately adds closing tags whenever you type an opening tag, Auto Rename Tag automatically renames tags that you change.
The extension works for HTML, XML, PHP, and JavaScript, and removes the need to change your tag names twice.
edit: a few people in the comments have mentioned that Auto Rename Tag is quite buggy, so proceed with care.
GitLens
GitLens supercharges the Git capabilities of Visual Studio Code. This is a powerful extension that allows you to see who, why, and how lines of code have changed over time (among lots of other features).
GitLens is a highly customizable extension. If you don’t like a particular setting, you can easily turn it off in settings.
Remote – SSH
The Remote – SSH extension lets you use any remote machine with an SSH server as your development environment. This makes it much easier to develop and/or troubleshoot in a wide variety of scenarios.
You also don’t need any source code on your local machine, because the extension runs commands and other extensions directly on the remote machine
HTML CSS Class Completion
As awesome as CSS is, it’s hard to remember all CSS classes. This extension auto-completes CSS class names as you type, based on the CSS files in your workspace.
Key Features:
- Customize the directories where the extension will search for files
- Provides manual re-caching for class definition auto completion
- Provides support for PHP, Razor, and Jade
Git History
Similar to GitLens, Git History is a VSCode extension that gives a visual of the git log. No longer should you look through git log in the terminal.
The extension is quite comprehensive as well. It allows you to compare branches, commits, and files across commits. You can also look up Github avatars, which is quite neat.
Settings Sync
Before you start installing extensions left and right, it’s good to know of the existence of Settings Sync. It allows you to sync pretty much everything you customize on VSCode to Github, from settings to keyboard shortcuts to other VSCode extensions.
This way, you’ll have access to your preferred IDE from whichever device you want, instead of having to program from a vanilla VSCode environment on new devices or having to manually set up everything again.
Live Server
This is one of my favorite extensions. Live Server launches a local development server with a live reload feature both for static and dynamic pages.
Every time you save your code, you’ll instantly see the changes reflected in the browser. You’ll be much faster at spotting errors and it’s much easier to do some quick experiments with your code
If you like viewing your HTML in a browser frequently for feedback as you code, this Visual Studio code extension will help you do it. It renders HTML files in your system’s default browser.
Key Features:
- Provides two options to edit, one from context menu and another from command
- Set your default browser according to your preference
- Supports Mozilla, Chrome, Internet Explorer and Safari
Get NgBootstrap snippets, which consist of Angular and Bootstrap 4 snippets, with this helpful extension.
Key Features:
- Typing ngb gives a quick list of the snippets available
- Unfolds snippets as soon as you press enter
- Provides alerts, dropdown, progressbar and many other snippets
jQuery is a powerful JavaScript library. You won’t remember every single function, and with this extension, you don’t need to. jQuery Code Snippets brings a vast library of over 130 jQuery Code snippets to Visual Studio code.
Key Features:
- Provides a quick list of all the snippets after typing ‘jq’
- Sets single or multiple attributes from the matched elements
- Snippets have been added from the 2015 Visual Studio jQuery Snippets
Bower makes building apps easy with its package management capabilities, providing access to most Bower commands within VS Code. With the Bower Visual Studio Code extension, you can install, uninstall, search for, and update packages effortlessly.
Key Features:
- Interactive Bower command prompts have been built in the IDE
- Write, install and uninstall bower.json and other Bower packs
- Find files according to the files you are editing
Git History
Git is the most popular version control system today. It enables distributed version control for modern web apps. Sometimes, you want to be able to re-trace your code to its previous versions and restore that version. The Git History extension gives you the complete Git history, including a history of inline files, all within Visual Studio Code.
Key Features:
- Shows history in graphs and charts according to your preference
- Get multiple history graphs to create a comparison
- Keyboard shortcuts are provided for quick and easy history viewing
Angular Files
Scaffolding can be an important first step when building an app, but it can be complex. This Visual Studio extension lets you quickly scaffold Angular file templates.
Key Features:
- Supports non Angular-cli file structure
- Also supports angular-cli.json with different style extensions
- Provides good support for app structure
Auto-Open Markdown Preview
Previewing markdown files in a parallel window can be a pain due to the need to repeatedly type ‘Ctrl + K V’ or ‘Cmd + KV’. With the help of this Visual Studio Code extension, you can get automatic previews of the Markdown files you open.
Key Features:
- Latest version supports Visual Studio code 1.10.0 and higher
- Removes the need to press ‘Ctrl + K V’ for a preview of the Markdown file
- Shows previews next to the Markdown file you open
vscode-icons
You wouldn’t think icons make a big difference, but they really do (for me, at least). VSCode-icons adds a splash of color and cute little icons to your IDE that I’ve come to love.
CSS Peek
This extension is invaluable for front-end developers. Inspired by a similar feature in the IDE Brackets, CSS Peek allows you to extend your HTML and ejs file to show CSS/SCSS/LESS code within the source code.
It also allows you to quickly jump to the right CSS code if you know the class or ID name.
JavaScript Code Snippets
While VSCode includes built-in JS IntelliSense, JS Code Snippets enhances that experience by adding a slew of import/export triggers, class helpers, and method triggers.
The extension supports JS, TypeScript, JS React, TS React, HTML, and Vue. In the VSCode Marketplace, code snippets for other flavors, such as Angular, are also readily available.
Peacock
Here’s a cute one. Peacock allows you to change the color of your Visual Studio Code environment, so you can quickly identify which instance you’ve just switched to.
Colorize
Sticking with colors, Colorize instantly visualizes CSS colors in your CSS/SASS/Less/… files. This makes it very easy to see at a glance which colors you’re using where.
Code Spell Checker
Although it isn’t life-threateningly important, I prefer my code to have no spelling errors. Code Spell Checker underlines words that it doesn’t recognize in its dictionary files.
The extension is available in many different languages and supports jargon such as medical terms.
Debugger for Chrome
Developed by Microsoft, Debugger for Chrome allows you to debug your JS code in VSCode. Contrary to debuggers in other IDEs, it’s surprisingly smooth.
You can set breakpoints, step your way through the code, debug scripts added dynamically, and more.
Angular v4 TypeScript Snippets
Save time when coding using the snippets you get with this Visual Studio code extension, which adds snippets for Angular for TypeScript and HTML.
Key Features:
- Works with Visual Studio 0.10.1 and higher
- Has been updated for Angular v4.0.0 release
- Keyboard shortcuts to activate snippets from within the editor
Prettier
Prettier is an opinionated code formatter that works particularly well if you have multiple people working on a single project, because the extension enforces a consistent style.
You can set it up so it formats your code every time you save it, significantly reducing the amount of time you need to spend formatting your code.
Bracket Pair Colorizer
The clue’s in the title, but Bracket Pair Colorizer gives the opening and closing brackets matching colors, making it much easier to know which brackets belong together.
Custom bracket characters can also be configured, and you can add a background color to the active scope too.
TODO Highlight
I confess. I’ve been guilty of writing TODOs in my comments to then totally forget about them. TODO Highlight makes them stand out much more.
You can toggle the highlights and can also list all the highlighted annotations and reveal them from the corresponding file.
Icon Fonts
Icon Fonts offers snippets for a variety of icon fonts, including the popular Font Awesome v5 icon pack.
For those of you not using VSCode, this package is also available for Atom and Sublime Text.
Turbo Console Log
The Turbo Console Log extension automates the process of creating a meaningful log message. It makes debugging much easier, because you’ll have some useful console output to figure out what went wrong.
Conclusion
There are many extensions you can install to extend the functionality of Visual Studio Code. Most of them are made by third-party developers, but there are also some official ones.