Visual Studio CodeでMarkdownを書いていて、大量のalt文の連番リネームが必要になったときにやったこと

この記事の概要

Visual Studio Codeで文章を書く中で、挿入する画像のalt文を連番にしないといけない場面がありました。
手動で変更するのは大変だったので備忘録として残します。

なお、記載しているショートカットはmacOSのものです。

当時の状況

• 画像を貼るのは普通のMarkdownの形式（![alt文](画像path)）
• alt文は図1、図2と連番にするルール
• 途中で図が増えた場合、後に続くalt文をすべてずらす必要がある

長い記事だったので画像が100枚くらいあり、手動で変更するのは嫌でした。

対応したこと

1. Insert Numbersをインストールしておく
2. alt文の中身を正規表現ですべて選択する
3. 不要な部分を消して、再度すべてにカーソルを合わせる
4. Insert Numbersで置換する

正直簡単な内容ですが、それぞれ説明します。

Insert Numbersをインストールしておく

Insert Numbersという拡張機能があるので、インストールします。

色々なフォーマットで連番を入力できる拡張機能です。

以下の記事が丁寧に説明されていたのでリンクを貼っておきます。

alt文の中身を正規表現ですべて選択する

状況をざっくり再現するとこうです。

![図1](./image.png)
![図2](./image.png)
![図3](./image.png) <!-- 新しく追加した画像 -->
![図3](./image.png) <!-- これより後の画像はすべて番号を変えたい -->
![図4](./image.png)
![図5](./image.png)
![図6](./image.png)
![図7](./image.png)
![図8](./image.png)
![図9](./image.png)
![図10](./image.png)

この状態で、置換（option + command + F）を実行します。

正規表現モードをオンにして、Findに!\[図.*\]と入力し、Replaceに![図]を入れてReplace All（command + return）を実行します。
（画像番号が1桁から3桁まであったので、正規表現を利用しています。）

不要な部分を消して、再度すべてにカーソルを合わせる

実行すると以下のようになります。
この状態で![図を選択してFind in selection（option + command + L）を実行し、すべての図の文字の後ろのカーソルがあっている状態を作ります。

![図](./image.png)
![図](./image.png)
![図](./image.png)
![図](./image.png)
![図](./image.png)
![図](./image.png)
![図](./image.png)
![図](./image.png)
![図](./image.png)
![図](./image.png)
![図](./image.png)

Insert Numbersで置換する

command + option + nでInsert Numbersを実行します。
デフォルトだと0始まりなので、ショートカットを押して出てきたウィンドウに%d:1:1と入力してreturnを押すと以下の結果が得られます。

![図1](./image.png)
![図2](./image.png)
![図3](./image.png)
![図4](./image.png)
![図5](./image.png)
![図6](./image.png)
![図7](./image.png)
![図8](./image.png)
![図9](./image.png)
![図10](./image.png)
![図11](./image.png)

最後に

非常に簡単な内容ではありますが、最初手作業でやろうとして挫折し、新しい拡張機能まで導入してしまいました。
今回はalt文でしたが画像パスなどでも連番を挿入する場面はありそうな気がして記事にしています。

そうしょっちゅう出くわすシチュエーションでは無いと思いますが、どなたかの役に立てば幸いです。

---

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！

Devトークでのお話してくださる方も募集中です！