This is part of an on-going series on productivity in Visual Studio Code. Earlier entries have focused on keyboard shortcuts, you can find Part 1 here Be sure to check out Part 2 and Part 3 as well.
This week’s post is going to change course slightly and talk about a different way to increase productivity in Visual Studio Code. Rather than focus on keyboard shortcuts, this time the focus will be on extensions. If you’re not familiar with VSCode extensions, I suggest first reading up on them here.
Settings Sync is a helpful extension that does exactly what the name implies, it allows you to sync your settings. But what does it sync them to? Your github profile! This allows you to seamlessly sync all of your settings between multiple devices, so that you don’t have to re-configure your environment every time you use a new machine. This makes it easy to keep a work and personal device configured the same way, and if you make a change on one, the next time you open VSCode on the other(s), the change will be reflected there as well. This extension syncs just about anything you may wish to configure in VSCode, including settings, keybindings, and even other extensions. This is also extremely useful for quickly getting back up to speed should you be configuring a new machine, or starting a clean install of an existing one.
Do you sometimes get confused by layers of brackets or parentheses? Bracket Colorizer to the rescue. This highly configurable extension will set matching pairs of both square, [], and curly, {}, brackets, as well as parentheses, (), to assorted colors. The extension can be configured to include additional bracket characters, as well as custom colors.
Auto Rename Tag allows you to edit an HTML/XML, PHP, or JavaScript tag, and have the corresponding tag pair be renamed as well. Gone are the days of having to hunt for the correct closing tag when changing from one tag type to another. Not only will this extension help with editing existing code, but it will also increase your productivity when writing new code. The extension will also auto add a closing tag whenever you type an opening tag.
Live Server enables you to quickly and easily launch a local development server that has a live reload feature for both static and dynamic pages. This allows you to easily test your current project, as well as quickly see changes you make to your code take effect. You can easily start or stop your server with a single click from the VSCode status bar. The extension also has several configuration features, including the ability to set a customizable port number, server root, and default browser.
Be sure to check back in the future for even more Visual Studio Code productivity tips.