ascUse VSCode Like a Senior Developer

14 min readDec 6, 2020

5 tips you should know if you choose VSCode as your code editor.

VSCode is one of the most popular code editors, skilled use of VSCode can greatly improve our programming efficiency. Here I will introduce some advanced tips for using VSCode, which I hope will help you.

Here are the features I’m going to talk about:

Multiple Cursors
Rename Symbol
Move line up and down
User Snippets

Multiple Cursors

We might want to type the same thing in different places at the same time.

For example, in the following code, we want to add a class=“odd” attribute to the first, third, and fifth <li>; Add a class="even” attribute to the second, fourth, and sixth <li>.

<ul>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
</ul>

How would you achieve the following?

I used to type class="old” on one label and then copy-paste it somewhere else. It was not until later that I learned the skill of multi-cursor input, which greatly improved my work efficiency.

Specifically, when you hold down Alt on the keyboard (in macOS, the Option key), clicking on other areas will create an extra cursor. Then whatever you type on the keyboard appears in each cursor area at the same time.

Note:

Windows: Alt+Click
macOS: Option+Click

Rename Symbol

Let’s do an easy trick now.

When we write code or document, we may find a spelling error, or we may want to change the naming conventions, so we often need to modify a word in batch.

Suppose you had a piece of code like this, and we wanted to change all of foo to bar, what would you do?

function foo(){
  // ...
}foo();
foo();
foo();

If we manually change the words one by one, there are two disadvantages:

too much trouble
omissions are easy to occur

At this point, we can access VSCode’s Rename Symbol function.

This option appears when we select a text and right-click it. Or you can press the F2 shortcut after you select the text.

Move lines up and down

Sometimes we want to move some code or text as a whole up or down. At this point, we can select the text and then:

On Windows, press Alt + ↑ to move the text up; Press Alt + ↓ to move the text down
On macOS, press Option + ↑ to move the text up; Press Option + ↓ to move the text down

These tips can help us quickly adjust the order of the contents.

User Snippets

When we write code, we always use a few pieces of code repeatedly.

For example, our HTML5 files always have the following basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
</head>
<body>
</body>
</html>

And when we write a for-i loop in JavaScript, we always write these fragments:

for(let i = 0; i < ; i++){
  
}

There are many more examples. It would be very inefficient if we had to enter these snippets manually every time we needed to use them.

Fortunately, VSCode provides us with a custom auto-complete feature. Here’s a demo:

Let’s begin by showing how to configure VSCode to achieve the above effect.

Generate Configuration File

VSCode achieves the above effect by reading the configuration file, so we first need to generate a configuration file. We can generate a configuration file using the following path.

First, we open the window used to generate the configuration file.

Preferences -> User Snippets

And then VSCode will pop up this window:

In this window, we can select the existing configuration file and modify it. Or we can also create a new configuration file.

Here, we’ll just create a new configuration file.

If you choose New Global Snippets file , a globally active configuration file is created. If you choose New Snippets file for 'test' , a local active configuration file is created.

Here, we’ll just create a local active configuration file.

It then asks you to enter the name of the newly created file.

Ok, now we have created a configuration file.

For the convenience of readers, I recorded a GIF to complete the above process, I hope it will help you.

Set-Up

The configuration file is written in JSON format, and here is a simple example.

{
 "html5 autocomplete": {
  "prefix": "html5",
  "body": [
   "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "<head>",
      "  <title></title>",
      "</head>",
      "<body>",
      "</body>",
      "</html>"
  ]
 }
}

First, let’s look at the field “html5 autocomplete”. This field does nothing but tells the programmer what the configuration option is for, and you can write the field as you like.

Then let’s look at the “prefix”: “html5” . This field is the shortcut command we define. When we type the word html5 in a file, VSCode will automatically complete the code for us.

And then look at the "body": [...] . The content of this field is the code we need to complete. Because our code might have many lines, this field is represented as an array. Each element in the array represents one line of code. Translate the above array into normal code, and that’s it.

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
</head>
<body>
</body>
</html>

Ok, now that we have the basic configuration, let’s test it out.

Scope

Well, our configuration did work. But we can still find an imperfect place. That is, html5 autocomplete is usually only used in HTML files, and when we write JavaScript files, we don’t need this shortcut command.

Fortunately, we can specify the scope of this configuration in the configuration file.

All we need to do is add the field "scope": "html" to the configuration file.

So let’s test that out again.

Good. Now in a JavaScript file, this shortcut will automatically expire.

Cursor

Now let’s re-test our auto-complete. Have you found any imperfections?

We can see that when we finish autocompleting, the cursor stops at the end of the code automatically. However, the code we autocomplete is not a complete code, we also need to enter the specific content in the title.

It would be even better if the cursor could be left in <title></title> after auto-completion.

To do this, we simply add a special variable $0 to the configuration.

After completion, the cursor will automatically stay at $0.

Example

Ok, now let’s look at a new example to review what we’ve learned.

We hope that when we enter the string fori in JavaScript or TypeScript files, VSCode will automatically complete the following code:

for(let i = 0; i < ; i++){
}

Also, the cursor should stay after i < .

You can pause for a moment and think for yourself.

Okay, I’m going to give you the answer.

We can write a configuration file like this:

{
 "for-i loop": {
    "prefix": "fori",
    "scope": "javascript, typescript",
    "body": [
      "for(let i = 0; i < $0; i++){",
      "}"
    ]
 }
}

Here is a gif:

Okay, so that’s how User Snippets are used. I spend a lot of time talking about this feature, because it’s one of my favorite features, and I think it will be useful for you too. In the past, when I had to type duplicate code, I copied and pasted it from another file, which was very troublesome. Now that we have it, we can write code quickly.

Quickly open files

When we are in contact with a large unfamiliar project, how to quickly find the file we want in a large number of files?

For example, when I’m reading an unfamiliar open source project, I like to prioritize all files that contain the word util in the filename of the project.

In this case, we can use the file search tool of VSCode.