この記事では、VSCode のクールで実用的なマルチカーソル編集について説明します。マルチカーソルの追加方法と使用方法を紹介します。皆様のお役に立てれば幸いです。
VSCode のどの機能がコーディング効率を大幅に向上させたかといえば、間違いなくマルチカーソル編集がその 1 つです。マルチ カーソル編集により、同じテキスト操作の繰り返しを回避できます。VSCode に組み込まれ、サードパーティの拡張機能によって提供されるテキスト処理コマンドを使用すると、マルチ カーソル編集の柔軟性が大幅に向上します。この記事を読んで、日常の編集でマルチカーソル編集を柔軟に使用する方法を読者に教えていただければ幸いです。 [推奨学習: 「vscode 入門チュートリアル 」]
内容概要:
- 複数のカーソルを追加する方法
- カーソルを移動する
- テキストの選択
- テキストの削除
- テキスト処理コマンド
- マルチカーソルの実践例
- マルチカーソル編集以外のより良い選択肢
複数のカーソルを追加する方法
一般的な方法
⌥ キーを押しながら、カーソルを追加したい場所に移動します。を押して直接クリックするとカーソルが追加されます。
#カーソル ショートカット キーの追加
VSCode のカーソルに関連するショートカット キーにはすべて ⌥ キーがあります
⌘ K,⌘ S ショートカット キーの組み合わせで VSCode ショートカット キー テーブルを開き、cursor# を検索できます。 ## カーソルに関連するすべてのショートカット キーがリストされます。add Cursor を検索して、add Cursor に関連するショートカット キーを表示します:
#同じ列にカーソルを追加します: 
⌘
- ⌥ #: カーソルを次の行に追加しますと同じ列 ⌘
- ⌥ ↑: 前の行の同じ列にカーソルを追加します
#選択の追加
VSCode エディターでは、複数のカーソルと複数の選択を同時に行うことができます。 VSCode で選択範囲を追加するほとんどのコマンドは、選択範囲を追加するときにカーソルも追加します。したがって、選択範囲を追加するためのショートカット キーを使用して、複数のカーソルを追加できます。
一般的に使用されるものは次のとおりです:
##⌘
D
: 次に見つかった一致に選択範囲を追加します。複数の一致がある場合、各トリガー1 回ともう 1 つ追加-
⌘ ⇧
- L: 見つかったすべての一致に選択範囲を追加##上記の 2 つのショートカット キーは、見つかった一致を参照しますが、実際に使用しても検索ボックスは展開されません。 VSCode が提供するコマンドは対称性を満たすことがよくあります。たとえば、⌘
D
は次に見つかった一致に選択範囲を追加するものであるため、以前に見つかった一致に選択範囲を追加するために使用されるコマンドになります。 
検索するテキストがより複雑な場合は、最初に直接検索を開き、検索ボックスに表示される case を使用して を無視することができます。 は単語全体 に一致します。複雑なテキストを検索するには
regulator
関数を使用し、すべてを選択するには 
⌘
⇧ L を使用します。 。
⇧
## を使用できます。 #I 
選択範囲内のすべての行の末尾にカーソルを追加します。この時点でカーソルを行頭に移動したい場合は、
Home
キーを入力するだけです。 次の例では、最初に複数の行を選択し、次にカーソルをすべての行の末尾に追加し、カンマを使用して属性を区切るように TypeScript インターフェイスを変更します。 #カーソルの移動 複数のカーソルを編集する場合、マウスを使用して位置を指定することはできないため、キーを使用して移動する必要があります。最も基本的な 4 つの矢印は上下左右の矢印であり、Home キーと End キーは言うまでもありません。さらに、一度に 1 つの単語または単語の一部を移動するのによく使用されます。 cursor right、cursor end
:
を検索すると、カーソルの移動に関連するショートカット キーを表示できます。
単語レベルの移動は非常に一般的に使用されます:
-
⌥ →: カーソルを次の単語の末尾まで右に移動します。
- ^ ⌥ →: カーソルを単語の次の部分に右に移動します。こぶ、単語の先頭と末尾はすべて、停止点
前述したように、VSCode コマンドの対称設計
⌥ → は、 ⌥ ← は、前の単語の先頭を左に移動します。
そして、これは前に述べたことを裏付けるもので、カーソルに関連するショートカット キーはすべて
⌥ です。したがって、ショートカット キーをカスタマイズする場合は、カーソルに関連するショートカット キーに ⌥ を追加するのが最適です。たとえば、前の git 変更に移動するために ⌥ J を定義し、次に次の git 変更に移動するために ⌥ K を対称的に設計することができます。 git 変更です。覚えやすく、検索しやすい。
一部の Mac ユーザーは、カーソルの動きが遅すぎると感じるかもしれません。これは、
設定 -> キーボードで調整して、カーソルの動きをよりスムーズにすることができます:
- 「繰り返す前の遅延」
スライダーをドラッグして、キャラクターが繰り返しを開始するまでの待機時間を設定します。
- キーリピート
スライダーをドラッグして、文字を繰り返す速度を設定します。
カーソルの動きがより速く、よりスムーズになるように、
キーリピート速度高速を増やすことをお勧めします。
選択されたテキスト
複数のカーソルを使用して編集する場合、最も一般的な操作は移動、選択、削除、挿入などです。
カーソル移動のショートカットキープラス ⇧ は 移動エリア選択のショートカットキーです
リストアップしてみましょういくつかの例 このルールを確認してください:
- → は 1 文字を右に移動し、⇧ → は次の文字を選択できます
# ↑ - は 1 行上に移動し、 ⇧ ↑ は 1 行上を選択します
⌥- → は単語の最後まで右に移動します。 ⇧ ⌥ → は現在の位置を選択します。カーソルを単語の次の端に移動します。
^- ⌥ → は、単語の次の部分 # に右に移動します。 ##⇧ #⌥ → は、右側の単語の一部を選択します
##別途導入する必要がある選択コマンドが
smart select
です。ショートカット キー
cmd D
で単語を選択できることはわかっていますが、文字列を選択したい場合は機能しません。現時点では、スマート選択を使用してこれを実現できます。
⇧- →: 選択範囲を拡大します^
⇧- ←: 選択範囲を縮小します
最近、antfu はダブルクリックを使用してテキストをインテリジェントに選択する拡張機能を作成しました。これは「マルチ カーソル編集は問題ではない」に似ていますが、興味のある読者はそれを体験できます:
vscode-smart-clicks
。 テキストの削除
カーソルを移動するショートカット キーと
⌫
キーは
leftカーソルの移動を削除するショートカット キーです⌫ は、カーソル移動領域を削除するための right ショートカット キーです。Mac の場合は、⌘
→
は End キーを表し、⌘ ← は Home キーを表し、fn ⌫ は ## を表します#Delete このルールはすべてのアプリケーションに共通である必要があります。 ⌥
⌫
: 先頭まで削除 -
^ ⌥
- ⌫: 左側の単語の一部を削除します##バックスペース自体は方向キーであるため、方向キーとショートカット キーを一致させる必要はありません。 テキスト処理コマンド
マルチカーソル編集では、VSCode またはサードパーティの拡張機能が提供するコマンドを使用して、特定のテキストをすばやく挿入したり、選択したテキストを特定のテキストに変換したりできます。
VSCode には次の機能が組み込まれており、単語
letterCase
を例にとると、変換結果は次のようになります:
Transform to Uppercase:
LETTERCASE
小文字に変換：
lettercase-
LetterCase-
letter_case - transform to
を検索してすべてのテキスト変換コマンドを見つけます
実際的な例を挙げると、たとえば、もともと小さなキャメルケースだった一連の定数をすべて大文字に変更する必要があります。
VSCode の組み込みテキスト処理コマンドに加えて、サードパーティのプラグインも使用できます。推奨事項は次のとおりです: Text Power Tools。おすすめの理由：積極的なメンテナンスと豊富な機能。
多くの機能がありますので、詳しくは拡張機能のホームページをご覧ください。探究心と投げる力がないとこの記事は読めないと思います。ここでは、数字を挿入する機能のみを説明します。
有能な読者は、独自の VSCode 拡張機能を作成して、挿入、変換、さらには削除などのテキスト処理コマンドを実装することもできます。 . .たとえば、作成者の VSCode 拡張機能 VSCode FE Helper は、次のように選択された単語を複数形に変換する拡張機能を実装しています。コードは非常にシンプルです。すべての選択範囲が横断されていることがわかります。そのため、マルチカーソル編集中にこのコマンドを呼び出すと、すべての選択範囲を処理できます。
import { TextEditor } from 'vscode';
export default async function plur(editor: TextEditor): Promise<void> {
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);
}
});
}ログイン後にコピー
マルチカーソルの実際の例
次に、私が通常どのように複数のカーソルを使用するかをいくつかの例で説明します。マルチカーソル編集に慣れていない人にとっては、少し複雑に感じるかもしれませんが、自分で練習して練習すれば大丈夫です。私は開発時にマルチカーソル編集をよく使いますが、記事で紹介したほどスムーズではなく、手順も最小限ではないかもしれませんが、それでも編集を繰り返すよりははるかに効率的です。よく打ち間違えますが、取り消せるので問題ありません。
Replace var
誰もが知っているように、ctrl c、ctrl vを学ぶと、あなたはすでにジュニアプログラマーです。コードをコピーするだけでなく、他の人のコードを変更できるようになれば、あなたはすでに成熟したプログラマーです。マルチカーソル編集を学習すると、コード変更の効率が大幅に向上します。
スタックオーバーフローから JS コードをコピーすると、その中に多くの var が含まれる可能性がありますが、マルチカーソル編集を使用してすべての var を let に置き換えることができます。
手順:
install Multiple と入力します。ノード パッケージ新しいプロジェクトを開くときに、多くの eslint プラグインをインストールする必要がある場合があります。最初のアプローチは、前のプロジェクトの package.json からパッケージ名を 1 つずつコピーすることでしたが、これは非常に面倒でした。新しいプロジェクトの package.json にパッケージ名とバージョン番号をコピーすればいいのではないかという人もいますが、そうしない主な理由は、前のプロジェクトのパッケージのバージョン番号が必ずしも最新であるとは限らないためです。新しいプロジェクトには最新バージョンをインストールする必要があります。 手順:- package.json を開き、カーソルを最初のパッケージ名に設定します
⌘ Alt #複数のパッケージ名に複数のカーソルを追加
- ##^
⇧ →、スマート選択を使用してパッケージ名を選択し、⌘ Ccopy
- ⌘
N、新しい一時ファイルを作成します。 ⌘ Vそれを貼り付けます。
カーソルを設定します。 2 行目の先頭に、- ⌘
Alt #複数のカーソルを下の同じ列に追加します
First - ⌫
、スペースを入力してテキスト全体を端末にコピーします
反応ルーターのパスを列挙型に再構築します
元のコード:
function App() {
return (
<HashRouter>
<Routes>
<Route index element={<Home />} />
<Route path="/settings" element={<Settings />} />
<Route path="/collection" element={<Collection />} />
<Route path="/notFound" element={<NotFound />} />
</Routes>
</HashRouter>
);
}ログイン後にコピー
元の文字列ルートを列挙型に再構築します:
export function App() {
return (
<HashRouter>
<Routes>
<Route index element={<Home />} />
<Route path={RoutePath.Settings} element={<Settings />} />
<Route path={RoutePath.Collection} element={<Collection />} />
<Route path={RoutePath.NotFound} element={<NotFound />} />
</Routes>
</HashRouter>
);
}
enum RoutePath {
Settings = '/settings',
Collection = '/collection',
NotFound = '/notFound',
}ログイン後にコピー
この例が選択されたのは、主に操作中にテキスト処理コマンドが使用されたためです。ケースの問題は手順が多すぎるため、アニメーションのデモを見てみましょう:
实现 LetterMapper 类型
在我 TypeScript 类型体操实例解析 这篇文章中有实现过一个将字符串字面量类型中所有字符转换成大写的类型：
type LetterMapper = {
a: 'A';
b: 'B';
c: 'C';
d: 'D';
e: 'E';
f: 'F';
g: 'G';
h: 'H';
i: 'I';
j: 'J';
k: 'K';
l: 'L';
m: 'M';
n: 'N';
o: 'O';
p: 'P';
q: 'Q';
r: 'R';
s: 'S';
t: 'T';
u: 'U';
v: 'V';
w: 'W';
x: 'X';
y: 'Y';
z: 'Z';
};
type CapitalFirstLetter<S extends string> = S extends `${infer First}${infer Rest}`
? First extends keyof LetterMapper
? `${LetterMapper[First]}${Rest}`
: S
: S;ログイン後にコピー
这个 LetterMapper 类型手敲会觉得很浪费光阴，让我们用多光标编辑酷炫的实现它：
多光标编辑之外的选择
VSCode 作为编辑器界的新生代王者，集百家之众长，除了多光标编辑还有很多可以提高编码和重构效率的特性。例如：
- F2 重命名符号，批量替换变量名可以的话就不要用多光标编辑
- Snippets，曾经在 twitter 看到有人发帖说写了一下午的 react 组件，结果人家一个 snippet 就整完了
- Code Actions On Save，在保存文件的时候自动添加缺失的 imports，格式化， lint 的 auto fix 等
- Auto fix 和 fix all，如果你用了自动保存就不能用 Code Actions On Save 了，不过你可以手动调用自动修复和修复所有
- 各种格式化扩展，例如使用 prettier 格式化代码风格，JS/TS Import/Export Sorter 格式化 imports
等等。作为一个 VSCode 老玩家，我都觉得 VSCode 还有很多使用的功能特性地方我没探索到。众所周知，折腾编辑器，折腾 shell，折腾系统，是程序员的三大乐趣。充满未知才会有趣，才能让我们热此不疲，让我们每一次发现新大陆的时候感叹自己以前的无知。
总结
多光标编辑是 VSCode 一个非常实用的特性，熟练掌握光标的移动，选中，删除和一些常用的文本处理命令可以让我们使用多光标编辑时更加得心应手。VSCode 的快捷键设计有它的一套自己的设计哲学，理解它不但有助于我们记忆快捷键，也便于在快捷键表中搜索。在我们自定义快捷键或者编写扩展的提供默认快捷键的时候也应该要参考这套哲学。当你觉得对下前编码重构的效率不满意时，不妨折腾下编辑器，也许能够带给你意外的惊喜。
本文完。
更多关于VSCode的相关知识，请访问：vscode教程！！
以上がVSCode で複数のカーソルを追加して使用する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
