VScodeのマルチカーソル機能の使い方【コードを一度に修正する時短術】

この記事では、Vscodeでとても役立つマルチカーソル機能について説明していきます。

Vscodeのマルチカーソル機能を使えば、同時に小さな変更にかかる時間を短縮させることができます。

Vscodeを使っている人で、コードを書くスピードを早くしたい人は参考にしてください。

Vscodeのマルチカーソル機能とは

Vscodeのマルチカーソル機能とはカーソルを一時的に増やす機能のことです。
増やしたカーソルをうまく使えば、同時に変更をすることができるようになります。

具体例を見てみましょう。
テキストエディターで上のようになっていたとします。

そして、以下のように2つの修正が必要な場合になったとします。

  • 「success」というクラス名を付けてたつもりが、「succes」とミスタイプしているのを修正したい
  • 全てのsuccessクラスに「hello」クラスを追加したい

通常であれば、カーソルを移動させてsを追加して、半角スペースを空けてhelloと打ち込むことを5回繰り返さなければいけません。
とても面倒な作業ですよね。

数個の修正ならまだしも何十個もある場合は、時間がかかります。
コードが長いと見落としてしまう可能性もあります。

そんな面倒な作業を1度に、しかも正確に修正できるのがVscodeのマルチカーソル機能です。

自分が欲しい場所にカーソルを作成し、一度に変更と追加をすることができます。

このようにVscodeのマルチカーソル機能を使うことによって、コードの修正の時間を短縮することができます。

Vscodeに機能を追加する必要など全くないので、使わない手はありません。

Vdcodeのマルチカーソル機能の使い方

Vscodeのマルチカーソルの使い方を解説していきます。

この記事では3つの方法を紹介します。

  1. クリックしてカーソルを増やす
  2. 同じ文字を起点にしてカーソルを増やす
  3. 上下キーでカーソルを増やす

それぞれカーソルの出方に違いがあるので、時と場合によって、使い分けてみてください。

クリックしてカーソルを増やす

一番簡単にマルチカーソル機能を使うには「option+クリック」です。

optionを押している間は、クリックするたびに、カーソルが増えます。

細かい場所にカーソルをたくさん作りたい時に有効です。

同じ文字を起点にしてカーソルを増やす

次に、同じ文字を起点にしてカーソルを増やす方法を紹介します。

まず、command+Dを押すと、カーソルがある文字列と同じ文字が自動選択されます。
この時に薄くハイライトされるので、どの文字が選択されているのかが分かります。

同じ文字を選択した上で、「shift+command+L」を押します。
すると、選択された文字の1番末尾にカーソルが出現します。

注意してほしいのがcommand+Dでの選択範囲はファイル一式ということです。

そのため、表示されていないところに同じ言葉があると、知らないうちに選択してしまい、変更がいらないところまで変更してしまうことがあります。

shift+command+Lを押した時に、選択されている数がエディターの下部に表示されるのでチェックするようにしましょう。

補足

shift+command+Lだけでも、Vscodeが自動的に同じ言葉を考えてくれますが、command+Dでハイライトされたことを確認できるのでオススメです。

上下キーでカーソルを増やす

「option+command +上下キー」で、カーソルがある場所から上または下にマルチカーソルを作成することができます。

コードの末尾にコメントを書いたりするような時に使うことができます。

ちなみに、「option+command +左右の矢印」だと、マルチカーソル機能ではなく、Vscodeで現在開いているファイル間を移動することができます。

まとめ:Vscodeのマルチカーソル機能を使ってコーディングを効率化

Vscodeのマルチカーソル機能の使い方について紹介しました。

このマルチカーソル機能を使うのと、使わないのとでは細かい修正の時間に大きな時間差ができます。

うまくこの機能を使ってコーディングにかかる時間を短縮させてみてください。

作業には制限時間をつけよう!時間がないと思えば脳は動く!

2018年1月23日

【SpinidoノートPCスタンドレビュー】パソコン作業で猫背予防をするアイテム

2018年12月29日