simple-web-system technology

Webに関する技術をシンプルに扱うブログ

VSCodeの選択の便利機能紹介

公式ドキュメントにあるのを紹介するだけですが、意外と知らない方も多いので 選択系に関して紹介します。

なんかいい感じに選択できる方法ないかなと思ったら、ここから公式ページをたどっていただけると幸いです。

注意

筆者はメインがWindows/Linuxのため、Ctrlキーで表記しています。

Macの場合は、Cmdキーを使ってください

例:`Ctrl + d`でマルチカーソルは、Macだと`Cmd + d`

同様に、 altキーは、Macでは Optionキーです。

shrink/expand selection

選択範囲を単語・括弧・関数単位でいい感じに拡大・縮小します。

これ知られてないですけどめっちゃ便利です。(知らないと、関数全体選択とか苦労します。)

個人的には、ReactやHtmlのタグ、FlutterのComponent単位で選択、他にもそれらのListenerに使用する関数だけを選択に役立っています。

多分Lisp使ってる人は、わかりやすいはず。

ctrl + shift + →で選択範囲拡大、ctrl + shift + ←で選択範囲縮小です。

https://code.visualstudio.com/docs/editor/codebasics#_shrinkexpand-selection

マルチカーソル

単語単位で選択したい場合は、ctrl + dを押します。

選択された状態で、ctrl + dを繰り返し押すと、選択範囲と同じ文字列が選択されていきます。

ある特定の文字列を一気に選択したい場合は、その文字列を選択したあとに、ctrl + shift + lを押します。

上記の状態で、キーボード入力すると、選択範囲の単語が削除され、入力された文字列が入ります。

削除されるのがいやであれば、で文字列の先頭、で文字列の後ろに移動できるので、追記してください。

またマルチカーソル状態でもCtrl + ←/→で単語単位で移動できるのを使うと、うまく編集できます。(ここだけMacでは Optionキー)

自分は変数名をさくっと書き換えたりするのに使ったりします。

とりあえず複数編集でなんか迷ったらマルチカーソル使うクセをつけるといいです。

自分は大体は上記の方法で問題が解決するのですが、他にもマルチカーソルによる選択方法があるので、公式をご覧ください

https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor

マルチセレクト・余談

大文字小文字の区別をつけたいときは、ctr + fを押して、検索ポップアップを出して、 Aaを選択する。

その後にctrl + dを押すと、大文字小文字の区別をつけて、マルチカーソルできます。

矩形選択

くけいせんたくと読みます。四角形上に選択します。

shift + altを押しながら、マウスで選択します。

規則的に並んでいるコードをまとめて変更するときに使います

(まぁ、大抵マルチカーソルで十分だったりしますが)

https://code.visualstudio.com/docs/editor/codebasics#_column-box-selection

行選択

ctrl + lで一行まるごと行選択できます。

個人的には、一行選択したあとに、で行の先頭。→←で行の一番最後に移動するのをよく行います。