社内ドキュメントをMarkdownで書いている方、多いんじゃないでしょうか。
でも、「表が作りづらい」「図を入れるのが面倒」といった悩み、ありませんか？
今回は、VSCodeを最強のMarkdownエディタに変身させる拡張機能をご紹介します。これらを入れれば、社内ドキュメント作成が驚くほど快適になりますよ！
必須級：基本の拡張機能
1. Markdown All in One
インストール必須度：★★★★★
まずはこれを入れましょう。Markdown編集の基本機能が全部入ったオールインワンパッケージです。
主な機能
- キーボードショートカット（太字：
Ctrl+B、イタリック：Ctrl+Iなど） - 自動で目次（TOC）生成
- 表のフォーマット自動整形
- リスト番号の自動採番
- セクションの折りたたみ
便利ポイント
表を作るとき、下記のような不揃いの記述をしたとしても、Alt+Shift+F で自動でそろいます。
| 項目 | 説明 | 備考 |
|------|------|------|
| データ1 | テスト | 完了 |
Alt+Shift+F ↓
| 項目 | 説明 | 備考 |
| --------- | -------- | ------ |
| データ1 | テスト | 完了 |
2. Markdown Preview Enhanced
インストール必須度：★★★★☆
標準のプレビューよりも遥かに高機能なプレビューを提供してくれます。
主な機能
- リアルタイムプレビュー（スクロール同期）
- PDF/HTML/PNG出力
- 数式表示（KaTeX、MathJax対応）
- Mermaid・PlantUMLのプレビュー対応
- カスタムCSS適用可能
便利ポイント
特に、PDF出力機能が秀逸です。社内向けドキュメントを配布するとき、Markdownファイルをそのまま渡すわけにいかないですよね。
この拡張機能なら、右クリックメニューから「Chrome (Puppeteer) → PDF」を選ぶだけで、綺麗なPDFが生成できます。
プレビュー表示
Ctrl+Shift+V
標準プレビュー↓
MPE↓
図表作成：ダイアグラム系拡張機能
技術ドキュメントには図が必須。でも、PowerPointで図を作って画像として貼り付けるのは面倒。
そんなときに便利なのが、テキストベースで図が描ける「ダイアグラム as Code」系の拡張機能です。
3. Markdown Preview Mermaid Support
インストール必須度：★★★★★
Mermaidは、テキストベースの記法で図を作成できるJavaScriptツールです。フローチャート、シーケンス図、ガントチャート、クラス図など、様々な図が書けます。
対応する図の種類
- フローチャート
- シーケンス図
- ガントチャート
- クラス図
- ER図
- パイチャート
- マインドマップ
- タイムライン
サンプルコード
```mermaid
pie
title 受注割合
"製品A": 40
"製品B": 30
"製品C": 20
"その他": 10
```
これだけで、こんな感じの円グラフが表示されます。
ダークモードで使ってると見づらいのがネックですが、Markdown Preview Enhancedと合わせて使うとより見やすくなります↓
2025年の新機能
Mermaid Chart VS Code Pluginでは、GitHub Copilotと連携したAI図生成機能が追加されました。@mermaid-chartメンションを使えば、自然言語から図を自動生成できます。
品質管理：チェック＆校正系
4. markdownlint
インストール必須度：★★★★☆
Markdownの構文エラーや一般的な問題点を検出し、クリーンで一貫性のあるMarkdownを維持できます。
チェック項目の例
- 見出しの前後の空行
- リストのインデント
- 行末のスペース
- 重複する見出し
- リンクの書式
実用例
例えば見出しと本文がくっついていたりすると警告文を出してくれます。
設定のカスタマイズ
プロジェクトごとにルールを変更したい場合は、.markdownlint.jsonファイルを作成します。
{
"MD013": false,
"MD033": false
}
-
MD013：行の長さ制限を無効化 -
MD033：HTMLタグの使用を許可
5. Code Spell Checker
インストール必須度：★★★★☆
技術文書で特に重宝するスペルチェッカーです。英語のタイポを検出してくれます。
主な機能
- リアルタイムスペルチェック
- カスタム辞書登録
- プロジェクト単位の辞書
- 多言語対応（拡張機能で日本語も可能）
英語でミスがある場合、その単語の下に波線と説明文が出てきます↓
実用的な使い方
技術用語や社内の固有名詞（サービス名、製品名など）は、カスタム辞書に登録しておきましょう。
- スペルミスとして認識された単語にカーソルを合わせる
- 電球マークをクリック
- 「Add "単語" to folder dictionary」を選択
これで、プロジェクト全体でその単語が辞書登録されます。
効率化：便利機能系
6. Markdown Table
インストール必須度：★★★☆☆
表の作成・編集を劇的に楽にしてくれます。Markdown All in Oneにも表機能はありますが、こちらはさらに高機能です。
主な機能
- CSVからMarkdown表を生成
- 表のフォーマット自動整形
- 列の追加・削除
- セルの結合
Excelからの変換方法
- Excelやスプレッドシートからデータをコピー
- VSCodeでMarkdownファイルを開き、張り付ける
- 張り付けた内容を全選択
-
Ctrl+Shift+P→ 「Markdown Table: Convert TSV To Table」
あっという間に表が完成します。
Ctrl+Shift+P
おまけ：あると嬉しい拡張機能
7. Copy Markdown as HTML
インストール必須度：★★☆☆☆
MarkdownをHTMLとしてコピーし、CMSなどに綺麗にペーストできる拡張機能です。
使い方
- Markdownテキストを選択
-
Ctrl+Shift+P→ 「Copy Markdown as HTML」 - CMSやメールに貼り付け
WordPressやNotionなど、Markdownに対応していないツールに転記するときに便利です。
Ctrl+Shift+P
WordPressなどに貼り付けるとHTMLとして挿入されます↓
まとめ
迷ったら、この順番で入れていきましょう
まずは必須の3つ
1. Markdown All in One（基本機能）
2. Markdown Preview Enhanced（高機能プレビュー）
3. Markdown Preview Mermaid Support（図表作成）
次に便利な2つ
1. markdownlint (品質管理)
2. Code Spell Checker（スペルチェック）
3. Markdown Table（表作成・整形）
WordPressでブログ投稿している方などは、Copy Markdown as HTMLもインストールしておくと便利ですね。
今回紹介した拡張機能は、どれも無料で使えます。ぜひ試してみて、快適なドキュメント作成環境を手に入れてください！