VSCode offers many helpful features out of the box; however there are a ton of opportunities to add even more useful tools through extensions and settings. This gist will walk through my current setup and which add-ons/configurations will be helpful in different use cases.
Here are some general tips and tricks for using VSCode.
Almost any VSCode command can be found using the Command Palette. To open it, type Ctrl+Shift+P.
Even if developing in raw JavaScript, VSCode's TypeScript integration can infer many types. To view external library types, try hovering variable names or imports. If a type shows up, try right-clicking and selecting Go to Definition or Go to Type Definition to view the library's type information.
VSCode also offers a beta-channel release, called VSCode Insiders. Insiders has a green logo instead of a blue one, and I personally have rarely ever run into any issues with bugs, so I would recommend using it if you're interested in more cutting-edge functionality.
Much of the power in what VSCode has to offer comes through extensions (fun fact - many of VSCode's current developers were recruited due to their contributions to the community through the extensions they built).
Regardless of what you're working on, these extensions should prove to be useful.
This is the single most important VSCode extension. If you don't have it yet, install it immediately.
In your file explorer, you'll be able to see the Git status of any files in your workspace. This includes modified files, added files, deleted files, files with conflicks, untracked files, and even fades out files ignored through .gitignore.
Additionally, your active line will show information related to its most recent change or commit, and when hovered will show a tooltip with additional information.
There's a vast amount of functionality built into this extension that I haven't covered, but you can browse through it all using the link above.
VSCode (with the help of language extensions, see below) has used Intellisense for a long time to aid with code completion and other common helpful editor features. IntelliCode is a relatively new extension that adds AI into the mix - it's parsed all GitHub repositories with over 100 stars to identify the most common code patterns, and will make intelligent recommendations based off of its findings as you type.
This one is my personal favorite. WakaTime is a developer dashboard supporting a wide variety of editors, including Vim. By signing up for an account on their websites and adding your API key to VSCode, all of your programming activity will be tracked and saved for up to one week with a free account. While you won't be able to see back further than that, WakaTime also sends you weekly activity reports. If someone asks you how much time a specific class takes, you won't need to estimate any more, as you can just go back to your weekly reports and see for yourself.
Another one of my personal favorites, his extension colors each bracket pair ([], {}, ()) according to how deeply nested it is. Especially for languages like JavaScript where you have ridiculous amounts of nested parentheses, this extension will help you understand which bracket you're closing at any time and significantly improves visual clarity. Additionally, it will outline the deepest bracket group enclosing the active line to help you understand which current "level" you're on. By default, this extension only has three colors, but you can completely customize it, for example by adding the following to settings.json.
{
"bracket-pair-colorizer-2.colors": [
"rgba(255, 102, 102, 1)",
"rgba(255, 179, 102, 1)",
"rgba(255, 255, 102, 1)",
"rgba(179, 255, 102, 1)",
"rgba(102, 255, 102, 1)",
"rgba(102, 255, 179, 1)",
"rgba(102, 255, 255, 1)",
"rgba(102, 178, 255, 1)",
"rgba(102, 102, 255, 1)",
"rgba(178, 102, 255, 1)",
"rgba(255, 102, 255, 1)",
"rgba(255, 102, 179, 1)"
]
}This one is pretty simple. Comments prefixed with particular values (e.g. TODO) will be highlighted in a different style to make them stand out from the rest.
Tools like Carbon are a nice way to save your code as images for use in documents or presentations - Polacode is a VSCode extension that you can open up in-app and then select text which will be saved to an image.
Switching your VSCode setup from computer to computer can be very annoying if you need to install a bunch of extensions and change your settings. This extension allows you to save all of your customizations externally and then import them. You can also share your settings with others and they'll be able to set it up automatically. This feature is actually going to be natively supported by VSCode and currently is already available in the Insiders release, but for now you'll need to use the extension.
Development on a remote system is only going to become more common in the future, and VSCode has a variety of extensions to help with remote development for SSH, WSL, and Docker containers. Even when on a remote system, VSCode has full filesystem support, and you can easily move files between your local and remote systems. Additionally, for web applications, you can run the application on the remote server and view it locally in your browser.
These are the extensions I personally use for purely aesthetic purposes.
These two go nicely together, and Material Icon Theme also has additions to support React and Redux based icons. Personally, out of Material Theme's offerings I like Material Theme Darker High Contrast.
The following extensions will prove particularly useful for any web or JavaScript-focused workspaces.
The ESLint extension will show in-editor warnings and errors as corresponding to ESLint defaults. If you have a valid ESLint configuration file at your workspace root, the plugin will use that configuration (and any associated plugins) instead of the default.
The Prettier extension will allow VSCode's formatting tools to use Prettier's rules. This is especially useful with automatic editor formatting rules set to true in VSCode's settings. As with the ESLint plugin, this will also follow along with configuration files at the workspace root.
This extension helps with NPM package autocomplete and will also let you know if your node_modules folder doesn't match what's indicated in package.json or package-lock.json.
These two are nice to have with HTML and JSX tags but aren't anything extraordinary. Auto Rename Tag is a bit buggy, so it could definitely be left out.
Extensions exist for practically any language you can think of.
These two extensions (as well as many others for different programming languages) offer many tools such as syntax highlighting, formatting, and linting.
This is similar to the other ones, except in that it only offers syntax highlighting. The Haskell Language Server extension offers more rich functionality but is harder to set up (for example, I couldn't get it to work with the CS 421 Haskell setup, albeit with a limited amount of time to test out).
These two help with any Markdown editing. Markdown All in One will help with syntax highlighting, formatting, and will also allow you to preview your Markdown files in app (along with more functionality). markdownlint, on the other hand, offers similar functionality to the ESLint plugin. To disable markdownlint rules (for example the very-annoying line-length rule), you can modify settings.json as follows.
{
"markdownlint.config": {
"MD013": false
}
}There are two ways to edit VSCode settings - through a UI or through settings.json (I prefer the latter), which can both can be accessed through the Command Palette. An example settings.json is shown below.
{
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.tabSize": 2,
"[c]": {
"editor.tabSize": 4
},
"[python]": {
"editor.tabSize": 4
},
"terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\bash.exe",
"files.eol": "\n",
"editor.fontFamily": "'Fira Code Light', 'Cascadia Code', Consolas, 'Courier New', monospace",
"editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'ss19'"
}The formatOn<{Paste, Save, Type}> family of options can make code formatting something you never have to think about anymore. However, be careful if you have conflicts between different formatters installed on your system or a broken version of an extension.
{
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true
}Settings can be set for specific languages as follows.
{
"editor.tabSize": 2,
"[c]": {
"editor.tabSize": 4
},
"[python]": {
"editor.tabSize": 4
}
}If developing on Windows or WSL, the following settings may be useful.
{
"terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\bash.exe",
"files.eol": "\n"
}Fira Code Light is my favorite font to use for programming, though Cascadia Code and VSCode's default Consolas are also good choices. Fira Code also supports ligatures, which are modifications to characters or combinations of characters, such as arrow signs or not-equals symbols.
{
"editor.fontFamily": "'Fira Code Light', 'Cascadia Code', Consolas, 'Courier New', monospace",
"editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'ss19'"
}