はじめに
- マルチカーソル用の拡張機能「Multi Cursor Viewer」を作成しました。
- 書籍「Visual Studio Code 実践入門」を執筆しました。
拡張機能「Mutli Cursor Viewer」
サイドバーにマルチカーソル一覧を表示する拡張機能です。
また個別のカーソルごとに移動や削除をサイドバーから操作できます。
VSCodeは[Shift + Ctrl + L](macOSは[Shift + Cmd + L])を押すと、同じ単語にまとめてマルチカーソルを作成できます。しかし、ファイル内のすべてが対象なため、画面外にも作成されて分かり難いことがあります。このような状況でも「Multi Cursor Viwewer」で表示すれば、画面内に収まらないのマルチカーソルの位置も認識しやすくなります。
カーソル削除
マルチカーソルを作成した後、本来不要だったカーソルを削除できる機能です。
サイドバーの一覧から「×」ボタンを押すことでカーソルを削除します。
カーソル追加直後ならば標準機能のカーソルUndoで戻せますが、一通り作成した後だと最初からやり直しになってしまいます。この拡張機能を使うことで、あとから途中のカーソルを削除できるようになります。
個別のカーソル移動
サイドバーの矢印ボタンから、カーソル移動や選択範囲の変更が可能です。
１つのカーソル位置だけが合っていない場合、後から個別で調整できます。
選択文字列と連番を使用した置換
サイドバー上側の「Replace」ボタンを押すと、現在選択中の文字列や連番を使用して置換処理を実行できます。
-
「
$1」は選択文字列で置き換えます
例えばnameを選択してthis.$1 = $1;で実行すると、this.name = name;に置換されます。
-
「
$$」は連番で置き換えます。
連番は上から1始まりです。
マルチカーソル時のフックコマンド
単一カーソルからマルチカーソルへの変更時に、自動で実行するコマンドIDを設定できます。
multi-cursor-viewer.autoCommandMultiCursor
下記のように設定すれば、マルチカーソル時に自動で「Multi Cusor Viewer」のサイドバーが開きます。
"multi-cursor-viewer.autoCommandMultiCursor": "workbench.view.extension.multi-cursor-viewer"
まとめ
サイドバーからマルチカーソルを表示・変更できる「Multi Cursor Viwewer」を作成しました。
GUIで扱えるため、マルチカーソルに慣れていない方にもお勧めです。
書籍「Visual Studio Code 実践入門」について
最後に拙著を紹介させてください。
執筆した「Visual Studio Code 実践入門」が出版されました。
カーソル移動や編集系のショートカットキーから順番に説明しています。その操作は、今回のマルチカーソルとも組み合わせて使用できます。ほかにも検索や置換あたりの細々とした動作や、開発環境としてのデバッガやタスク実行、スニペットなどもカバーしています。
このようにVSCodeが備えている基本的な機能を重視した内容です。
また動作をイメージしやすいように、操作例の図を多く載せています。
エディターを効果的に使うには、幅広く機能を知って引き出しを増やすことが重要だと考えて書きました。普段から使用している方でも、振り返って確認すると、便利な手段が見つかると思います。せひ手に取ってみてください。