VS CodeでMarkdownプレビューのまま編集したくて拡張機能を作った
はじめに
AI駆動開発を進める中で、設計メモや仕様整理を *.md で扱う時間がかなり増えました。
私は普段 VS Code を使っていますが、既存のMarkdown編集体験は「ソース編集」と「プレビュー確認」を行き来する前提です。業務で長時間使うには手数が多いと感じていました。
「プレビュー表示のまま直接編集できる」「日常利用に耐える」「安心して使える」拡張を探しましたが、要件に合うものが見つからず、結果として自作しました。
実際の編集イメージです。
作ったものはこちらです。
VS Code Marketplace（VS Code向け）
Open VSX（※ Cursor など Open VSX 対応エディタ向け）
GitHub Repository
何を作ったか
Markdown Live Editor という VS Code 拡張です。
MarkdownをWYSIWYGに近い形で編集しつつ、ソースとの同期を維持します。
主な機能は次の通りです。
-
WYSIWYG Markdown editing（
Milkdown/ProseMirrorベース） - ソースとの双方向同期
- GFM（表、タスクリスト、打ち消し線など）
-
Mermaid/KaTeX -
Frontmatter編集 - アウトライン表示
- 文字数・単語数表示
-
WebView内検索（Ctrl/Cmd+F）
技術構成
構成はシンプルです。
-
VS Code Custom Editorを使って.mdをWebViewで開く -
WebView内でMilkdownを起動して編集UIを提供 -
postMessageで拡張本体と同期 - 変更通知はデバウンスして保存負荷を抑える
Custom Editor + WebView にした理由は、標準エディタの上に機能を被せるより、編集体験を一貫して制御しやすいからです。
実装でハマったポイント
1. 「標準検索」がそのまま使えない
WebView 内コンテンツには VS Code 標準の検索体験がそのまま乗りません。
そのため、検索パネルを独自実装しました。
-
Ctrl/Cmd+Fでパネル表示 -
Enter/F3/Ctrl/Cmd+Gで次へ -
Shift+...で前へ - 0件時の視覚フィードバック
- アクティブ一致へスクロール追従
2. 同期まわりの揺れ（Undo/Redo・反映ループ）
双方向同期は便利な反面、更新ループや意図しない変更フラグの発生が起きやすいです。
反映元の識別とガードを入れ、不要な再送を抑えるようにしました。
3. 機能追加後の品質改善
しばらく機能追加を優先していたので、途中で立ち止まって品質改善を実施しました。
- 検索ロジックの分離（状態遷移を純粋関数化）
- ユニットテストとスモークテストの整備
- issue駆動での小さな改善PR運用
結果として、変更時の安心感がかなり上がりました。
業務利用を想定して意識したこと
- 既存Markdown資産を壊さないこと
- キーボード操作中心で使えること
- 見た目よりも同期の確実性を優先すること
- 回帰を防ぐ最小限のテストを持つこと
- VS CodeだけでなくCursorでも使えるよう、対応バージョンと動作を見直すこと
- コードと開発履歴（Issue/PR）を公開し、採用判断しやすい透明性を保つこと
今後やりたいこと
- 検索機能のさらなる改善（置換やオプション）
- E2Eテストの追加
- 大きいドキュメントでのパフォーマンス改善
- 業務利用で出たフィードバック反映
おわりに
「プレビューのまま編集したい」という素朴な不満から始めましたが、実際に作ってみると、WebView の制約や同期の難しさなど、VS Code拡張ならではの学びが多くありました。
同じ課題を感じている人の参考になれば嬉しいです。
もし興味があれば試してみてください。
VS Code向け
Cursor など Open VSX 対応エディタ向け
Discussion