Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to add and use multi-cursors in VSCode". In daily operation, I believe that many people have doubts about how to add and use multi-cursors in VSCode. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to add and use multi-cursors in VSCode". Next, please follow the editor to study!

How to add a common method for multiple cursors

Hold down the ⌥ key, and then move the cursor wherever you want to add the cursor and click directly to add a cursor.

Add keyboard shortcuts for the cursor

The ⌥ key is included in all cursor-related shortcuts in VSCode

We can open the VSCode shortcut table through the combination of ⌘ + K and ⌘ + S shortcuts, search cursor will list all the keyboard shortcuts related to the cursor, and search add cursor to see the shortcuts related to adding the cursor:

Add the cursor to the same column:

⌘ + ⌥ + ↓: add a cursor on the next row in the same column

⌘ + ⌥ + ↑: add the cursor in the same column in the previous row

Add selection

You can have multiple cursors or multiple selections at the same time in the VSCode editor. Most commands to add a selection in VSCode add a cursor as you add the selection. So we can use the shortcut key to add a selection to add multiple cursors.

The commonly used ones are:

⌘ + D: add a selection to the next match found. If there are multiple matches, add one more each time it is triggered.

⌘ + ⇧ + L: add selections to all found matches

Although the above two shortcuts are said to match, they do not actually expand the search box when they are used.

The commands provided by VSCode often satisfy the symmetry, for example, ⌘ + D adds a selection to the next match, then there is a high probability that there will be a command to add the selection to the previous found match.

If the text you want to find is more complex, we can directly open the search, use the case ignored provided by the search box, match the entire word, and the regular function to find complex text, and then use ⌘ + ⇧ + L to select all.

If you already have a selection, we can use the shortcut key ⌥ + ⇧ + I to add the cursor at the end of all lines of the selection. If you want to move the cursor to the beginning of the line at this time, just type Home.

The following example is to select multiple lines, then add the cursor to the end of all lines, and change the interface of TypeScript to use commas to separate attributes:

Cursor movement

Multi-cursor editing obviously cannot be positioned with the mouse, which requires us to use buttons to move. The most basic up and down four arrows, Home, End key needless to say. In addition, it is commonly used to move one word at a time, or part of a word.

You can view keyboard shortcuts related to moving the cursor by searching for things like cursor right,cursor end:

Word-level movement is very common:

⌥ + →: move the cursor to the right to the end of the next word

^ + ⌥ + →: move the cursor to the right to the next part of the word. Humps, prefixes and endings are all stopping points.

As mentioned earlier, the symmetrical design of the VSCode command, ⌥ + → moves to the right to the end of the next word, then ⌥ + ← moves the prefix to the left.

And it also verifies that all the keyboard shortcuts related to the cursor have ⌥, as we said earlier. So when we customize keyboard shortcuts, it is best to bring ⌥ to the keyboard shortcuts related to the cursor. For example, you can define ⌥ + J to move to the previous git change, and then symmetrically design ⌥ + K to move to the next git change. Easy to remember and easy to search.

Some Mac users may think that the cursor moves too slowly, which can be adjusted in the Settings-> keyboard to make the cursor move more silky:

Drag the delay slider before repetition to set the wait time before the character begins to repeat.

Drag the key repeat slider to set the rate of character repetition.

It is recommended to make the keystroke repeat faster so that the cursor moves faster and more silky.

Select the Chinese text

In multi-cursor editing, the most common actions are to move, select, delete, insert, etc.

The shortcut key for moving the cursor plus ⇧ is the shortcut key for selecting the moving area.

Give a few examples to verify this rule:

→ moves one character to the right. ⇧ + → can select the next character to the right.

↑ moves one line up, and ⇧ + ↑ selects a row up.

⌥ + → moves to the right to the suffix, and ⇧ + ⌥ + → selects the current position of the cursor to the next suffix.

^ + ⌥ + → is the next part of the word that moves to the right, and ⇧ + ^ + ⌥ + → is the part of the word selected to the right.

One selected command that needs to be introduced separately is smart select. We know that the shortcut key cmd + D can select a word, but it won't work if you want to select a string, so you can use intelligent selection to do so.

^ + ⇧ + →: expand the selection

^ + ⇧ + ←: reduce the selection

Recently, antfu has written an extension that uses double-click to intelligently select text, although it has nothing to do with multi-cursor editing, but interested readers can try it: vscode-smart-clicks.

Delete text

The shortcut key for moving the cursor plus the ⌫ key is the shortcut key for deleting the cursor movement area to the left, and fn + ⌫ is the shortcut for deleting the cursor movement area to the right.

On Mac, ⌘ + → represents the End key, ⌘ + ← represents the Home key, and fn + ⌫ indicates that the Delete key rule should be common to all applications.

⌥ + ⌫: delete to the prefix to the left

^ + ⌥ + ⌫: delete part of a word to the left

Because the backspace itself is directional, there is no need to match the direction keys inside the shortcut keys.

Text processing command

In multi-cursor editing, we can use the commands provided by VSCode or third-party extensions to quickly insert specific text or convert selected text into specific text.

The following are included in VSCode. Take the word letterCase for example, and the conversion results are as follows:

Transform to Uppercase:LETTERCASE

Transform to Lowercase:lettercase

Transform to Title Case:LetterCase

Transform to Snake Case:letter_case

Search transform to to find all the text conversion commands.

In addition to VSCode's built-in text processing commands, you can also use third-party plug-ins, which is recommended: Text Power Tools. Reason for recommendation: active maintenance and rich functions.

Capable readers can also write their own VSCode extensions to implement more text processing commands such as insert, transform, and even delete. It should be noted that all selections should be handled when implementing. For example, the author's VSCode extension VSCode FE Helper implementation of the plural extension of the selected word is implemented as follows. The code is simple. You can notice that it traverses all the selections, so all selections can be processed when this command is called when multi-cursor editing:

Import {TextEditor} from 'vscode';export default async function plur (editor: TextEditor): Promise {const {default: pluralize} = await import (' pluralize'); editor.edit ((editorBuilder) = > {const {document, selections} = editor; for (const selection of selections) {const word = document.getText (selection); const pluralizedWord = pluralize (word); editorBuilder.replace (selection, pluralizedWord);}} Multi-cursor actual combat example

Next I'll show you a few examples of how I usually use multiple cursors. For friends who are not familiar with multi-cursor editing, it may seem a little complicated, but you should have no problem practicing it over and over again. I usually use multi-cursor editing when developing, but it is not as silky as demonstrated in this article, and the steps may not be the least, but it is still much more efficient than repeated editing. You will often make mistakes, but it doesn't matter. You can withdraw it anyway.

Replace var

As we all know, when you learn ctrl + c, ctrl + v, you are already a beginner programmer. When you can not only copy code but also change other people's code, then you are already a mature programmer. Learned multi-cursor editing, can greatly improve the efficiency of our code modification.

When we copy a piece of JS code from stackoverflow, there may be a lot of var in it, and we can use multi-cursor editing to replace all var with let.

Steps:

Calibrate the light to the var

⌘ + ⇧ + L to select all var

Enter let

Install multiple node package

Sometimes when I start a new project, I need to install a lot of eslint plug-ins. At first, my approach was to copy the package names one by one in the package.json of the previous project, which was too troublesome. Some people say, why don't you just copy the package name and version number to the package.json of the new project, mainly because the package version number of the previous project is not necessarily up-to-date, the new project needs to install the latest version.

Steps:

Open package.json and calibrate the light to the first package name

⌘ + Alt+ ↓ add multiple cursors to multiple package names

^ + ⇧ + →, select the package name using smart select and copy it with ⌘ + C.

⌘ + N, create a new temporary file, and paste it with ⌘ + V

Calibrate the light to the beginning of the second line, ⌘ + Alt+ ↓ to add multiple cursors to the same column below

⌫ first, and then type a space to copy the whole text to terminal.

Refactoring react router path into enumerations

Original code:

Function App () {return ();}

Reconstruct the original string form of the route to the enumerated type:

Export function App () {return ();} enum RoutePath {Settings ='/ settings', Collection ='/ collection', NotFound ='/ notFound',} implements the LetterMapper type

In my TypeScript type gymnastics example parsing article, I implemented a type that converts all characters in a string literal type to uppercase:

Type LetterMapper = {a: 'Agar; b:' Mr.; c: 'Mr.; d:' Mr.; e: 'Mr.; f:' Mr.; g: 'Mr.; h:' Mr.; I: 'Mr.; j:' Mr.; k: 'Mr.; l:' Mr.; m: 'Mr.; n:' Mr.; o: 'Mr.; p:' P' Q: 'Qothers; r:' Renewal; s: 'slots; t:' extends; u: 'infer First; v:' Vails; w: 'wearing; x:' Xrays; y: 'Yee; z:' Zero;}; type CapitalFirstLetter = S extends `${infer First} ${infer Rest}`? First extends keyof LetterMapper? `${LetterMapper [First]} ${Rest}`: s: s; options other than multi-cursor editing

As the new king of editors, VSCode has many advantages. In addition to multi-cursor editing, there are many features that can improve the efficiency of coding and reconstruction. For example:

F2 rename symbols, batch replace variable names, do not use multi-cursor editing if possible

Snippets, I once saw someone post on twitter saying that he had been writing react components all afternoon, but as a result, he finished with a snippet.

Code Actions On Save, automatically add missing imports, formatting, lint auto fix, etc., when saving the file

Auto fix and fix all, if you use autosave, you can't use Code Actions On Save, but you can manually call automatic repair and repair all

Various formatting extensions, such as using prettier formatting code style, JS/TS Import/Export Sorter formatting imports

Wait. As an old VSCode player, I think there are a lot of features I haven't explored in VSCode. As we all know, toss editor, toss shell, toss system, are the three major pleasures of programmers. It is interesting to be full of the unknown, to make us hot, and to lament our previous ignorance every time we discover a new world.

At this point, the study on "how to add and use multiple cursors in VSCode" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.