VSCodeでMarkdown効率化！知っておくべき便利な拡張機能とショートカット

1. はじめに

Markdownはシンプルで使いやすい反面、細かな記述に手間がかかることもあります。この記事では、VSCodeのおすすめ拡張機能とショートカットを活用して、Markdownの執筆を効率化する方法を紹介します。

マークダウンのリンクの作成方法や基本的な書き方について学びたい場合は、Qiita記事¹ を流し読みすることをおすすめします。

2. 利用する拡張機能

以下は利用者が多い順に記載しています。私の重宝している順と一致します。

1. Markdown All in One
   1. VS Marketplace リンク
2. markdownlint
   1. VS Marketplace リンク
3. Markdown Table
   1. VS Marketplace リンク

拡張機能のインストールはリンクからinstallを実行するか、拡張機能検索で拡張機能名を入力しインストールできます。

2.1. Markdown All in One

Markdown All in Oneは、Markdownの記述を効率化するための多機能な拡張機能です。以下のような機能があります。

• 見出しの追加や削除
• 目次の自動生成
• セクション番号の自動付与

拡張機能の詳細タグに機能とショートカットの紹介が載っています。わかりやすいのでそちらを確認することをおすすめします。

2.2. markdownlint

markdownlintは、Markdownの文法チェックを行う拡張機能です。これにより、Markdownの書き方に一貫性を持たせることができます。例えば、見出しのレベルが飛んでいないか、リストのインデントが正しいかなどをチェックします。

2.3. Markdown Table

Markdown Tableは、Markdownで表を作成する際に役立つ拡張機能です。簡単に表を作成・編集できるインターフェースを提供します。

3. VSCodeの設定や拡張機能の使い方

3.1. markdownlintの設定

VSCodeでmarkdownlintを設定するには、設定ファイル（settings.json）に以下のように記述します。不要なコメントアウトは削除してください。

"[markdown]":{
  "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"  #この設定が必要
},
"editor.formatOnSave": true    #保存時の自動フォーマット有効にする場合

すでに[markdown]の設定をしている場合は以下のようになります。

"[markdown]": {
    "editor.unicodeHighlight.ambiguousCharacters": false,
    "editor.unicodeHighlight.invisibleCharacters": false,
    "diffEditor.ignoreTrimWhitespace": false,
    "editor.wordWrap": "on",
    "editor.quickSuggestions": {
        "comments": "off",
        "strings": "off",
        "other": "off"
    },
    "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"   #この設定が必要
},
"editor.formatOnSave": true    #保存時の自動フォーマット有効にする場合

保存時の自動フォーマットを有効にしない場合は、Shift + Alt + F でフォーマットを実行してください。

3.2. Markdown All in Oneの使い方

基本的にはコマンドパレットでコマンドを実行します。

コマンドパレットは Ctrl + Shift + P で起動できます。
コマンドパレットにコマンドを入力するとコマンドの絞り込みができます。
検索時は部分一致に対応しているので、キーワードを入力すればOKです。

よく利用する機能をリストアップします。（各コマンドの内容は拡張機能の詳細を確認してください）

• 目次作成:
  • コマンド: Markdown All in One: Create Table of Contents
  • 一度作成するとセクション（見出し）の番号が更新されるとファイル保存時に自動で更新されます。
  • （目次を利用するとセクションへのリンクを作成するのが楽になります。）
• セクション番号を付ける/更新する:（自動で見出しに番号を付ける）
  • コマンド: Markdown All in One: Add/Update section numbers
  • セクションの段落に合わせて番号を割り当ててくれます。
  • おすすめ: コードスパンなどは、4. ショートカットの登録を参考にショートカット登録ができます。
• 太文字や斜体文字のショートカットの自動追加
  • Ctrl + B などで太文字を作成することができます。
  • もともとCtrl + Bを利用していた場合、もともとのショートカットがCtrl + Shift + Bに変わっているかもしれません。
• 見出しの追加 / 削除:
  • Ctrl + Shift + ]
  • Ctrl + Shift + [

「セクション番号を付ける/更新する」の豆知識
h2からセクション番号をつけたい場合はsettings.jsonに "markdown.extension.toc.levels": "2..6"のように設定を追加してください。

3.3. Markdown Table の使い方

Table化された行で右クリックすることで、Markdown 機能が利用できます。

1. フォーマット
   1. 右クリックのメニューから、"Format all tables."を選択します。
2. 行列追加
   1. 行を追加する場合は、tableの行端でtabすると行追加（改行）されます。
   2. 列追加は右クリックから "Insert column to the xxx" を選択する。
3. 位置揃え設定
   1. 右クリックから"Align to xxx" を選択する。
4. csv をTableに変更
   1. csvを選択状態で、コマンドパレットから" Convert CSV to table." を選択する。

4. ショートカットの登録

おすすめは、コードスパンとコードブロックの登録です。プログラマには特におすすめです。
私は以下のようにショートカットを登録しました。

• アクション: リストのトグル
  • コマンド: markdown.extension.editing.toggleList
  • ショートカット: Ctrl + Shift + 7:
• アクション: セクション番号を付ける/更新する
  • コマンド: markdown.extension.toc.addSecNumbers
  • ショートカット: Ctrl + Shift + 9:
• アクション: 打ち消し線のトグル
  • コマンド: markdown.extension.editing.toggleStrikethrough
  • ショートカット: Ctrl + Alt + 5:
• ★アクション: コードスパンのトグル
  • コマンド: markdown.extension.editing.toggleCodeSpan
  • ショートカット: Shift + Alt + 7:
• ★アクション: コードブロックのトグル
  • コマンド: markdown.extension.editing.toggleCodeBlock
  • ショートカット: Shift + Alt + 8:

ショートカット機能の登録方法を2つ紹介します。

4.1. 設定画面からショートカット登録する場合

設定画面からショートカットを登録する場合は、以下の手順に従ってください。

1. Ctrl + K, Ctrl + S を押してショートカット設定画面を開きます。
2. 「検索」欄に登録したいコマンド名（例: section numbers）を入力します。
3. 該当するコマンドを右クリックし、「ショートカットを設定」を選択します。
4. 使用したいキーを入力し、保存してください。
   

4.2. jsonファイルからショートカットを登録する場合

JSONファイルで直接ショートカットを設定する場合は、keybindings.json ファイルを開いて編集します。

1. コマンドパレットで Preferences: Open Keyboard Shortcuts (JSON) を選択します。
2. keybindings.json に直接設定を追加できます。

以下は私と同じショートカット設定です。

[
  {
    "key": "ctrl+shift+9",
    "command": "markdown.extension.toc.addSecNumbers",
    "when": "editorLangId =~ /^markdown$|^rmd$|^quarto$/"
  },
  {
    "key": "ctrl+shift+7",
    "command": "markdown.extension.editing.toggleList",
    "when": "!notebookEditorFocused && editorLangId == 'markdown'"
  },
  {
    "key": "ctrl+alt+5",
    "command": "markdown.extension.editing.toggleStrikethrough",
    "when": "editorTextFocus && !editorReadonly && editorLangId =~ /^markdown$|^rmd$|^quarto$/"
  },
  {
    "key": "shift+alt+7",
    "command": "markdown.extension.editing.toggleCodeSpan",
    "when": "!notebookEditorFocused && editorLangId == 'markdown'"
  },
  {
    "key": "shift+alt+8",
    "command": "markdown.extension.editing.toggleCodeBlock",
    "when": "!notebookEditorFocused && editorLangId == 'markdown'"
  }
]

5. 終わりに

Markdownはとても便利な記法ですが、ショートカットや拡張機能を使うことで、その便利さを最大限に活かすことができます。今回紹介した方法を活用して、ぜひ効率的なMarkdown執筆を楽しんでください！この記事が役に立ったと思ったら、ぜひ「いいね」やシェアをお願いします！

1. Markdown記法 チートシート : 基本的な記述方法を学べます。（一部VSCodeのプレビューでは利用できないものがあることに注意が必要です。） ↩