How to make your VS Code faster?

Visual Studio Code (VS Code) is designed to be lightweight. It has a tight set of core features, and you can add extra features through extensions.

Why your VS Code is slow?

This is the first step to fixing the problem. We have to understand what's causing it in the first place. If we can't do that, it's going to be very hard to fix anything.

Here are some things that may be causing VSCode to run slowly, and some proposed solutions. It's going to be up to you to play around with these solutions and see if you can get it running a bit faster. Fingers crossed.

This one is unlikely because VS Code is a highly optimized program, and runs well on the majority of machines. If you are working with a very old computer though, that tends to run slowly with other programs, chances are VS Code is not the problem.

Here are VS Code's Hardware Requirements:

1.6 GHz or faster processor
1 GB of RAM

Here are Operating Systems Requirements:

VS Code has been tested on the following Operating Systems:

OS X Yosemite and later.
Windows 7 (with .NET Framework 4.5.2), 8.0, 8.1 and 10 (32-bit and 64-bit).
Linux (Debian): Ubuntu Desktop 14.04, Debian 7.
Linux (Red Hat): Red Hat Enterprise Linux 7, CentOS 7, Fedora 23.

If your current system specs are near or below those requirements, this is certainly the issue. Time for a computer upgrade.

Update your VS Code

Before we dig into other ideas, it's a good idea to ensure your VS Code is fully up-to-date. Sometimes a simple update may fix your issue.

To check if you're running on the latest version of VS Code, do the following:

On Mac, go to Code > About Visual Studio Code
On Windows, go to Help > About

The first version number listed will tell you which version you're running on. After retrieving your version, simply go to google and type in "VS Code latest version"

Settings

we are usually fine with most of default settings, but we will take note of a few (you can quickly access settings by pressing Ctrl + ,).

Tab Size - I'm a 2-spaces person for indentation, but I'm not participating in this holy war, so choose whatever suits you best.
Detect Indentation - related to the previous one, prevents overriding your rules when opening someone else's files.
Word wrap - setting a default setting. You can also switch word-wrap in the editor by pressing Alt + Z.
Trim Trailing Whitespace - as the description says.
Rename on Type - the most important one, acts as the Auto-Rename Tag extension. Helps renaming opening and closing HTML tags (like <section></section>) together. UPDATE 2021: Rename on Type was replaced by Linked Editing setting!

Extensions

There is a ton of useful and useless extensions for VSCode, here are my personal choices (quick extensions access - Ctrl + Shift + X).

Prettier - a code formatter for different languages (JavaScript, TypeScript, JSON, CSS, SCSS, HTML, Vue, Angular etc.) Makes your code prettier. You can format your document by pressing Shift + Alt + F (you need to select your default formatter at the first call). By default, the extension uses double quotes in files, but you can change it by searching 'prettier single quote' in VSCode settings.
Code Runner - I don't use it often, but it runs code snippets or code files in many languages directly in VSCode console (by pressing Ctrl + Alt + N).
Code Spell Checker - checks your code for common spelling mistakes and typos (in texts, variable names, etc.) Multiple languages are available, after installing you need to enable them (see the description).
CodeSnap - takes nice screenshots of your code. There are multiple similar extensions like this one.
GitLens - a powerful extensions which makes your work with git easier and more pleasant.
Image Preview - shows a small thumbnail of an image to the left of code lines, when there is an image link in the code.
Live Server - launches a local development server for your code, it's the easiest way to work with your live-updating website without the need to install node.js or anything else.
JavaScript (ES6) snippets - there are many snippet extensions for different languages, the idea is that you type, for example prom + Tab, and it changes to return new Promise((resolve, reject) => {});. Saves your time. You don't need snippets for HTML/CSS, because most of it is built-in in the editor.
indent-rainbow - purely visual, sets indentations in alternate semi-transparent colors.
Bracket Pair Colorizer 2 - different colors for brackets of different depth, and it also shows paired brackets.
Markdown All in One - This extension helps me a lot when writing READMEs, or other Markdown documents. I specifically enjoy how it deals with lists, tables, and table of contents.
Auto Close Tag - Another simple extension that does one thing well: auto-closes my JSX tags

WakaTime - an extension for tracking your coding stats. You also need to sign up on https://wakatime.com/ and provide an API key to your extension.
Material Icon Theme - my favorite theme for filetype icons.

There are also many color themes, check out Atom One Dark Theme or One Dark Pro, but the basic ones are also good.

Shortcuts

There are so many keyboard shortcuts, that it's hard to count (you can also add your own combinations). Here are the most common ones I use (inside the editor window, those are for Windows version):

Ctrl + Right/Left - go to next/previous word
Alt + Up/Down - move line/selected block up/down
Shift + Alt + Up/Down - copy line/selected block above/below
Ctrl + Backspace - delete previous word
Shift + Del - cut line/selected block
Shift + Tab - decrease indentation of line/selected block
Ctrl + G - go to anything (line, file, etc.)
Ctrl + P - go to file
F2 - rename variable (change it everywhere in the document)
F12 - go to variable definition
Ctrl + / - line comment
Shift + Alt + A - block comment
Ctrl + D - add the next match to the selection
Shift + Alt + F - format document
Ctrl + Space - show suggestions
Ctrl + Z - toggle word wrap
Ctrl + ` - open and go to terminal
Ctrl + 1/2/... - go to first/second/... code panel
Alt + click - multiple cursors
Ctrl + Alt + Shift + Up/Down or Holding Middle Button - multiple cursors
Ctrl + Shift + V - markdown preview
Ctrl + K then V - markdown preview side-by-side
Alt + Click on file in Explorer - open panels side-by-side
F1 or Ctrl + Shift + P - show all commands

Emmet & code suggestions

Emmet is a powerful toolkit built in in VSCode, which will save you a lot of time. It allows you to write short code snippets, which magically converts to elements, keywords and properties. This is a big topic to cover, and I'm using only a fracture of it myself, so here's a few examples:

! + Tab in a HTML file converts to:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

ul.list>li.item{text$}*6 + Tab in HTML:

<ul class="list">
    <li class="item">text1</li>
    <li class="item">text2</li>
    <li class="item">text3</li>
    <li class="item">text4</li>
    <li class="item">text5</li>
    <li class="item">text6</li>
</ul>

.quick + Tab in HTML:

<div class="quick"></div>

gtc + Tab in CSS, inside a selector:

grid-template-columns: repeat();

fz20r + Tab in CSS:

font-size: 20rem;

bb + Tab in CSS:

border-bottom: 1px solid #000;

As you see, you just need to start typing something, and Emmet suggests what you may need.

In JavaScript, you can also choose the suggestion by up/down arrows. For example, by typing fo you can instantly choose a for loop, in which you can quickly jump through arguments by pressing Tab.

for (let index = 0; index < array.length; index++) 
{
    const element = array[index];
}

Extensions like JavaScript (ES6) snippets I mentioned earlier add new suggestions to the list.

GIT

The last thing I wanted to share are Git shortcuts. Sooner or later you may want to use it, and I recommend to learn using it from a command line first (VSCode terminal). It does not hurt to learn a few Bash commands too for creating/moving/copying files and directories. (By the way, Bash also offers suggestions when you're starting to type something and pressing Tab.)

To type git commands faster, you can use aliases. There are git aliases, when you shorten a command to git something, but it's better to use Bash aliases, so we can shorten the git part, too. One of the ways to create them is to create a .bashrc file in your home directory, then add aliases directly to it. Here is my list:

alias gst='git status'
alias gaa='git add .'
alias gcm='git commit -m'
alias gcmno='git commit --amend --no-edit'
alias gch='git checkout'
alias gchd='git checkout develop'
alias gchm='git checkout master'
alias gchb='git checkout -b'
alias gbr='git branch'
alias glo='git log --oneline'

So, instead of typing the whole command in the terminal, I type, for example, glo↵ to view the commits log. If you're not sure where your home directory is, type echo $HOME↵ in your VSCode terminal.

Also, if you want to change your home directory, you can use the following code in terminal (in Windows):

setx HOME "C:\Path-to-your-projects\Projects"

after this you need to restart VSCode.

Criteria for selecting an extension:

Most lists of extensions talk about the cool features, and little else. Some of the criteria that we suggest involves looking at source code:

Is the feature I need available in VS Code already? I demonstrated that you don't need many popular extensions in an article "VS Code: you don't need that extension". You can consult the VS Code docs to check on a particular feature.
Does the extension have the features I need? Consult the extension page on Visual Studio Marketplace to find this out.
When is an extension loaded and active? I'll discuss this in detail in the section Activation Events. You need to check the package.json of the source code to find this out in advance. You can run the Developer: Startup Performance command to see the Activation Events of installed extensions. I discuss this further in the section How to audit performance.
Are resources optimized? You need to check the source code to see if it uses a bundler. You can check the package.json to see if the scripts section has a pre-build step for bundling. The VSIX extension file is a compressed archive of files for the code and the listing in the marketplace. Developers often include unnecessary files. There is a .vscodeignore file to exclude files.
Have there been any performance issues reported recently, which are unresolved? You can uncover these by auditing the performance of the extension. You need to check the issues on the Git repo also.
Does the code have tests? The extension is going to be more susceptible to bugs without tests. You need to check the source code to see if there are tests.
Is it actively maintained? The Project Details section of the extension page gives an overview of the activity of the public Git repo. In some cases, an extension may be "done", so maintenance is not an important consideration.