🫥

設計書を見ながらコーディングするためのVsCode拡張

に公開
VS Code
coding
VS Code 拡張機能
tech

Design Overlay v1.0

設計書の内容をコード上にオーバレイ表示するVS Code拡張機能です。

機能

  • @design X.Y コメントでコードと設計書を紐づけ
  • ホバー時に設計書の該当セクションを表示
  • コードレンズで常時表示・操作可能
  • 設計書からのテンプレートコード挿入

使用方法

1. 設計書の準備

プロジェクトルートに design.md ファイルを作成：

# 3. 認証機能
## 3.1 ログイン処理
- JWT形式でトークン生成
- 有効期限: 24時間

## 3.2 ユーザー認証処理
- Bearer tokenで認証
- 無効トークンは401エラー

2. コードとの紐づけ

// @design 3.2
function authenticate(token) {
  // 実装...
}

3. 機能の使用

  • ホバー表示: @design X.Y 行にマウスホバーで設計書内容を表示
  • コードレンズ: 各 @design 行に表示されるリンクをクリック
  • テンプレート挿入: 設計書内容をTODOコメントとして挿入

設定

{
  "designOverlay.designDocPath": "./design.md"
}

コマンド

  • Design Overlay: Show Section - セクション表示
  • Design Overlay: Insert Template - テンプレート挿入
  • Design Overlay: Show Full Doc - 全設計書表示

インストール

code --install-extension design-overlay-1.0.0.vsix

v1.0.0 (2025-07-20)

  • 初回リリース
  • ホバー表示機能
  • コードレンズ表示
  • テンプレート挿入機能

Discussion