Visual Studio Codeで連番を入力する拡張機能「vscode-input-sequence」

Visual Studio Codeで連番を入力したいときがありました。
HTMLであればEmmetを使ってclass名などを連番にできますが、例えばスタブ用のJSONで要素を増やすためにコピペをして、値部分に連番を追加したいときには使えません。
今回紹介する拡張機能の「vscode-input-sequence」を使えば、連番の入力ができます。
vscode-input-sequence

vscode-input-sequenceはマルチカーソル機能を使ってカーソルを置いた状態で、ショートカットキーで開けるパネルで連番用の入力をすると、それに従って連番が入力されます。
連番の入力方法
まずは連番を入力したい場所にマルチカーソルを置きます。
単語を選択してshift + command + Lを押せば、選択している単語すべてがファイル上で選択されるので、とりあえずそれだけ覚えておいて問題ありません。
マルチカーソル機能に関しては過去に記事にしているので、他の選択方法も知りたい場合はそちらをぜひご覧ください。

カーソルが置けたら、option + command + 0を押してパネルを表示します。

最後に連番を作成するための構文を入力してenterを押せば入力されます。

連番の構文は下記のような構造になっています。
<start> <operator> <step> : <digit> : <radix>
<開始値> <演算子> <増減値> : <桁数> : <基数>開始値以外は省略可能で単に「0」と入力すると、0から開始する連番になります。
10から1ずつカウントダウンしたい場合は「10 – 1」と入力すればOKですし、0から2ずつ増やしたい場合は「10 + 2」のようにします。
細かい構文ルール
その他細かいルールとして、連番の桁数や基数まで指定できます。
そこまで複雑なルールはないので、すぐ使いこなせるようになると思いますし、パネルにも構造がプレースホルダーとして表示されるので、忘れてもすぐ思い出せそうです。
| キー | デフォルト | 内容 |
|---|---|---|
| start | “” | 整数を入力し始める番号を指定する |
| operator | + | 「+」または「-」連番の生成規則を指定する(++や–も指定可能) |
| step | 1 | 加算または減算する数を指定する |
| digit | 0 | 連番の桁数を指定する |
| radix | 10 | 基数を表す2〜36の数字を指定する |



Visual Studio Codeで対応する括弧に色を付けて見やすくする環境設定
効率的なマークアップが出来るようになるEmmetでHTMLを書く時の基本
Visual Studio Codeを使ったコード整形方法(Fomatter)
WordPressで「現在メンテナンス中のため、しばらくの間ご利用いただけません。」の状態でログインできなくなった場合の対処法
CSS疑似要素(::beforeや::after)のcontent内で改行したり半角スペースを複数入力する方法
Google Maps APIでピンをクリックしたときに吹き出しを表示する方法
Nuxt.jsでaxios-moduleを使ってAPIからデータを取得・表示する|Nuxt.jsの基本
Nuxt.jsでVuexストア連携を行う方法|Nuxt.jsの基本
MacVim-Kaoriyaのインストール方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Path Finderを使ってキーボードだけでファイル操作する方法(基本操作編)
Node.jsのバージョン管理をnodebrewからnodenvに移行する方法
毎日必ず行っている操作を少しでもラクにする!Macのカーソル操作関連の小技
Google DriveのmacOSアプリ「バックアップと同期」のインストールと最低限の設定方法
ジッと瞑想しているのがツラい人にオススメな、歩きながら行う「歩行瞑想」
BetterTouchToolを使って、ショートカットキーでAirPods ProをMacBook Proに接続する方法
Sketchのパス周りの基本操作|基本的な描画方法からベクターツールと直線ツールの違いまで
Figmaで細かいアニメーションを作成できるプラグイン「Motion」
ATOKで英単語変換時に、すべて大文字・小文字の状態で変換する方法