Making VSCode Your Own

VSCode has almost 5 million active, monthly users. If you’re one of them, let’s talk. 

No matter how much time you spend using Visual Studio Code on a given day—whether it’s one hour or ten—it’s worth making the editor fun and easy to use. Even taking a few minutes to customize and familiarize yourself with the settings and functionality of VSCode can greatly improve your productivity and minimize pointless frustration while working on whatever coding project you’re tackling at the moment. 

Choosing a color theme for your IDE can have a real impact on your overall coding experience. The trick is finding one that’s right for you. If you’re worried about eye strain from long hours of staring at a screen and haven’t already invested in a pair of blue light blocking lenses, consider a darker theme, or a lighter theme with a warm undertone. If you have difficulty reading text on a screen, consider a high-contrast theme. VSCode comes with a few built-in themes (you can find it with File/Code > Preferences > Color Theme), but if you don’t find what you’re looking for, there are a few more ways to find that perfect IDE theme. 

Extensions

The VSCode marketplace has thousands of color theme extensions available for download, for free! If you want to feel like you’re hacking into the mainframe of the CIA, maybe UstymUkhman’s Matrix Theme is for you. Or maybe you want something a little lighter and softer, in which case, Shira’s Pastel Forest Theme might be a great option. Simply typing “color theme” (along with any specifications you already have in mind) into the extensions tab of VSCode will provide you with a plethora of options to pick from. 

Make your own

If the marketplace doesn’t have what you’re looking for and you’re looking for a way to procrastinate while still feeling like you’re coding something, check out this Medium post with info on how to make and publish your very own VSCode theme. 

Edit VSCode user and workspace settings

Beyond color, other settings, such as the font and cursor settings, can contribute to the overall theme of your IDE. These can be customized in the user-friendly Settings page (File/Code > Preferences > Settings), or in the settings.json file (this post has some helpful suggestions for the latter). 

Step 2 - Master the art of the shortcut. 

Shortcuts. What’s not to love? Think about how often you use the Copy and Paste commands. All it takes is a little upfront dedication to memorizing some key combinations; your future self will thank you for taking the time to make writing and editing code that much easier. 

Keyboard shortcuts

Add the list of shortcuts for your respective operating system to your summer reading list: shortcuts for Windows, shortcuts for Mac, and shortcuts for Linux. VSCode also gives you the option to customize your keybindings. You can add your own on the Keyboard Shortcuts page (File/Code > Preferences > Keyboard Shortcuts), or download extensions from the marketplace to mirror popular keymappings (Vim, Atom, Sublime, to name a few). 

Snippets

Snippets are a great tool for creating code templates, like loops or conditional statements. Using IntelliSense, VSCode has some built-in snippets for common functions, but you can create your own, as well (File/Code > Preferences > User Snippets).

Step 3 - Hack your formatting

Well-formatted code is a must in the world of programming, so why not let VSCode fix your code for you? 

Auto-formatting

VSCode has an auto-formatting keyboard shortcut (all the more reason you should check out the shortcuts from the previous section), along with language-specific extensions for code beautification, like Prettier. 

Linters

A linter goes one step further than auto-formatting, catching programming errors, bugs, and suspicious constructs, in addition to stylistic errors. Here at HSA DEV, we use ESLint to ensure our code looks great and functions properly.