Get the most out of VS Code

Even the best tools are useless if we don't know how to use them. VS Code is an advanced editor with many features that can help us develop apps faster and better. Let's take a look at a short list of tips and tricks that will help us get the most out of VS Code.

All keyboard shortcuts mentioned in this article are the default ones - they won't work if you have changed them. For simplicity I omitted MacOS shortcuts.

Use extensions

One of the biggest strengths of VS Code is its extensibility. There are many extensions available that can help us in our daily work. They provide support for additional languages, improve the editor itself, make working with git easier and much more. Extensions can be installed from the official marketplace or directly from the editor. However, there are two important things to remember:

1. Extensions can be a security risk - it's recommended to only install well-known extensions from trusted authors.
2. Extensions can slow down the editor - installing everything that "may be useful in the future" is not a good idea.

Get familiar with keyboard shortcuts

Another great feature of VS Code is its broad support for keyboard shortcuts. Using them can significantly speed up our work. For example, to open a file we can use Ctrl+P and start typing its name. We can also use Ctrl+Shift+P to open the command palette and execute any command (and they are really useful!).

We can use File / Preferences / Keyboard Shortcuts or Ctrl+K Ctrl+S to open a screen with the complete list of available actions and assigned shortcuts. The screen also allows us to change these shortcuts. You may notice that some of these shortcuts are more complicated than simple Ctrl+C. That's because there aren't enough simple key combinations to handle all these actions. For example Ctrl+K Ctrl+S means "press Ctrl, press K, depress K, press S", while Ctrl+K S means "press Ctrl, press K, depress Ctrl and K, press S".

Here is a list of the most common shortcuts.

Get more space

Being able to see more code at once is a great advantage. We can open multiple files (or the same file at different scroll positions) and arrange them in different ways. We can also open file previews e.g. when editing a Markdown file. However, not everyone has three 4K displays. Fortunately, VS Code has some features that can help us get more space. Don't need the sidebar? Just hide it with Ctrl+B. Want to go fullscreen? Use F11. Or we can go straight to Zen Mode with Ctrl+K Z.

Manage editor groups

Editor groups are tab components that contain opened files. We can have multiple editor groups and arrange them in different ways. We can also move files between them. Switching between editor groups can be done with mouse or keyboard shortcuts such as Ctrl+1, Ctrl+2, ... or Ctrl+K Ctrl+Arrow. Another neat feature of editor groups is maximizing the selected one with "View: Maximize Editor Group" command or by double clicking on a file tab.

Use line actions

We often need to insert a line above or below the current one, delete or select a whole line etc. We can do it with mouse, but it's much faster to use keyboard shortcuts:

• Ctrl+Shift+K deletes current line(s) (or all selected lines)
• Ctrl+Enter inserts an empty line below
• Ctrl+Shift+Enter inserts an empty line above
• Ctrl+L selects current line(s)
• Ctrl+D selects current word
• Ctrl+/ toggles line comment (works with multiple lines too)

Use multiple cursors

Another useful feature is multiple cursors. We can use them to edit code in multiple places at once. We can add cursors with Alt+Click or Ctrl+Alt+ArrowUp or Ctrl+Alt+ArrowDown. To go back to single cursor mode we can click somewhere in the code or press Esc.

Use project files effectively

One annoying pattern I've encountered in many projects is creating a separate folder for each React component and putting component's code in index.ts file. This results in dozens of index.ts files being opened in the editor. VS Code will show folder names in tabs, but it's still hard to tell which file is which and each tab takes more space. That's why I recommend using more descriptive file names. index.ts can still be used to re-export the component.

In VS Code's sidebar there are two sections: Open Editors and Project file tree. I find the first one rather useless - I can see opened files in tabs and that sections takes some space. That's why I prefer collapsing it and using Project file tree instead. Here I can see current file, its parent folders, adjacent files and other files in the project. I can easily open another file or create one. Folders can be collapsed to keep the tree clean.

Simplify working on remote projects

With VS Code we can work on remote projects as if they were local. It works not only with remote machines - VMs, WSL and containers are supported too. Setting this up is easy and official docs provide detailed instructions on how to setup and use Remote Development using SSH.

Use the power of VS Code's search and replace

Search/replace in the sidebar

There are many useful options in VS Code's search and replace feature. For searching, we can enable case sensitivity, whole word matching and regular expressions. We can also include/exclude files and folders or search only in open editors. When using "replace" function, we can use capture groups from regular expressions in the replacement string. It's also possible to preserve case of the matched string. For example, if we want to replace all occurrences of "fooBar" with "loremIpsum" with case preservation, "fooBar" will be replaced with "loremIpsum" and "FooBar" will be replaced with "LoremIpsum". To open the search/replace bar we can use Ctrl+Shift+F and Ctrl+Shift+H or we can use mouse.

Search/replace in current file

Both of these features have the same options as the sidebar search/replace (except "include/exclude files"). There is also an option to search/replace in selection only. To open the search/replace popup we can use Ctrl+F and Ctrl+H.

Use git integration

VS Code with extensions such as GitLens — Git supercharged and Git History can help a lot when working with git repositories. We can see who changed a line, when and why, we can see the whole history of a file, we can compare branches and commits, we can see the whole repository tree and much more. Command "Git: View History (git log)" is very useful when doing code reviews or finding removed code. Of course the above extensions are just examples - you can browse the marketplace to find alternatives and extensions that offer different features.

Format code on save

When we develop code, we want to keep it clean and readable. Unfortunately, it takes time and effort to do it manually. Fortunately, we can use VS Code's "format on save" setting or an extension to do that for us. We can then omit some whitespaces, semicolons and other characters, save the file and... let the editor do the rest. Same goes for formatting pasted code - just paste it and save the file.

Don't hastily close "release notes"

VS Code is being actively developed and new features are added with each release. After updating the editor, it opens a tab with release notes. Unlike many release notes, these are actually worth reading. They provide detailed descriptions of new features, often with animated examples.

Keep exploring

The number of features VS Code offers is overwhelming. There are many things I haven't mentioned in this article. That's why I encourage everyone to explore the editor, its settings, shortcuts and available commands - you are likely to find a lot of useful features.