VS Codeでマークダウンを快適に書きたい！オススメの拡張機能と設定6選

VSCode

ブログの文章やドキュメント作成など、さまざまなシーンで使われる記法に「マークダウン記法」があります。文字修飾の簡単さや読みやすさから使うタイミングは多々あると思いますが、みなさんは快適にマークダウンを書けていますか？

筆者はVS Codeでドキュメントをマークダウンで書くことが多く、表の作成・編集やプレビュー表示など、めんどくさい・見づらい・使いづらいと思うことがあります。どうにか快適に書けないかと思いさまざまな拡張機能や設定を試しながら業務を行ってきました。

この記事では、筆者が試した拡張機能やVS Codeの設定の中で便利だったものを紹介します。①から⑥まではすべて無料で利用できるので気軽に試してみてください！

①マークダウンの表をエクセルからコピペできる拡張機能

VS Codeでの表の作成に重宝しているのが「Excel to Markdown table」という拡張機能です。エクセル上の表をワンアクションでマークダウンの表に変換できます。

列や列、文字数が多い表をエクセルで内容を整えてからマークダウンにコピペして使っています。

使い方

エクセルで表を作成する
コピペしたい範囲を選択、コピーする（Windows: Ctrl + C、Mac: command + C）
マークダウン上で貼り付けする（Windows: Shift + Alt + V、Mac: shift + option + V）

Excel to Markdown tableで表をマークダウンに貼り付ける

②マークダウン上での表作成・編集を支援する拡張機能

①で作った表をマークダウン上で編集したい時に便利だった拡張機能が「Text Tables」です。

4×4など行列を指定して空の表を作ったり、Tabキーでセル移動をしたり、Enterキーで行を追加するなど、表の操作を簡単にする機能があります。

小さい表であれば①の拡張機能は使わず、これだけで表の作成・編集をすることが多いです。

使い方

4×4の表を作る場合

コマンドパレットを開く（Windows: Ctrl + Shift + P、Mac: command + shift + P）
Text Tables: Create tableを選択する
行列を指定してEnterを押す

Text Tablesで4×4の表を作る

表の編集をする場合

コマンドパレットを開く（Windows: Ctrl + Shift + P、Mac: command + shift + P）
Text Tables: Enter table modeを選択する
Tabキーでセル移動、Enterキーで行を追加する
終了したい場合はコマンドパレットからText Tables: Exit table modeを選択する

Text Tablesで表の編集をする

③マークダウンのナビゲーションを表示する拡張機能

VS Codeではデフォルトでマークダウンの見出しを「アウトライン」に表示します。これでも十分ですが、「#」や「abc」などの余計な情報があり見づらいと感じます。

「Markdown Navigation」は、シンプルな表示が見やすい拡張機能です。地味ですが意外と効果があるのでぜひお手元で試してみてください。

使い方

拡張機能をインストールする
マークダウンファイルを開くと「MARKDOWN NAVIGATION」が表示される

VS CodeのアウトラインとMarkdown Navigationの比較

④見出しを色分けして表示する設定

マークダウンの見出し（#や##）の表示色が設定できます。見出しのレベルをひと目で確認できるので、間違いにすぐ気付けたり文章の構造がわかりやすくなりオススメの設定です。

使い方

コマンドパレットを開く（Windows: Ctrl + Shift + P、Mac: command + shift + P）
settingsと入力し、「基本設定：ユーザー設定を開く (JSON) (Preferenses: Open user Settings (JSON))」を開く
以下のように色を設定する

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        // 見出しレベル1の設定
        "scope": "heading.1.markdown entity.name.section.markdown",
        "settings": {
          // ここに任意の色を設定する
          "foreground": "#4d85c3",
        }
      },
      // 見出しレベル2以下も同様に設定する
    ]
  },
}