50代からのHTML / CSS / JavaScriptチャレンジNo.86 番外編VScodeについて９

こんにちは～今日は同種選択について学習します。前回やったボックス選択の場合は、隣り合ったものは選択できるんだけど、離れた場所にあるものは選択することができない。そんな時に便利なのが同種選択。

同種選択

例えば、<li>タグを書き換えたい場合、まず、<li>タグのところを選択して、この状態で、Ctrl+DもしくはCmd+Dを押す。そしたら、次の所にある<li>が選択される。もう一度押すと、さらに選択される。もう一度押すと離れた場所にある<li>も選択される。ようは全部選択できるってことね。
そしたら一機にデリートできる。

また、一機に選択することもできる。1つ目を選択した状態で、Ctrl+ShiftもしくはCmd+ShiftとLキーを押す。するとヒットしたものが全部選択される。さっきと同様一機にデリートしたりできる。

こんな感じで、離れた場所にあってもマルチカーソルに移行できる。マルチカーソルは、一気に何かを編集する時に非常に便利なんだけど、拡張機能と組み合わせるとより便利に使うことができる。

インサートナンバーズ

拡張機能のアイコンをクリックして、検索窓に、insert numbersと入力。そしたら、検索でヒットしたinsert numbersを選択してインストール。拡張機能についての説明を見るとCmd（Ctrl)+Alt +Nというキーボードショートカットを使ってくださいと指示がある。

そしたら、VScodeに戻って、<li>タグのところで、Ctrl+Alt+下矢印キーをおして、マルチカーソルに移行する。例えば、id="item"と入力。マルチカーソルで選んでるところ全てに、id="item"の記述ができるんだけど、ここに１，２，３って振りたい。これを一気に行えるのがこの拡張機能のインサートナンバー。

それじゃ、マルチカーソルのまま、Ctrl（Cmd）+Alt+Nキーを押す。そしたら、０，１，２と数字が割り振られたのが分かる。それと、画面上の方にコマンドパレットも表示される。なにか入力できるようになっている。

例えばここに％ｄ：１：１と入力してエンターを押す。すると、先ほどは０，１，２だった数が、１，２，３に変更される。

別バージョンでもやってみる。Ctrl+Alt+Nとして、コマンドパレットに％０３ｄ：５：２と入力して、エンター。
こんどは００５，００７，００９に変わった。要は番号の振り方の指示がだせるってことね。

こんな感じで、インサートナンバーを使うと、マルチカーソルと合わせて連番を振ることが出来るんだって。これは結構便利なのでは？？

というわけで、今日はここまで＾＾お疲れ様でした＾＾