📝

VSCode + Claude Codeでマークダウンによる文章作成を爆速化する環境構築方法

2025/07/19に公開

 概要マークダウンで文書を作成する際、以下の課題を感じたことはありませんか？
リストの記号やインデントが揃わず、見た目が崩れる
構文エラーに気づかず、プレビューで確認するまで分からない
図表やコードブロックの挿入に時間がかかる
スペルミスや文章の品質チェックが手作業になる
そこで、この記事では、VSCodeとClaude Codeを使って、これらの課題を一気に解決し、マークダウンによる文章作成を爆速化する環境構築方法を詳しく解説します。

 対象読者以下のような方を対象としています。
VSCodeの基本的な使い方を理解している方
マークダウン記法の基礎知識がある方
Claude Codeを使った記事執筆に興味がある方
文書作成の効率化を図りたい方

 なぜ爆速化できるのか通常のマークダウン編集では、フォーマット確認、構文チェック、図表作成などで作業が断続的になりがちです。VSCodeとClaude Codeの組み合わせにより、以下の要素で執筆速度の大幅な向上を実感しています。

AI支援によるリアルタイム執筆サポート: Claude Codeが文章構成やコード生成を瞬時に提案

サイドプレビューでの即座確認: 編集と同時に最終結果を確認、修正時間を大幅短縮

自動フォーマット機能: 保存時に構文チェックと整形が自動実行、手動校正が不要

スニペットによる定型作業の自動化: 頻出パターンをワンタッチで挿入

Mermaid統合: 図表をコードで直接作成、外部ツール不要

 セットアップの準備
 必要な環境Visual Studio Code
Claude Code

 拡張機能の一括インストールまず、マークダウン編集に必要な拡張機能を一括でインストールします。
# 必須拡張機能の一括インストール
code --install-extension yzhang.markdown-all-in-one
code --install-extension DavidAnson.vscode-markdownlint
code --install-extension shd101wyy.markdown-preview-enhanced
code --install-extension streetsidesoftware.code-spell-checker
code --install-extension ms-vscode.live-server
code --install-extension bierner.markdown-mermaid

 主要拡張機能の詳細
 1. Markdown All in Oneダウンロード数: 11,262,504 installs（2025年7月現在）
基本的なマークダウン編集機能の統合パッケージです。
キーボードショートカット（太字、斜体、リスト等）
目次の自動生成と更新
数式（LaTeX）サポート
テーブルフォーマット

 2. markdownlintダウンロード数: 9,147,621 installs（2025年7月現在）
マークダウンの構文チェックと自動修正機能を提供します。
120文字以内の行長制限
一貫したリストフォーマット
見出しの階層チェック
HTMLタグの適切な使用

 3. Markdown Preview Enhancedダウンロード数: 7,425,676 installs（2025年7月現在）
高機能なプレビューと出力機能を提供します。
リアルタイムプレビュー
PDF/HTML出力
PlantUML/Mermaid図表対応
数式レンダリング

 4. Code Spell Checkerダウンロード数: 14,710,925 installs（2025年7月現在）
多言語対応のスペルチェック機能を提供します。
英語・日本語対応
カスタム辞書追加
専門用語の登録
誤字の自動修正候補

 5. Live Serverダウンロード数: 2,999,135 installs（2025年7月現在）
ローカル開発サーバー機能を提供します。
ライブリロード対応
ポート設定カスタマイズ
HTTPS対応
複数ファイル同期プレビュー

 6. Markdown Mermaidダウンロード数: 2,999,138 installs（2025年7月現在）
図表作成とプレビュー機能を提供します。
フローチャート作成
シーケンス図対応
ガントチャート
状態遷移図

 VSCode設定の最適化
 settings.jsonの設定.vscode/settings.jsonに以下の設定を追加します。
{
  // Markdown editing settings
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  
  // Markdown specific settings
  "[markdown]": {
    "editor.wordWrap": "on",
    "editor.tabSize": 2,
    "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
  },
  
  // Auto save
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  
  // Spell check
  "cSpell.language": "en,ja",
  "cSpell.enabledFileTypes": {
    "markdown": true
  },
  
  // Snippet settings
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "editor.tabCompletion": "on",
  "editor.snippetSuggestions": "top"
}

 設定のポイント
 editor.wordWrap: 行の折り返し設定
"on": 長い行を自動的にエディタ幅で折り返し表示
マークダウンでは長文が多いため、読みやすさを向上

 editor.formatOnSave: 保存時の自動フォーマット
true: ファイル保存時にmarkdownlintルールで自動整形
手動でのレイアウト調整を不要にし、一貫したスタイルを維持

 editor.formatOnPaste: ペースト時の自動フォーマット
true: 外部からのテキスト貼り付け時に自動整形
コピーしたテキストのフォーマットを自動的に統一

 "[markdown]": マークダウン専用設定
editor.tabSize: 2: インデント幅を2スペースに統一（markdownlint標準）

editor.defaultFormatter: markdownlintを既定フォーマッターに指定

 files.autoSave: 自動保存の有効化
"afterDelay": 入力を停止してから一定時間後に自動保存

autoSaveDelay: 1000: 1秒（1000ms）遅延で保存実行

 cSpell.language: スペルチェック言語
"en,ja": 英語と日本語の混在文書に対応
日本語と英語が混在する技術文書に適している

 cSpell.enabledFileTypes: 対象ファイル種別
"markdown": true: スペルチェックを有効にする
マークダウンファイルでのスペルチェック動作を確実にする

 editor.suggest.snippetsPreventQuickSuggestions: スニペット優先表示
false: スニペット候補と通常候補を同時表示
自動補完の幅を拡げて効率的な入力を実現

 editor.tabCompletion: タブ補完機能
"on": タブキーで自動補完候補を選択できるように設定

 editor.snippetSuggestions: スニペット表示順位
"top": スニペット候補を最上位に優先表示

 拡張機能の使用方法
 リアルタイムプレビュー
 サイドプレビューの開始
コマンドパレット（Cmd+Shift+P）を開く
「Markdown Preview Enhanced: Open Preview to the Side」を選択
左側で編集、右側でプレビューの並行作業が可能

 全画面プレビュー
Cmd+Shift+V（Mac）/ Ctrl+Shift+V（Windows）
フルスクリーンでのプレビュー確認

 HTML出力とWebパブリッシング
 HTML変換の手順
マークダウンファイルを開く
プレビューを表示
プレビューペイン内で右クリック
「HTML」→「HTML (offline)」を選択
保存先を指定してHTMLファイルを生成

 Live Serverでの確認生成されたHTMLファイルを右クリック
「Open with Live Server」を選択
ブラウザで自動プレビュー開始
変更時の自動リロード対応

 Mermaid図表の実装
 フローチャート例flowchart TD
    A[開始] --> B{条件分岐}
    B -->|Yes| C[処理A]
    B -->|No| D[処理B]
    C --> E[終了]
    D --> E

 シーケンス図例sequenceDiagram
    participant A as ユーザー
    participant B as システム
    participant C as データベース
    
    A->>B: ログイン要求
    B->>C: 認証確認
    C-->>B: 認証結果
    B-->>A: ログイン完了

 Claude Codeとの連携
 Claude Codeによる執筆効率化

 使用例
 シーン1: 記事の骨組み作成プロンプト: "VSCode拡張機能について3000字の技術記事を書きたい。目次構成を提案して"
→ 瞬時に構造化された目次が生成

 シーン2: コード設定の自動生成プロンプト: "マークダウン編集に最適化されたVSCode設定ファイルを生成して"
→ 最適化されたsettings.jsonが即座に出力

 シーン3: 文章校正と最適化プロンプト: "この文章をより読みやすく、技術的に正確に修正して"
→ 文法、表現、技術的正確性を一括改善

 Claude Code活用による効果
記事構成の自動生成: タイトルから論理的な構成を3秒で提案

設定ファイル作成: JSON、YAML等の設定を瞬時に生成

マークダウン記法の最適化: 構文エラーを自動検出・修正

多言語対応: 日英混在文書の自然な表現に調整

コードサンプル充実: 実用的なサンプルコードを自動追加

品質チェック: 技術的正確性と可読性を同時に向上

フォーマット統一: プロジェクト全体のスタイル統一を自動実行

 オススメのディレクトリ構成
 ディレクトリ構成project/
├── .vscode/                    # VSCode設定ディレクトリ
│   ├── settings.json          # エディタ設定（フォーマット、スペルチェック等）
│   └── extensions.json        # 推奨拡張機能リスト
├── articles/                   # 記事管理ディレクトリ
│   ├── drafts/                # 下書き保存
│   └── published/             # 公開済み記事
├── assets/                     # 静的ファイル管理
│   └── images/                # 画像ファイル（スクリーンショット、図表等）
├── templates/                  # テンプレートファイル（記事雛形、コードスニペット等）
└── .gitignore                 # Git除外設定

 各ディレクトリの詳細
 .vscode/ - VSCode設定
settings.json: マークダウン編集に最適化された設定

extensions.json: チームで共有する推奨拡張機能リスト

 articles/ - コンテンツ管理
drafts/: 執筆中の下書きを保存

published/: 完成した記事を保存

 assets/ - メディアファイル
images/: PNG、JPG等の画像ファイル

 templates/ - 再利用可能な雛形
article-template.md: 記事の基本構造

meeting-notes.md: 議事録テンプレート

project-readme.md: プロジェクト説明用テンプレート

 Gitignore設定# System files
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
Thumbs.db
desktop.ini
.AppleDouble
.LSOverride

# Temporary files
*.tmp
*.temp
*~

# Log files
*.log

# Backup files
*.bak
*.backup

 カスタムスニペットの活用マークダウン編集で頻繁に使用する構造をスニペットとして登録することで、作業効率を大幅に向上させることができます。

 スニペットファイルの作成方法コマンドパレット（Cmd+Shift+P）を開く
「Preferences: Configure User Snippets」を選択
「markdown」を選択（またはNew Global Snippets fileで全言語対応）

markdown.jsonファイルが開かれる

 Claude Codeを活用したスニペット作成Claude Codeを使用すると、効率的にカスタムスニペットを作成できます。

 プロンプト例プロンプト: "マークダウンでよく使う構造のVSCodeスニペットを作成して。
- 技術記事のテンプレート
- コードブロック
- 注意書きのコールアウト  
- 画像挿入
- Mermaidフローチャート
JSON形式で出力してください"

 Claude Codeが生成するスニペット例{
  "Code Block with Language": {
    "prefix": "code",
    "body": [
      "```${1:language}",
      "${2:code}",
      "```"
    ],
    "description": "Insert code block with language specification"
  },
  "Article Header": {
    "prefix": "article",
    "body": [
      "# ${1:タイトル}",
      "",
      "${2:概要説明}",
      "",
      "## 目次",
      "",
      "## ${3:セクション1}",
      "",
      "${4:内容}",
      ""
    ],
    "description": "Create article template"
  },
  "Mermaid Flowchart": {
    "prefix": "mermaid",
    "body": [
      "```mermaid",
      "flowchart TD",
      "    A[${1:開始}] --> B{${2:条件}}",
      "    B -->|Yes| C[${3:処理A}]",
      "    B -->|No| D[${4:処理B}]",
      "    C --> E[${5:終了}]",
      "    D --> E",
      "```"
    ],
    "description": "Insert Mermaid flowchart template"
  },
  "Image with Caption": {
    "prefix": "img",
    "body": [
      "![${1:alt text}](${2:image-path})",
      "",
      "*${3:キャプション}*"
    ],
    "description": "Insert image with caption"
  },
  "Callout Box": {
    "prefix": "callout",
    "body": [
      "> **${1:注意}**: ${2:メッセージ内容}"
    ],
    "description": "Insert callout box"
  }
}

 Claude Codeによるスニペット作成の利点
要件に応じたカスタマイズ: プロジェクト固有のスニペットを瞬時に生成

JSON構文の自動検証: Claude Codeが正しいJSON形式を保証

プレースホルダーの最適化: ${1}, ${2} 等の効率的な配置を提案

説明文の自動追加: descriptionフィールドを適切に設定

 スニペットの使用方法マークダウンファイルで prefix を入力（例：code, mermaid）

Tab キーを押す

${1}, ${2} 等の位置に順番に内容を入力

Tab キーで次のプレースホルダーに移動

 Claude Codeによるスニペット作成Claude Codeに以下のようなプロンプトで、より高度なスニペットを依頼できます。
プロンプト: "以下の要件でVSCodeスニペットを作成してください。
- プロジェクト固有のドキュメント構造
- 複数レベルの見出し構造
- 表形式のデータテンプレート
- コードレビュー用のテンプレート"

 まとめ以上紹介してきたVSCodeとClaude Codeという環境を整えることで、マークダウンでの文章作成における様々な課題を解決できます。
以下、導入によって得られる効果を、短期と長期に分けて整理してみました。

 導入直後から実感できる効果リアルタイムプレビューによる編集と同時の結果確認
保存時の自動フォーマットによる手動校正作業の削減
スニペット機能による定型文の瞬時挿入
Mermaid図表機能でのコードベース図表作成
Claude Codeによる文章構成提案とフォーマット最適化
HTML/PDF出力の活用によって、文書共有しやすくなる

 継続使用で得られる効果markdownlint設定による文書品質の統一

.vscode/extensions.jsonによる複数マシン間での環境統一

templates/ディレクトリでの再利用可能な雛形蓄積

articles/published/ディレクトリが個人の技術ライブラリとなる
以上最後までお読みいただきありがとうございました。

概要

対象読者

なぜ爆速化できるのか

セットアップの準備

必要な環境

拡張機能の一括インストール

主要拡張機能の詳細

1. Markdown All in One

2. markdownlint

3. Markdown Preview Enhanced

4. Code Spell Checker

5. Live Server

6. Markdown Mermaid

VSCode設定の最適化

settings.jsonの設定

設定のポイント

editor.wordWrap: 行の折り返し設定

editor.formatOnSave: 保存時の自動フォーマット

editor.formatOnPaste: ペースト時の自動フォーマット

"[markdown]": マークダウン専用設定

files.autoSave: 自動保存の有効化

cSpell.language: スペルチェック言語

cSpell.enabledFileTypes: 対象ファイル種別

editor.suggest.snippetsPreventQuickSuggestions: スニペット優先表示

editor.tabCompletion: タブ補完機能

editor.snippetSuggestions: スニペット表示順位

拡張機能の使用方法

リアルタイムプレビュー

サイドプレビューの開始

全画面プレビュー

HTML出力とWebパブリッシング

HTML変換の手順

Live Serverでの確認

Mermaid図表の実装

フローチャート例

シーケンス図例

Claude Codeとの連携

Claude Codeによる執筆効率化

使用例

シーン1: 記事の骨組み作成

シーン2: コード設定の自動生成

シーン3: 文章校正と最適化

Claude Code活用による効果

オススメのディレクトリ構成

ディレクトリ構成

各ディレクトリの詳細

.vscode/ - VSCode設定

articles/ - コンテンツ管理

assets/ - メディアファイル

templates/ - 再利用可能な雛形

Gitignore設定

カスタムスニペットの活用

スニペットファイルの作成方法

Claude Codeを活用したスニペット作成

プロンプト例

Claude Codeが生成するスニペット例

Claude Codeによるスニペット作成の利点

スニペットの使用方法

Claude Codeによるスニペット作成

まとめ

導入直後から実感できる効果

継続使用で得られる効果

Discussion

`editor.wordWrap`: 行の折り返し設定

`editor.formatOnSave`: 保存時の自動フォーマット

`editor.formatOnPaste`: ペースト時の自動フォーマット

`"[markdown]"`: マークダウン専用設定

`files.autoSave`: 自動保存の有効化

`cSpell.language`: スペルチェック言語

`cSpell.enabledFileTypes`: 対象ファイル種別

`editor.suggest.snippetsPreventQuickSuggestions`: スニペット優先表示

`editor.tabCompletion`: タブ補完機能

`editor.snippetSuggestions`: スニペット表示順位

`.vscode/` - VSCode設定

`articles/` - コンテンツ管理

`assets/` - メディアファイル

`templates/` - 再利用可能な雛形