【VSCode】複数行に同じ文字入力や削除をする（マルチカーソル選択）

複数の行の同じ桁位置に、同じ文字を入力したいことがたまにあります。
カーソルを移動しながら文字を入力するだけですが、行が多いとめんどうになってきますね。

VSCodeは、複数の行にカーソルをセットできる機能があります。
この機能を使うと、めんどうな作業を効率化できます。

複数行に同じ文字を入力するときは、まず次の手順でカーソルを複数行にセットします。

1. カーソルを開始位置に置く

   

2. CtrlキーとAltキーを押しながら、UpまたはDownキーを押す

   

この選択方法は、マルチカーソル選択（Multi cursor selection）という名前があるようです。

この状態で文字を入力すると、カーソルがある全ての行に同じ文字が挿入されます。
deleteキーやbackspaceキーで文字を削除することもできます。

めちゃくちゃ、便利です。

カーソルを複数行選択したまま、移動することも可能です。

CtrlキーとAltキーから指を離して、Up、Down、Left、Rightキーで移動します。

Shiftキーを押しながら移動すると、範囲選択になります。
行の端を超えて選択すると、複数行の前後を選択できます。

知っておくと便利ですね。

VSCodeは、複数行の文字列を矩形で選択できます。

例えば次のようなコードで、コメント部分を消去したいとします。

const abc={
    "a":1,  // ・・・
    "b":2,  // ・・・
    "c":3,  // ・・・・
    "d":4,  // ・・・
}

通常は、一行ずつ消していきます。

この記事の最初に解説しているマルチカーソル選択で良さそうですが、行末が揃っていないと、次のようにレイアウトが壊れることがあります。

const abc={
    "a":1,      "b":2,      "c":3,  
    "d":4,  }

ちょっと、イラっとしますよね。

そこで、次の手順でボックス選択をおこないます。

1. 開始位置にカーソルを置く
2. ShiftキーとAltキーを押す。
3. 選択する範囲の対角を、マウスでクリックする
4. ShiftキーとAltキーを離す。

ボックス選択したあと、deleteボタンを押すと一括で削除できます。

これも、便利ですね。

VS Codeは同一の変数などを把握していて、カーソルを置くと強調表示されます。

この状態で、Ctrlキー と Shifキーを押しながら Lキーを押すと、強調表示されている範囲が選択状態に変わります。

画像を見ただけでは、強調なのか選択状態なのかわかり難いですね。
選択状態はカーソルが表示されます。画像は複数のカーソルが表示されていますね。

変数名を変更したいときなどは、この方法を使うと一度にできて便利です。

また、Ctrlキー を押しながら Dキーを押すと、強調表示されている文字を順番に選択状態にしてくれます。

近くの要素のみを変更したいときは、こちらが便利ですね。