【小ネタ】Visual Studio Code で Markdown All in One 機能拡張のインデントを 4 スペースに変更する

VS Code には Markdown All in One という機能拡張があり、これを導入するだけで素晴らしい Markdown 環境を手にすることができます。ただしリストなどのインデントが 2 スペースに固定されてしまうのが少々難点でした。この設定を変更する方法を紹介します。
2019.06.24

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

前置き

みなさん VS Code 使ってますか!(挨拶

改めてご紹介するまでもなく、 Visual Studio Code (VS Code) は比較的後発ながら、テキストエディタとしては一定の地位を占めた感があると思います。主な使われ方としてはコーディング環境というのが多いのかもしれませんが、普段使いや Markdown によるドキュメント書きにも使っている、という方もそこそこいらっしゃるのではないでしょうか(ぼくがそうです)。

ご存じの通り、 VS Code に数々そろっている機能拡張の中には Markdown 用のものも多くあります。

その中で、ぼくはMarkdown All in Oneというものを使っています。これ一つ導入するだけでずいぶんと環境が整ってしまいます。

Markdown All in One - Visual Studio Marketplace

こちらを導入すると、チェックボックスのチェック・アンチェックをはじめとする各種ショートカットキーや、TOC、Table Formater などなど嬉しい機能が追加されるのですが、中でも一番うれしい(というより Markdown エディタとして個人的に必須の機能)のは List Editing 機能でしょう。1行目のリスト項目を書いて改行したら自動的に行頭記号を補ってくれたり、TAB / Shift+TAB でインデントを増減してくれたりする、ビジュアルエディタでは良くあるアレです。

ただし、標準だとこのインデント幅が「2 スペース1」に固定されています。個人的にも 2スペース派なので概ねこれで問題ないのですが、Backlog など一部の Markdown 実装2は 4 スペースによるインデントでないとうまくパースしてくれません。

これまでこの設定の変更方法がよく分かっておらず、都度都度後述する方法で変換かけていたのですが、この度ようやく設定方法を理解したのでご紹介します。

Markdown All in One の導入

念のために導入方法を書いておきますが、普通に機能拡張のリストの中から探してインストールしてください。

変更方法

以下の二つの設定を変更します。

  • Markdown All in One の List: Indentation Sizeinherit にする
  • エディタのタブサイズを 4 スペースにする

Markdown All in One の Indentation Size を変更

まずは VS Code の設定を開きます。開き方は下記公式ドキュメントをご覧ください。

macOS 版なら command+, で一発ですね。

ここで目的の設定を探します。「設定の検索」フォームに Indentation Size と入力すれば絞り込まれるので、探すのも簡単かと思います。

デフォルトだと設定値は adaptive (箇条書きで 2スペース、項番付きで 3スペース)になっています。

通常状態だとこれはこれで嬉しいのですが、ここではこれを inherit (現在の TAB サイズ設定に従う)に変更します。

変更したら、特に保存ボタンなどはないので設定タブを閉じてください。

これでリストのインデントが、現在のエディタの設定にならうようになりました!

エディタのタブサイズを変更

ではその「現在のエディタの設定」のタブサイズいくつになっているでしょうか。右下のインジケータ部に表示されています。

もしお望みの設定になっていなければ、ここをクリックして、表示されるコマンドパレットで設定を変更してください。例えば今回の場合で言えば、

  • スペースによるインデント(Indent Using Spaces) -> 4

と順番に指定することになります。ちなみにこちらは一時的な変更になるので、別のファイルを編集するときには都度都度設定変更することになります。

Markdown の時には自動的にタブサイズを設定したい場合

もしですが、普段はタブサイズを「スペース 2」に、Markdown の時だけ「スペース 4」にしたい、といった場合には、「Language specific editor settings」機能が使えます。上述した方法で設定画面を開いて、右上の「{}」アイコンをクリックします。

設定内容が JSON の状態で表示されるので、適当なところに下記のように書き加えてみてください。既に "[markdown]": { ... } というオブジェクトが存在する場合は、その中に追記する感じでいいでしょう。

    "[markdown]": {
        "editor.tabSize": 4,
    },

これで、Markdown ファイルのデフォルトのタブサイズが 4 に設定されます。

参考 : インデントサイズを変換する

以下は参考です。いま既に「スペース 2」で記述されているファイルを「スペース 4」に変換するにはどうすればいいでしょう。

一番簡単なのは、正規表現で「行頭のスペースの数を倍(2 -> 4)にする」という置換編集を行うことでしょうか。細かい説明は省きますがこんな感じです。

^(\s*)([\-\*]\s) -> $1$1$2

ただしこれだと、数を整数倍する時には使えても、逆に減らしたりするときには使えません。

そういう時には VS Code だけで簡単に行う方法はなさそうなので、いったん「TAB記号」に置換し、数を合わせた後スペースに変換、とするといいでしょう。以下の手順でコマンドを実行することになります(めんどくさいですね)。

  • エディタのタブサイズを、変換元の設定に合わせる(例えばスペース 2 など)
  • コマンドパレットから インデントをタブに変換(Convert Indentation to Tabs) を実行
  • エディタのタブサイズを、変換元の設定に合わせる(例えばスペース 4 など)
  • コマンドパレットから インデントをスペースに変換(Convert Indentation to Spaces) を実行

まとめ

VS Code の Markdown 環境をカスタマイズし、箇条書きのときのインデントサイズを設定する方法をご紹介しました。ほんとうは環境によってインデントサイズが異なる方がイマイチ感があるのですが、いろいろと事情があって難しい場合、せめて人間に一番近いところで差異が吸収された方が、人間のミスや非効率性をカバーできてうれしいところでしょう。うまく道具を使いこなして快適な人生を歩みたいですね!

参考URL

脚注


  1. 後述する設定のヘルプに "Use 2 spaces for unordered list and 3 for ordered" とあるように場合によっては3スペースなのですが、わかりやすさのためにここではこう書いています 
  2. そもそもMarkdownの箇条書きのインデントには明確な仕様がなさそうなので無理もないのですが…実はDeveloppers.IOブログのMarkdownパーサーも、歴史的な経緯のためか2スペースインデントだとうまくパースしてくれません(泣