Useful shortcuts and settings in VS Code

Shortcuts #

• Ctrl + Shift + K : Delete current line
• Alt + Down/Up : Move selected line(s) up/down
• Alt + Shift + Down/Up : Duplicate selected line(s) up/down
• Ctrl + D : Select next occurrence of selection (shown below)

• Ctrl + K + Ctrl + D : Unselect the last occurrence and select the next one (used in combination with Ctrl + D )
• Alt + Click : Place a multi-cursor
• Ctrl + Shift + L : Place a multi-cursor on all matches in current file
• Ctrl + ` : Bring up and focus the integrated terminal
• Ctrl + P : Search files by name
• Ctrl + Shift + P : Open the Command Palette (for accessing everything inside VS Code)

You’ll notice that many of these shortcuts are multi-cursor-related. It’s a feature you will miss in every text editor once you get good with it.

Emmet #

Emmet enables you to write HTML incredibly quickly. For example, typing a “!” in VS Code and pressing enter will output a default page skeleton. Shown below is a pretty complex Emmet Abbreviation, which expands to a bunch of HTML once I press enter.

Read more about Emmet at https://code.visualstudio.com/docs/editor/emmet.

Writing HTML by hand is slow and error-prone. That’s why great tools like Emmet exist. One particularly annoying thing is having to write the opening and closing tags separately every time you want to wrap something with another element. Fortunately there’s a shortcut called editor.emmet.action.wrapWithAbbreviation that will do it for you:

I’ve mapped this command to Ctrl + Alt + W so that I can access it easily.

You can also do the opposite, which is to remove a tag wrapping some inner HTML. This is done by the editor.emmet.action.removeTag command, as shown below:

I’ve mapped this command to Ctrl + Alt + R.

Settings #

• "editor.bracketPairColorization.enabled": true Makes each bracket pair a different color. This was previously a third-party extension but has now been integrated into VS Code itself. There’s an interesting blog post about how they optimized the performance by using (2,3)-trees.

• "editor.fontLigatures": true

  If your font supports ligatures, font ligatures will combine some characters together. For example, <= will turn into <= and == will turn into ==. Some people don’t like how ligatures make characters less distinct but I find != to be much more readable than !=. The font I’m using is called JetBrains Mono, and it has really nice font ligatures.

• "editor.linkedEditing": true

  This will make editing a HTML starting tag also change the closing tag and vice versa. This was an extension, Auto Rename Tag with 11 million downloads but is now built into VS Code.

Extensions #

• Live Preview #

  This is not the “Live Server” extension that most people are familiar with. This is a new extension by Microsoft that is still in the preview stage. By default, it will update the page instantly when you make changes to the file without even having to save it. It doesn’t work perfectly yet, as it will sometimes freeze up until you close the page, but otherwise it’s great for quick prototyping on raw HTML/CSS/JS files.

• WSL #

  Honestly, this extension is like magic to me. It works by downloading code server to your WSL installation (when you type “code .”). VS Code will then act as a front end to the actual code-server running inside your WSL installation. You’ll need to install LSP extensions for the code-server separately but otherwise it feels just as integrated as running on Windows. I’ve found the Go extension and language to be much faster on WSL, even if reading from the native filesystem.