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?

#software-development #coding #vscode #web-development #javascript