VSCodeのMarkdown拡張機能おすすめ10選｜文書作成が劇的に快適になるツール厳選

プログラミング・IT

「VSCodeでMarkdownを書いているけど、もっと効率的に作業したい」
「プレビューや表の作成が面倒…」

そんな悩みを解決してくれるのが、VSCodeの拡張機能です。

VSCode（Visual Studio Code）には、Markdown編集を劇的に快適にする拡張機能が数多く公開されています。

今回は、実際に多くの開発者やライターが使っている、おすすめのMarkdown拡張機能を厳選して紹介します。

スポンサーリンク

VSCodeでMarkdownを書く前に知っておきたいこと

拡張機能を紹介する前に、基本を確認しておきましょう。

VSCodeの標準機能だけでもMarkdownは書ける

実は、VSCodeには最初からMarkdown対応機能が組み込まれています。

標準機能でできること：

  • シンタックスハイライト（色付け）
  • プレビュー表示（Ctrl + Shift + V）
  • サイドバイサイドプレビュー（Ctrl + K → V）
  • アウトライン表示（見出し構造の確認）

これだけでも基本的な作業はできますが、拡張機能を追加することで、もっと便利になります。

拡張機能のインストール方法

VSCodeの拡張機能は、以下の手順で簡単にインストールできます。

インストール手順：

  1. VSCodeの左側にある「拡張機能」アイコンをクリック（またはCtrl + Shift + X）
  2. 検索ボックスに拡張機能の名前を入力
  3. 目的の拡張機能が見つかったら「インストール」ボタンをクリック
  4. インストール完了後、必要に応じてVSCodeを再起動

それでは、おすすめの拡張機能を見ていきましょう。

【必須】まず入れたい定番拡張機能3選

Markdown作業をするなら、まずこの3つは入れておきたいという定番の拡張機能です。

1. Markdown All in One

これ一つでMarkdown作業が完結する万能拡張機能

Markdown All in Oneは、その名の通り「オールインワン」な拡張機能です。

主な機能：

  • キーボードショートカット
  • Ctrl + B：太字
  • Ctrl + I：斜体
  • Alt + S：打ち消し線
  • Alt + C：チェックボックス
  • 自動補完機能
  • リストの自動継続（Enterで次の項目が自動生成）
  • テーブルのフォーマット整形
  • 見出しの番号付け
  • 目次の自動生成
  • Ctrl + Shift + P → 「Create Table of Contents」で自動生成
  • ドキュメント内の見出しを自動収集
  • 数式のサポート
  • LaTeX形式の数式を記述可能

使いどころ：

Markdownを書く人なら、まず最初にインストールすべき拡張機能です。

ショートカットキーで素早く書式を適用できるので、執筆スピードが段違いに向上します。

インストール方法：

拡張機能で「Markdown All in One」と検索してインストール

2. markdownlint

Markdownの書き方をチェックしてくれる構文チェッカー

markdownlintは、Markdownの構文エラーや一貫性のない書き方を指摘してくれるリンターです。

主な機能：

  • リアルタイムで構文チェック
  • 問題箇所に波線で警告表示
  • 自動修正機能（保存時に自動整形）
  • カスタマイズ可能なルール

チェックされる項目の例：

  • 見出しの前後に空行がない
  • リストの書き方が不統一
  • 行末に余計なスペース
  • コードブロックの言語指定がない
  • 見出しレベルのスキップ（h1の次にh3など）

使いどころ：

複数人でドキュメントを管理する場合や、統一されたスタイルで書きたい場合に必須です。

一人で書く場合でも、きれいなMarkdownを維持できます。

設定のコツ：

厳しすぎるルールは無効化できます。

例えば、引用ブロックの改行ルール（MD027、MD028）は実用的でないので、設定で無効化する人が多いです。

"markdownlint.config": {
  "MD027": false,
  "MD028": false
}

インストール方法：

拡張機能で「markdownlint」と検索してインストール

3. Markdown Preview Enhanced

超高機能なプレビュー拡張機能

Markdown Preview Enhancedは、VSCodeのプレビュー機能を大幅に強化します。

主な機能：

  • 数式表示（KaTeX/MathJax対応）
  • 図表の描画
  • Mermaid（フローチャート、シーケンス図）
  • PlantUML（UML図）
  • Graphviz（グラフ描画）
  • 多彩なエクスポート機能
  • PDF出力
  • HTML出力
  • PNG/JPEG画像出力
  • eBook形式（ePub）
  • プレゼンテーション機能
  • Markdownからスライド作成
  • コードブロックの実行
  • JavaScript、Python、Bashなどのコード実行

使いどころ：

技術文書や論文、プレゼン資料を作る人に最適です。

特に、図表を多用する場合や、数式を含む文書を書く場合は必須級です。

インストール方法：

拡張機能で「Markdown Preview Enhanced」と検索してインストール

【効率化】作業がサクサク進む便利系拡張機能4選

次に、作業効率を大幅にアップしてくれる拡張機能を紹介します。

4. Markdown Table

テーブルの作成・編集が楽になる

Markdown Tableは、面倒なテーブル編集を劇的に簡単にしてくれます。

主な機能：

  • テーブルの自動フォーマット
  • Tabキーでセル間を移動
  • Enterキーで行を追加
  • 列の追加・削除が簡単
  • CSVからのテーブル作成

使用例：

普通にテーブルを書くと、こんな感じになりがちです：

| 項目 | 説明 | 価格 |
|---|---|---|
| りんご | 赤くて甘い | 100円 |
| バナナ | 黄色い | 80円 |

Markdown Tableを使うと、自動的に整形されて読みやすくなります：

| 項目     | 説明         | 価格   |
| -------- | ------------ | ------ |
| りんご   | 赤くて甘い   | 100円  |
| バナナ   | 黄色い       | 80円   |

使いどころ：

表を頻繁に使う技術文書やデータをまとめる際に便利です。

手動で整形する手間が省けます。

注意点：

日本語を含むテーブルを整形する場合、VSCodeのフォントを等幅フォント（例：BIZ UDゴシック）に設定しておくと、表示がズレません。

インストール方法：

拡張機能で「Markdown Table」と検索してインストール

5. Excel to Markdown table

ExcelやGoogleスプレッドシートの表をMarkdownに変換

Excel to Markdown tableは、表計算ソフトの表を一瞬でMarkdown形式に変換できます。

主な機能：

  • Excelの表をコピー → VSCodeに貼り付け → 自動でMarkdown形式に変換
  • Googleスプレッドシートにも対応
  • 列の整形も自動

使い方：

  1. ExcelやGoogleスプレッドシートで表を選択してコピー
  2. VSCodeでCtrl + Shift + Pを押す
  3. 「Markdown Table: Paste as Markdown Table」を選択
  4. 自動的にMarkdown形式の表に変換される

使いどころ：

データをExcelで整理してから、Markdownドキュメントに移す場合に超便利です。

手作業で表を作り直す必要がなくなります。

インストール方法：

拡張機能で「Excel to Markdown table」と検索してインストール

6. Paste Image（または標準機能）

画像を簡単に貼り付ける

重要な情報：

VSCode 1.79以降では、画像の貼り付け機能が標準搭載されました。

そのため、新しいバージョンのVSCodeを使っている場合、拡張機能は不要です。

標準機能の使い方：

  1. クリップボードに画像をコピー（スクリーンショットなど）
  2. MarkdownファイルでCtrl + Vで貼り付け
  3. 自動的に画像ファイルが保存され、Markdown形式のリンクが挿入される

保存先の設定：

settings.jsonで保存先フォルダを指定できます。

"markdown.copyFiles.destination": {
  "*": "images/${documentBaseName}/"
}

これで、ドキュメント名のフォルダ内のimagesフォルダに画像が保存されます。

古いVSCodeを使っている場合：

Paste Image拡張機能をインストールしてください。

機能は標準機能とほぼ同じです。

使いどころ：

スクリーンショットを多用する技術文書やブログ記事の執筆に必須です。

7. :emojisense:

絵文字を簡単に入力

:emojisense:は、Markdownに絵文字を簡単に挿入できる拡張機能です。

主な機能：

  • :コロンで絵文字の入力補完
  • キーワードで絵文字を検索
  • Ctrl + I（MacはCommand + I）で絵文字ピッカーを表示

使い方：

  1. :smileと入力
  2. 候補に😄が表示される
  3. Enterで確定

使いどころ：

ブログ記事やREADMEファイルなど、読みやすさを重視する文書で活躍します。

絵文字を使うと、見出しが目立ったり、文章が親しみやすくなります。

インストール方法：

拡張機能で「emojisense」と検索してインストール

【見た目】プレビューをカスタマイズする拡張機能2選

プレビューの見た目を変えたい場合におすすめの拡張機能です。

8. Markdown Preview Github Styling

GitHubと同じスタイルでプレビュー

Markdown Preview Github Stylingは、プレビューをGitHubのスタイルで表示します。

主な機能：

  • GitHubと同じレンダリング
  • README作成時に便利
  • GitHubにアップロード前の確認に最適

使いどころ：

GitHubでREADMEやドキュメントを公開する予定がある場合、この拡張機能でプレビューを確認しておけば、アップロード後の見た目がわかります。

インストール方法：

拡張機能で「Markdown Preview Github Styling」と検索してインストール

9. Markdown PDF

MarkdownをPDFに変換

Markdown PDFは、Markdownファイルを簡単にPDF形式に変換できます。

主な機能：

  • ワンクリックでPDF出力
  • HTML、PNG、JPEGにも変換可能
  • カスタムCSSでスタイル調整可能

使い方：

  1. Markdownファイルを開く
  2. Ctrl + Shift + Pでコマンドパレットを開く
  3. 「Markdown PDF: Export (pdf)」を選択
  4. 同じフォルダにPDFファイルが生成される

使いどころ：

  • ドキュメントを配布する場合
  • 印刷用のファイルが必要な場合
  • MarkdownをスライドのようにPDF化したい場合

注意点：

内部でChromiumを使用するため、初回インストール時にダウンロードが必要です。

うまく動作しない場合は、設定で別途インストールしたChromeやChromiumのパスを指定できます。

インストール方法：

拡張機能で「Markdown PDF」と検索してインストール

【上級者向け】さらなる機能強化の拡張機能

最後に、特定の用途に特化した上級者向けの拡張機能を紹介します。

10. Marp for VS Code

Markdownでプレゼンテーション資料を作成

Marp for VS Codeは、Markdownをスライド形式に変換できる拡張機能です。

主な機能：

  • Markdownからスライド作成
  • リアルタイムプレビュー
  • PDF、HTML、PNGにエクスポート
  • カスタムテーマ対応

使い方：

Markdownファイルの先頭に以下を追加：

---
marp: true
---

# スライドタイトル

内容を書く

---

# 次のスライド

次の内容

---で区切ることで、新しいスライドになります。

使いどころ：

  • 社内プレゼン資料
  • 勉強会のスライド
  • 技術解説資料

PowerPointを使わずに、テキストベースでスライドを作成できるのが魅力です。

バージョン管理もしやすくなります。

インストール方法：

拡張機能で「Marp for VS Code」と検索してインストール

番外編：文章校正の拡張機能

Markdown本体ではありませんが、日本語文章を書く場合に便利な拡張機能も紹介します。

vscode-textlint

日本語の文章校正ツール

vscode-textlintは、textlintをVSCode内で使えるようにした拡張機能です。

主な機能：

  • 日本語の表記ゆれチェック
  • 「ですます調」と「である調」の混在チェック
  • 冗長な表現の指摘
  • 難しい漢字の検出

注意点：

textlintのルール設定が必要なため、少し設定が複雑です。

初心者向けではありませんが、本格的に日本語文章を書く場合は非常に便利です。

Markdown Character Count

文字数をカウント

Markdown Character Countは、Markdownの文字数をリアルタイムで表示します。

主な機能：

  • ステータスバーに文字数表示
  • Markdown構文（見出し記号など）を除外してカウント
  • 選択範囲の文字数も表示

使いどころ：

ブログ記事や原稿を書く際に、文字数制限がある場合に便利です。

拡張機能の組み合わせ例

最後に、用途別のおすすめ拡張機能の組み合わせを紹介します。

【パターン1】ブログ記事を書く場合

  1. Markdown All in One：基本機能
  2. markdownlint：構文チェック
  3. Paste Image（または標準機能）：スクリーンショット挿入
  4. :emojisense:：絵文字挿入
  5. Markdown Character Count：文字数カウント

この組み合わせで、読みやすいブログ記事を効率的に執筆できます。

【パターン2】技術文書を書く場合

  1. Markdown All in One：基本機能
  2. markdownlint：構文チェック
  3. Markdown Preview Enhanced：数式・図表対応
  4. Markdown Table：表の編集
  5. Excel to Markdown table：データの取り込み
  6. Markdown PDF：PDF出力

技術文書に必要な機能が全て揃います。

【パターン3】GitHub用READMEを書く場合

  1. Markdown All in One：基本機能
  2. markdownlint：構文チェック
  3. Markdown Preview Github Styling：GitHubスタイル確認
  4. :emojisense:：絵文字挿入

GitHubでの見た目を確認しながら執筆できます。

【パターン4】プレゼン資料を作る場合

  1. Markdown All in One：基本機能
  2. Marp for VS Code：スライド作成
  3. Paste Image（または標準機能）：画像挿入

Markdownでプレゼン資料を作成できます。

拡張機能を入れすぎた時の対処法

便利だからといって、拡張機能を入れすぎると、VSCodeの動作が重くなることがあります。

対処法：

【方法1】使わない拡張機能を無効化

一時的に使わない拡張機能は無効化しましょう。

  1. 拡張機能のアイコンをクリック
  2. インストール済みの拡張機能一覧から無効化したいものを選択
  3. 「無効にする」をクリック

【方法2】ワークスペース単位で拡張機能を管理

プロジェクトごとに必要な拡張機能だけを有効にできます。

拡張機能の設定で「ワークスペースで無効にする」を選択すれば、特定のプロジェクトでのみ無効化できます。

【方法3】競合する拡張機能を避ける

例えば、Markdown Preview EnhancedとMarkdown PDFは、どちらもPDF出力機能を持っています。

用途に応じて、どちらか一つだけインストールすれば十分です。

トラブルシューティング

拡張機能がうまく動かない時の対処法をいくつか紹介します。

プレビューが表示されない

対処法：

  1. ファイルの拡張子が.mdであることを確認
  2. VSCodeを再起動
  3. 拡張機能を再インストール
  4. 他の拡張機能との競合を確認（一時的に無効化してテスト）

markdownlintの警告が多すぎる

対処法：

厳しすぎるルールは設定で無効化できます。

settings.jsonを開いて、以下のように設定：

"markdownlint.config": {
  "MD013": false,  // 行の長さ制限を無効化
  "MD033": false,  // HTMLタグ使用を許可
  "MD041": false   // 最初の行が見出しでなくてもOK
}

画像の貼り付けができない

対処法：

  1. VSCodeのバージョンを確認（1.79以降なら標準機能あり）
  2. settings.jsonで保存先を確認
  3. 保存先フォルダの権限を確認
  4. 別の形式（PNGなど）で試してみる

まとめ：最初に入れるべき拡張機能はこれ

VSCodeのMarkdown拡張機能について、いかがでしたか？

最後に、初心者がまず最初に入れるべき拡張機能をまとめます。

まず最初にインストールすべき3つ：

  1. Markdown All in One
  • 基本的な編集機能が全て揃う
  • ショートカットキーで作業効率アップ
  • 目次の自動生成も便利
  1. markdownlint
  • きれいなMarkdownを書ける
  • 複数人での作業に必須
  • 自動修正機能が便利
  1. Paste Image（またはVSCode 1.79以降なら標準機能）
  • スクリーンショットを簡単に挿入
  • 技術文書やブログ記事に必須

用途に応じて追加：

  • 技術文書 → Markdown Preview Enhanced、Markdown Table
  • ブログ記事 → :emojisense:、Markdown Character Count
  • GitHub → Markdown Preview Github Styling
  • プレゼン → Marp for VS Code
  • PDF出力 → Markdown PDF

拡張機能を上手に使えば、VSCodeは最高のMarkdownエディターになります。

まずは定番の3つから始めて、必要に応じて追加していくのがおすすめです。

あなたもVSCodeとMarkdown拡張機能を使いこなして、快適な執筆環境を手に入れましょう！

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました