VS Code tips and tricks for beginners

This is an ever-growing list of tips, tricks, and gotchas picked up while working with VS Code.

1. How to change the color scheme in VS Code?

To change the color scheme in VS Code, go to File > Preferences > Color Theme.

Or use the keyboard shortcuts of CTRL + k, then CTRL + t.

Or use another keyboard shortcut of ALT + f, followed by single presses: p, c.

2. Find redundant whitespace using the Trailing Spaces extension

The Trailing Spaces extension by Shardul Mahadik marks all the “hanging” white space with nicely styled red background, which makes it easily noticeable and thus possible to remove before committing commits that (only) have whitespace updates inside.

3. How to format html files in VS Code

If you have an html file open in VS Code, you can format it quickly with this keyboard shortcut: CTRL + SHIFT + i.

4. Wrap an element in another element in VS Code

This is quite a handy tip.

Recently I was working on a Shopify theme, and I needed to wrap the following piece of liquid syntax in a div:

{% render 'pagination', paginate: paginate %}

So, rather than having to manually deal with the mess of adding a div and then moving code around, I did this:

1. CTRL + SHIFT + p to launch command laucher pop up window
2. Type the command: ext install htmltagwrap
3. Highlight the above piece of liquid syntax (render 'pagination'...)
4. Run the tag wrap command with ALT + SHIFT + w

5. Quickly add or remove comments

There are two handy shortcut keys:

• to comment:
  1. Hold down the CTRL key
  2. Press and release the k key
  3. Press and release the c key
• to uncomment:
  1. Hold down the CTRL key
  2. Press and release the k key
  3. Press and release the u key

This works on a line where the cursor is (for a quick one-line commenting out).

It also works for multiple lines, by first selecting the piece of code on which you’d like to toggle the comments on or off.

6. Move lines up or down using shortcut keys in VS Code

First, highlight (select) one or more lines you want to move, and then:

• To move lines up, press ALT + up
• To move lines down, press ALT + down

7. Add a new keyboard shortcut key in VS Code

Why would you be adding a new keyboard shortcut key in VS Code?

Here’s a scenario: there’s a very useful piece of functionality that speeds up our work as web developers in VS Code: duplicate lines up/down.

You just select a piece of code, press the shortcut keys, and the code is duplicated either up or down. Wonderful.

However, there is a slight wrinkle: it doesn’t work the same on Windows and Ubuntu.

I’m a Windows power user, and I use keyboard shortcuts there extensively.

Thus, in VS Code on Windows, the duplicate selection up keyboard shortcut is: SHIFT + ALT + up. Obviously, you’d use the down key to duplicate down.

However, this same keyboard shortcut doesn’t work in Ubuntu, due to the fact that the OS uses the same keyboard binding. This means that we’d need to do two things to make this work:

1. Alter Ubuntu’s bindings to “free up” the desired keyboard shortcut for our duplicate code up and down functionality in VS Code
2. Update the keyboard bindings in VS Code itself.

We won’t go into the step 1 above, but for step 2 - adding a new shortcut key in VS Code - here’s what we’d do:

To fix this, we need to add a new key binding that works:

1. Go to File > Preferences > Keyboard Shortcuts (CTRL + K, CRTL + S).
2. Inside the search of keyboard shortcuts, type “Duplicate Selection”
3. Click on the single result to add a keyboard shortcut.

However, there’s an even easier way to do this: just use a bit of a custom Ubuntu keyboard shortcut to duplicate up and down. We’ll learn how to do that next.

8. Duplicate selection up or down (on Ubuntu in VS Code)

First, we’ll select the piece of code to duplicate, and then:

• duplicate up: CTRL + SHIFT + ALT + 8
• duplicate down: CTRL + SHIFT + ALT + 2

Pro tip: use the numpad.

Article revision history: