Visual Studio Code マルチカーソルが便利

はじめに

Visual Studio Code – コード エディター | Microsoft Azure でプログラミングをしています。

毎日マルチカーソルのお世話になっています。布教している方がすでにたくさんいますが、同じように書いてみます。

想定読者

• Visual Studio Code (以下 VS Code) を使っている人
• 正規表現でテキスト検索や置換をしている人

TD;LR

マルチカーソルはカーソルを増やす機能です。増やしたカーソルの場所に、一気に文字を追加・削除できます。便利。

詳細は公式解説 Basic Editing in Visual Studio Code をどうぞ。

動画の解説

詳細は公式解説、でこの記事が終わらないように、動画の解説をはじめます。

1. タブ区切りの表を Markdown 形式にする

1. [Ctrl]+[Shift]+[↓] を11回繰り返し、12個の数字の行頭にカーソルを置く
   • [Alt]+[Shift]+[左クリック] の矩形選択でも OK
2. [Ctrl]+[→] で数字の右まで移動する
   • 「1～9」は1文字、「10～12」は2文字と文字数が違うため、かたまりをまとめて動かせる [Ctrl] を使う
3. 「月」を漢字入力する
   • 12個の「月」が追加される
4. [Esc] でいったんマルチカーソル終了
5. [Shift]+[→] でタブ文字を選択する
6. [Ctrl]+[Shift]+[L] ですべてのタブ文字上にカーソルを置く
   • 14行×1行あたり2か所、合計で28個のカーソルになる
   • 確認しながら選択したいときは [Ctrl]+[D] で1つずつ
7. [|] を入力する
   • 28か所のすべてのタブ文字が「|」に置き換わる
8. 行頭に [Home] 、行末に [End] で移動し、[|] を入力する
   • 行頭に移動すると、1行あたり2個のカーソルがまとめられて1行あたり1個になる
   • 行頭・行末にも「|」が追加される

→ Markdown 形式の表の完成

月	和名	英語
1月	睦月	January
2月	如月	February
3月	弥生	March
4月	卯月	April
5月	皐月	May
6月	水無月	June
7月	文月	July
8月	葉月	August
9月	長月	September
10月	神無月	October
11月	霜月	November
12月	師走	December

2. 表から欲しい列を取り出して 1行にする

1. [Shift]+[→] でタブ文字を選択する
2. [Ctrl]+[Shift]+[L] ですべてのタブ文字上にカーソルを置く
3. [Home] で行頭にカーソルを移動する
   • ここまでで動画1の [Ctrl]+[Shift]+[↓] ×11 と同じ結果。すこしタイプ数を減らしました。
4. [Ctrl]+[Shift]+[→] で12個の数字を選択
5. [Ctrl]+[X] で12個の数字を切り取り
6. [Del] [Ctrl]+[Shift]+[→] [Del] [Del] でタブと和名の行を消し、英語だけにする
7. [(] でかっこを追加
   • 12組の () かっこが追加
   • 閉じかっこは VS Code が追加してくれる
8. [Ctrl]+[V] でかっこ内に数字を貼り付ける
   • クリップボードの行数とカーソルの個数が一致していると、それぞれの場所に貼り付けられる
9. [→] でカーソルを行末に動かし、[,] [ ] を追加
10. [Del] で改行を消す

→ 1行のテキストの完成

January (1), February (2), March (3), April (4), May (5), June (6), July (7), August (8), September (9), October (10), November (11), December (12), 

なにが違うの？

マルチカーソルを使わなくても、他の方法で同じようなことができるはずです。それらと比較してみます。

矩形選択

矩形選択できるテキストエディターや文書作成ソフトはいろいろあります。MS-Word でも [Alt]+[Shift]+[左ドラッグ] で矩形選択できます。選択した範囲をコピー・削除などができます。

しかし、マルチカーソルのようになんでもありではないものも多いです。文字を追加しようとするとカーソル1つに戻されてしまいます。

VS Code でも矩形選択できます。これは行ごとにカーソルが追加されます。マルチカーソルと同じです。

正規表現で置換

マルチカーソルを使わなくても、テキストエディターに正規表現で置換する機能があれば同じようなことができます。VS Code でも使えます。

動画	検索	置換
1.	^(.+?)\t(.+?)\t(.+)$	|$1月|$2|$3|
2.	^(.+?)\t(.+?)\t(.+)\n	$3 ($1),

しかし正規表現による置換は、この場所の文字がここに対応するはず、というのを事前に頭の中でシミュレーションしてから書くことになり、私はちょっと億劫になります。文章を書いていたはずなのに、一度正規表現脳に切り替えないといけないと言いますか。たまにかっこの対応を間違えます……。

マルチカーソルの場合は、カーソル位置の結果を見て正しいと確認しながら操作できます。置換に比べると作業の流れを止めずに行えるかなと思います。いたって感覚的な理由です。

Excel

今回の例のように表形式なら Excel でできます。わざわざテキストエディターでがんばらなくても大丈夫。

動画	セル D2
1.	="|"&A2&"月|"&B2&"|"&C2&"|"
2.	=C2&" ("&A2&"), "

でも、これくらいのことでアプリを切り替えるのは面倒です。Excel に張り付けると、分数が日付になってしまった、ということもありますし。

マルチカーソルと選択のショートカット一覧

公式チートシート [Ctrl]+[K] [Ctrl]+[R] のマルチカーソル部分を抜き出して日本語に訳しました。

キー	コマンド
[Alt]+クリック	カーソルを追加
[Ctrl]+[Alt]+[↑]/[↓]	カーソルを上下に追加
[Ctrl]+[U]	カーソル操作を元に戻す
[Shift]+[Alt]+[I]	カーソルを行末に追加
[Ctrl]+[L]	行を選択
[Ctrl]+[Shift]+[L]	選択中の文字列と同じものをすべて選択
[Ctrl]+[F2]	カーソル位置の単語と同じものををすべて選択
[Shift]+[Alt]+[→]	選択範囲の拡大
[Shift]+[Alt]+[←]	選択範囲の縮小
[Shift]+[Alt]+ドラッグ	矩形選択
[Ctrl]+[Alt]+[Shift]+[カーソル]	矩形選択
[Ctrl]+[Alt]+[Shift]+[PgUp]/[PgDn]	矩形選択 ページ上下

動画で使用したもの以外にも、便利なショートカットがいろいろあります。詳細は公式解説 Basic Editing in Visual Studio Code をどうぞ。

マルチカーソルの副作用

マルチカーソルを使うときは、複数の箇所に対して同じようにキー操作をしてどこも同じような結果になって欲しいです。1行目は大丈夫だけれど2行目は思った場所の隣になったりするとカオスになります。

そこで、マルチカーソルを使えるような単純なキー操作や単純な書き方にしたくなります。たとえば:

[Home] [End] をよく使う

普段カーソルを一気に動かすときには [Ctrl]+[←]/[→] が便利です。ホームポジションでから離れた場所にある [Home] [End] を使うことは少なく、使うとしても行単位ではなくて文頭文末に移動する [Ctrl]+[Home] [Ctrl]+[End] くらい、という方も多いのではと思います。

しかし、複数行を操作するときには、それぞれの行のどこで [Ctrl]+[→] が止まるか予測しづらいです。たとえば下のテキストで '', "" の間を空にしたいとき、[→] を押す回数を揃えるのは大変です。それよりは [End] 1回行末に移動してから戻る方が簡単です。

const foo='foo';
const bar= "bar text";
let baz  =" baz 可変 文字列 ";

[Home] [End] をよく使うほか、[Ctrl]+[Alt]+[Shift] ともう1つのキーを組み合わせた4つ同時押も良く現れます。コンパクトキーボードを使うと [Fn] キーでさらに押す数が増えて、入力しづらいかもしれません。

テキストの書き方を揃える癖がつく

上の例は JavaScript で、文法的には正しいです。でもこれを見たらこんなぐちゃぐちゃな書き方やめてくださいと思うことでしょう(汗)。

マルチカーソル的にも、文字列の囲み方が '" 混在していると、 [Ctrl]+[D] で片方しか選択できなくて困ります¹。= を起点にしようにも空白が揃っていなくて、どうにも。

次のように記号やスペースの入れ方が整っていれば、" を起点にしてまとめて処理できそうです。

const foo = "foo";
const bar = "bar text";
let baz = " baz 可変 文字列 ";

こういう整形について書く人が気にするのも、読む人が整形されていないことに気を取られるのも勿体ないです。プログラミングの世界では、このあたりの整形を各言語おすすめの自動処理に任せることが多いです。たとえば JavaScript では Prettier 先生が定番です。

マルチカーソルに限らず、一般的に大事な情報が見やすく扱いやすくなるように、ノイズ的なの情報を減らすことは大事です、と。

フォントを意識する

[Ctrl]+[Alt]+[Shift]+[カーソル] で矩形選択するときに、プロポーショナルフォントだとガタガタしがちです。アルファベットと記号が同じ幅、ひらがなカタカナ漢字が同じ幅だと矩形選択が揃いやすくなります。昔は半角文字・全角文字と呼んでいたものです。

VS Code でプログラムを書くときは、プログラミング用のフォントを使うのがおすすめです。等幅フォントなどの文字種によって幅が揃っているものを選ぶと ²、矩形選択しやすいです。ほかにも文字が読みやすいなどの利点があります。

個人的おすすめフォントは、英数字が広めで見やすい Fira Code, HackGen 35 です。別の機会に記事化したいです。

• tonsky/FiraCode: Free monospaced font with programming ligatures
  • "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss05', 'ss06', 'ss07'"
• yuru7/HackGen: HackGen is Japanese programming font which is a composed of Hack and GenJyuu-Gothic.
  • HackGen35Nerd Regular

最後に

この記事がマルチカーソルの布教につながっていたら幸いです。

動画素材作成

今回の動画素材は、VS Code 上でのキー操作を以下のツールで録画しました。

• ScreenToGif - Record your screen, edit and save as a gif, video or other formats
• brookhong/KeyCastOW: keystroke visualizer for Windows, lets you easily display your keystrokes while recording screencasts.

1. 本記事を書いている VS Code Ver.1.55 時点では、[Ctrl]+[D] を押すと画面右上に正規表現オプションが出ます。しかしどう効くのか分かりませんでした。 ↩

2. いわゆる半角文字と全角文字の幅の比が 1:2 だと等幅フォントですが、2:3 や 3:5 という違う整数比だとプロポーショナルフォント扱いになります ↩