VS CodeでMarkdownを書くならこれ！必須のおすすめ拡張機能7選【プレビュー・テーブル・画像貼り付け】

SHARE

世界中のエンジニアやライター、研究者に愛用されている大人気コードエディタ「VS Code（Visual Studio Code）」。標準でも快適にMarkdown（マークダウン）を記述できますが、拡張機能（Extensions）を追加することで、専用の有料エディタを凌駕する超強力な執筆環境へと進化します。

「VS CodeでMarkdownを書くならどの拡張機能を入れるべき？（vscode markdown 拡張機能 おすすめ）」「プレビューや表（テーブル）の作成、画像の貼り付けをもっと簡単にしたい（vscode markdown テーブル / 画像 貼り付け）」「文章の校正や目次（TOC）の自動生成、PDF変換を効率化する方法は？」とお悩みではないでしょうか。

この記事では、VS CodeでのMarkdown執筆を劇的に快適にする「必須のおすすめ拡張機能7選」を厳選してご紹介します。各ツールの特徴や使い方だけでなく、コピペで使えるおすすめの設定例（settings.json）や用途別の組み合わせセットまで分かりやすく解説します。

【一覧表】VS Code Markdownおすすめ神拡張機能7選

まずは今回紹介する7つの拡張機能の機能とおすすめ度を一覧で確認しましょう。

拡張機能名 主な機能・メリット おすすめの用途
1. Markdown All in One 目次（TOC）自動生成、キーボードショートカット、リスト自動連番、数式補完 全ユーザー必須！ 基本操作の効率化
2. Markdown Preview Enhanced Mermaid図・数式（LaTeX）・HTML/PDF書き出し・超高機能リアルタイムプレビュー 技術文書・仕様書・図解作成
3. Paste Image クリップボードの画像をショートカット一発で保存＆相対パス自動挿入 ブログ・画像付きマニュアル執筆
4. Markdown Table Prettifier 崩れたMarkdownテーブルを自動整列・ワンクリックで綺麗にフォーマット 表（テーブル）を多用する記事作成
5. markdownlint Markdownの文法エラーやスタイル不一致をリアルタイム検出し自動修正 チーム開発・表記ゆれ防止・品質管理
6. Markdown Footnotes 脚注記法（[^1]）のプレビュー表示とリンクジャンプをサポート 論文・専門記事・注釈付きドキュメント
7. Markdown PDF Markdown文書をワンクリックで高品質なPDF・HTML・PNGに一括変換 社内配布資料・報告書・電子書籍作成

1. Markdown All in One（執筆支援・目次自動生成）

「Markdown All in One」は、VS CodeでMarkdownを書くすべての人に最初にインストールしてほしい不動のNo.1拡張機能です。

主な便利機能

  • 目次（TOC）の自動生成と更新：コマンドパレットから Markdown All in One: Create Table of Contents を実行するだけで、見出し構造に基づいた目次を自動生成。見出しを変更して保存するたびに目次も自動更新されます。
  • 強力なキーボードショートカット：文字を選択して Ctrl + B（Macは Cmd + B）で太字、Ctrl + I で斜体、Alt + S で取り消し線など、Word感覚で装飾できます。
  • リストの自動継続・インデント調整：リスト入力中に Enter を押すと自動で次の行にリスト記号や番号が付き、Tab / Shift + Tab で階層（インデント）を自由に変更できます。

2. Markdown Preview Enhanced（MPE：超多機能プレビュー）

標準のプレビュー機能を遥かに超える表現力と拡張性を持つのが「Markdown Preview Enhanced（通称MPE）」です。

主な便利機能

  • MermaidやPlantUMLの高度な作図レンダリング：フローチャート、シーケンス図、ER図、ガントチャートなどをコードブロックから直接リアルタイム描画。
  • LaTeX / KaTeX数式の美しい表示：複雑な分数やギリシャ文字、行列数式も遅延なく瞬時に表示されます。
  • スクロールの完全同期：エディタとプレビュー画面のスクロールが滑らかに連動します。
  • 豊富なエクスポート機能：HTML、PDF、EBook（ePub/mobi）、Pandoc連携によるWord出力に対応。

💡 VS Code標準プレビューやMPEの詳しい使い方はこちら

VS Code マークダウンプレビューの使い方完全ガイド｜ショートカット・おすすめ拡張機能・動かない時の対処法

3. Paste Image（画像貼り付けの自動化）

スクリーンショットやコピーした画像をMarkdownに挿入する際、「画像を別フォルダに保存し、手動でファイルパスを書く」という作業は非常に手間がかかります。それを一瞬で終わらせるのが「Paste Image」です。

主な便利機能と使い方

  • ショートカット一発で画像保存＆パス挿入：クリップボードに画像をコピーした状態で Ctrl + Alt + V（Macは Cmd + Option + V）を押すだけ！
  • 指定したサブフォルダ（例：./images/）に画像が自動で日時付きファイル名で保存され、エディタ上には ![](images/2026-08-24-12-00-00.png) のように相対パスが自動入力されます。

4. Markdown Table Prettifier（テーブル自動整形）

Markdownの表（テーブル）は、文字数が異なるとパイプ（|）の位置がズレて非常に見づらくなります。「Markdown Table Prettifier」があれば、不揃いな表も一瞬で美しく整列されます。

主な便利機能

  • ファイル保存時（Ctrl + S）にテーブルを自動整形：各列の最大文字数に合わせて | の位置が自動で綺麗に揃います。
  • 手動でスペースを空けて位置合わせをする苦労がゼロになり、ソースコードの可読性が格段に向上します。

📊 Markdown表の書き方やセル結合・配置テクニックはこちら

【コピペで使える】Markdown表（テーブル）の書き方完全ガイド｜配置揃え・セル結合・改行・便利ツールまで徹底解説

5. markdownlint（構文チェック・ルール統一）

「markdownlint」は、Markdownのスタイル規約（リンター）に従って、書き間違いやインデントミス、空行の過不足などをリアルタイムに警告・自動修正してくれる拡張機能です。

主なメリット

  • 表記ゆれの防止：見出しの前後の空行、リストのインデント幅（2スペースか4スペースか）などを統一。
  • クイックフィックス（自動修正）：警告が出ている箇所で Ctrl + . を押すと、ワンクリックで推奨フォーマットへ自動修正されます。
  • 個人ブログはもちろん、複数人での共同開発や技術ドキュメント管理に必須のツールです。

6. Markdown Footnotes（脚注・注釈サポート）

専門用語の解説や出典リンクを文末にまとめたいときに欠かせないのが「脚注記法（Footnotes）」です。VS Code標準では脚注のプレビューが対応していない場合がありますが、「Markdown Footnotes」を入れることで完璧に動作します。

Markdownは軽量マークアップ言語です[^1]。

[^1]: 2004年にジョン・グルーバーによって開発されました。

プレビュー上で [^1] をクリックするとページ下部の脚注へジャンプし、脚注から本文への戻りリンクも自動生成されます。

7. Markdown PDF（高品質なPDF文書変換）

Markdownで書いたドキュメントを社内資料や提出用レポートとして共有したいときに便利なのが「Markdown PDF」です。

主な便利機能

  • エディタ上で右クリックし、「Markdown PDF: Export (pdf)」を選ぶだけで、美しいレイアウトのPDFが瞬時に生成されます。
  • PDFだけでなく、HTML、PNG、JPEG形式での一括出力にも対応しています。

拡張機能をインストールしたら、VS Codeの設定ファイル（settings.json）に以下の設定を追加しておくと、さらに快適になります。

{
  // Markdownファイルで右端での自動折り返しを有効化
  "[markdown]": {
    "editor.wordWrap": "on",
    "editor.quickSuggestions": {
      "other": "on",
      "comments": "off",
      "strings": "off"
    },
    // 保存時の自動フォーマット
    "editor.formatOnSave": true
  },

  // Paste Imageの設定（画像を記事と同じ階層のimagesフォルダに保存）
  "pasteImage.path": "${currentFileDir}/images",
  "pasteImage.defaultName": "Y-MM-DD-HH-mm-ss",
  "pasteImage.prefix": "images/",

  // markdownlintの厳しすぎるルールを緩和（長文行エラーMD013を無効化）
  "markdownlint.config": {
    "MD013": false,
    "MD033": false // HTMLタグの使用を許可
  }
}

【目的別】おすすめインストールセット

用途・目的 おすすめの拡張機能組み合わせ
ブログ・Web記事の執筆 Markdown All in One ＋ Paste Image ＋ Markdown Table Prettifier
技術仕様書・設計書の作成 Markdown All in One ＋ Markdown Preview Enhanced ＋ markdownlint
論文・レポート・提出資料 Markdown Preview Enhanced ＋ Markdown Footnotes ＋ Markdown PDF

よくある質問（FAQ）

Q1. 拡張機能を入れすぎるとVS Codeが重くなりませんか？

A. 今回紹介した7つの拡張機能であれば、動作への影響はごくわずかです。
VS Codeは軽量に設計されているため問題ありませんが、もし気になる場合は「ワークスペース単位（特定のフォルダのみ）」で有効化する設定も可能です。

Q2. 専用エディタ（TyporaやObsidian）とVS Codeのどちらが良いですか？

A. 用途によって最適な選択肢が異なります。
プログラムと一緒にドキュメントを管理したい場合や強力な拡張性を求めるならVS Code、思考整理やナレッジ管理ならObsidian、Word感覚のシームレス執筆ならTyporaが最適です。

まとめ：拡張機能でVS Codeを最強の執筆ツールにしよう

VS Codeは適切な拡張機能を追加することで、単なるコードエディタから最高峰のMarkdown執筆スタジオへと変貌します。

  • まずは「Markdown All in One」と「Paste Image」をインストール！
  • 作図や数式が必要なら「Markdown Preview Enhanced」を追加！
  • 表や品質管理には「Markdown Table Prettifier」と「markdownlint」を活用！

ぜひ自分好みの環境をカスタマイズして、圧倒的に快適な執筆ライフを手に入れてください！

📖 合わせて読みたい関連記事

1 COMMENT

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

【徹底比較】Obsidian vs Typora！使い分けと選…

次の記事

NotionでMarkdownを活用する方法！インポート・エク…