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

Visual Studio Codeで連番を入力したいときがありました。
HTMLであればEmmetを使ってclass名などを連番にできますが、例えばスタブ用のJSONで要素を増やすためにコピペをして、値部分に連番を追加したいときには使えません。

Webrandum

Emmetで複数のタグを一括展開して、コーディングスピードをさらに上げる方法

https://webrandum.net/emmet-multiple-tag

効率的にHTMLを入力するために、Emmetは欠かせない機能です。意外と知られていませんが、Emmetでは複数タグを一括展開できます。たとえば下記の1行をざっと書いてtabでEmmet展開をすると...header.header>.header_wrap>.header_left>h1>img^^.header_right>nav>ul.header_nav>li*3>a下記のHTMLが一気にできあがります。<header class="header"> <div class="header_wrap"> <div class="header_left"> <h1><img src="" alt=&...

今回紹介する拡張機能の「vscode-input-sequence」を使えば、連番の入力ができます。

vscode-input-sequence

marketplace.visualstudio.com

vscode-input-sequence - Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=tomoki1207.vscode-input-sequence

Extension for Visual Studio Code - sequential-number in vscode

vscode-input-sequenceはマルチカーソル機能を使ってカーソルを置いた状態で、ショートカットキーで開けるパネルで連番用の入力をすると、それに従って連番が入力されます。

連番の入力方法

まずは連番を入力したい場所にマルチカーソルを置きます。

単語を選択してshift + command + Lを押せば、選択している単語すべてがファイル上で選択されるので、とりあえずそれだけ覚えておいて問題ありません。
マルチカーソル機能に関しては過去に記事にしているので、他の選択方法も知りたい場合はそちらをぜひご覧ください。

Webrandum

Visual Studio Codeのマルチカーソル機能で文字操作を一括で行う

https://webrandum.net/vscode-multiple-cursors

Visual Studio Codeを使っていると、一括でコードを入力したいときがあります。そんなときに使えるのが「マルチカーソル」機能です。マルチカーソル機能マルチカーソル機能はエディタ上の複数箇所にカーソルを当てられる機能で、文字入力などの操作を同時に行えます。使い方が下記の通り複数存在します。  option + クリックoptionを押しながらカーソルを追加したい場所をクリックshift + option + ドラッグshiftとoptionを押しながらドラッグで、ドラッグした箇所にカーソルを追加する中ボタンでドラッグマウスの真ん中の中ボタンを押...

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

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

連番の構文は下記のような構造になっています。

<start> <operator> <step> : <digit> : <radix>
<開始値> <演算子> <増減値> : <桁数> : <基数>

開始値以外は省略可能で単に「0」と入力すると、0から開始する連番になります。
10から1ずつカウントダウンしたい場合は「10 – 1」と入力すればOKですし、0から2ずつ増やしたい場合は「10 + 2」のようにします。

細かい構文ルール

その他細かいルールとして、連番の桁数や基数まで指定できます。
そこまで複雑なルールはないので、すぐ使いこなせるようになると思いますし、パネルにも構造がプレースホルダーとして表示されるので、忘れてもすぐ思い出せそうです。