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の数字を指定する |



「epel-release」インストール後にyum installで「Cannot retrieve metalink for repository」と表示される場合の対処法
Bracket Pair ColorizerでVisual Studio Codeの括弧を色分けして見やすくする
Vue.jsで値段を表示するときに3桁ごとにカンマを入れる方法
Backlogで2段階認証を設定後、SourceTreeでアカウントエラーが発生する場合の対処法
常時SSL化の設定をしたのに「保護された通信」が表示されない時はパスにHTTPが残っているのかも?
SourceTreeの外部Diff / MergeツールをKaleidoscopeに設定する
Vue.jsのv-forで生成した要素をクリックするたびに、classをトグルで付け外しする方法
WordPressのヘッダーにツールバーが表示されないときは、wp_headやwp_footerが入っているか確認
SourceTreeのカスタムアクションを使って差分ファイルだけをまとめる方法
「EWWW Image Optimizer」を使ってWordPressをWebPに対応する方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Gitで1行しか変更していないはずのに全行変更した判定になってしまう
Client Folder Makerでファイルの中身まで一括で作成する方法
Chrome拡張機能の「1Password」と「1Password X」の違いはなに?どちらを使えばいいの?
Google タグマネージャー(GTM)の設定をして、コードを触らなくても確認用スクリプトの設定ができるようにする
Figmaのプロトタイプ機能の基本|作成したデザインに実際に画面遷移を設定する
WordPressのContact Form 7で送信時に回転アイコンが出たまま止まってしまうときのチェックリスト
スクロール時に表示領域に画面がくっつくようになる処理をCSSだけで実現する「scroll-snap」
AlfredのTerminal機能を使って、すばやくターミナルコマンドを実行する
一般的によく使われているテキストエディタでのEmmetの設定方法まとめ
Figmaで図形の分割をして簡単にレイアウトを作成する拡張機能「Split shape」