Having a good text or code editor that fits into your workflow is crucial to productivity as a developer. VS Code comes stocked with a lot of features by default, but here are 7 extensions that will help take your workflow up another level.
- What is VS Code?
- VS Code Extensions
- Sublime Text Keymap and Settings Importer
- Import Cost
- Rainbow Brackets
- Settings Sync
- Profile Switcher
- Better Comments
- Duplicate Action
What is VS Code?
A quick note in case you’re not familiar. VS Code, which is short for Visual Studio Code, is a popular text or code editor that’s maintained by the Microsoft team.
It’s grown a tremendous share of the developer market over the last year or two making it the go-to editor for web developers.
Coupled with the fact that Microsoft is investing a lot of time into it and independent developers are building a ton of extensions, you can’t go wrong with giving it a shot.
VS Code Extensions
Part of what makes VS Code great is it’s extensibility. It allows developers to creatively take the editor to another level by implementing features Microsoft may not want to support or even building a whole note-taking experience on top of it with Foam.
While there are thousands of extensions available in the VS Code Marketplace, these are the 7 that are critical to my workflow as an active developer.
Sublime Text Keymap and Settings Importer
Before moving to VS Code, I was a Sublime Text 3 user. It’s still a great text editor, but when moving to VS Code, a lot of the shortcuts and key mappings weren’t the same.
Sublime Text Keymap and Settings Importer let me first import my settings from Sublime text, but it also set up the default key mappings. This made shortcuts that were available in Sublime immediately available in VS Code.
This includes two of my favorites like multi-select (selecting something then pressing CMD+D / Ctrl+D) and duplicating a line (adding a cursor on a line and pressing CMD+Shift+D / Ctrl+Shift+D).
Sublime Text Keymap and Settings Importer (marketplace.visualstudio.com)
Modern day developers have to constantly deal with dependencies coming from various sources. As we pull in a bunch of different code to build our project, that additional code comes at a cost.
Import Cost calculates an estimate of the size of an import allowing us to see how much additional weight we would be adding to our project size with that added dependency.
This helps us recognize the size of our dependencies, preventing accidental overload of huge libraries that could impact performance and hurt our customer’s user experience.
Import Cost (marketplace.visualstudio.com)
Style is an important factor in making our code readable. Part of that style is how we indent our code, so we understand nesting of different code blocks.
The issue is sometimes that nesting can grow pretty large and it can be difficult to try to find which opening tag belongs to which closing tag.
indent-rainbow adds colors to the indent spaces, allowing us to easily line up and see which tags belong to each other.
Similar to indenting, complex code, particularly when using math, can create easily confusing lines of code when you have multiple uses of parenthesis within the same statement.
For instance, if we want to apply some simple math:
const value = (((1+1)*2)+1)*2;
And while that’s a simple example, that can easily get out of hand and hard to track.
Rainbow Brackets highlights the parenthesis in different colors allowing us to get a better idea which opening bracket belongs to which closing bracket of our equation.
Rainbow Brackets (marketplace.visualstudio.com)
If you typically work between two laptops or two different environments, you might have to manually maintain keeping your text editor the same, if you’re particular about your setup (like I am).
Settings Sync allows you to save your VS Code settings in a GitHub Gist. This lets you sync those settings across different VS Code installations
Settings Sync (marketplace.visualstudio.com)
Note: if you want to learn more, I wrote a tutorial that walks you through setting this up step-by-step!
As a content creator, I need to make sure that when I’m showing my screen to others, that I’m using accessible colors and font sizes that allow people to easily see what I'm demo'ing.
The issue is those settings aren’t what I like to use day-to-day when I’m heads down coding.
Profile Switcher allows you to set up multiple VS Code profiles each with their own configuration allowing you to easily switch between different setups.
Profile Switcher (marketplace.visualstudio.com)
While they might not seem important when you’re writing code, comments are critical to helping others understand that code. They also typically help you understand it when you look at it a year down the road.
Those comments are helpful, but they can be hard to read, as they’re typically all one gray color that doesn’t necessarily stand out.
That’s where Better Comments comes in, which adds a kind of syntax highlighting to the comments, adding color to keywords and statements that helps the readability of your code comments.
Better Comments (marketplace.visualstudio.com)
This last one seems like a small thing, but for some reason, VS Code doesn’t come with the ability to right click a file and duplicate it by default.
When I’m heads down in code, I’ll typically duplicate a file, like an existing template, which allows me to only change the content. This makes creating a new page more productive.
Duplicate Action simply adds the Duplicate File or Folder option to the context menu when you right click a file or folder.
Duplicate Action (marketplace.visualstudio.com)
What’s your favorite extension?
There are a ton of extensions out there that do amazing things – what’s your favorite? Let me know by sharing with me on Twitter!