TreeViewMD
Markdownファイルでノードベースのメモ管理を実現するVSCode拡張機能です。リスト形式でノードを定義し、ノード間の関係性を視覚化・管理できます。
特徴
ノードの視覚化
- 通常ノード (
-): ファイル有りは実線下線、親でファイル無しは点線下線
- 重複ノード: 同じノード名が複数出現すると専用色で表示
- メモノード (
+): 自身と子孫をグレーアウト（重複より優先）
- プレーンノード (
*): ノード名は装飾スキップ、タグは通常処理
- タグ:
# 記号と各パートに独立した色、リンク状態で色分け
- 無効なファイル名: ファイル名不可文字を含むノードは装飾スキップ
ノードを開く機能
- 複数のキーバインド でノードの開き方を選択可能
- 絞り込みビュー: ノードの全出現箇所とサブツリーを一覧表示（読み取り専用）
- ノードファイル: ノード専用のMarkdownファイルを自動生成・開く
リンク形式
- ツリーノード:
- で始まる行のノード名
- タグ:
#tag 形式（ノードとして存在する場合のみ開ける）
- Wikiリンク:
[[ノード名]] 形式でどこでもリンク可能
- 階層タグ:
#親/子/孫 形式でスラッシュ区切りの階層表現
ノード編集機能
- ノードタイプ切り替え (
Ctrl+T): - → * → + → なし → - の4状態循環
- ノード名変更 (
F2): ノード名とファイル名を一括変更
- 親階層パス挿入 (
Ctrl+Shift+I): ノードの親階層パスをタグとして挿入
インデント
- 階層はエディタの
insertSpaces / tabSize に準拠して 1 レベル単位で扱う
- 親子判定は視覚列ベース。タブ/スペース混在でも見た目通りに解釈
- トグル・リネーム時のインデントはエディタ設定に沿って正規化される
使い方
1. 初期設定
ワークスペースを開いてから、VSCodeの設定（.vscode/settings.json またはユーザー設定）に以下を追加：
{
"treeviewmd.sourceFile": "notes/main.md",
"treeviewmd.nodeFilesDirectory": "notes/nodes"
}
または、ワークスペース直下を使う場合は設定を空に：
{
"treeviewmd.sourceFile": "main.md",
"treeviewmd.nodeFilesDirectory": "" // 空の場合はワークスペースルート
}
重要:
- パスはワークスペースルートからの相対パスで指定してください
- 設定が空の場合はワークスペースルートが使われます
- セキュリティのため、ワークスペース外へのアクセスはブロックされます
設定UIでも設定できます：
TreeViewMD: Source File - メインのMarkdownファイルパス（相対）TreeViewMD: Node Files Directory - ノードファイルを保存するディレクトリ（相対）
2. Markdownファイルの書き方
# プロジェクト管理
- 開発 #技術
- フロントエンド
- React
- Vue
- バックエンド
- Node.js #JavaScript
- Python
- React #UI
- Hooks
- コンポーネント
+ メモ #個人的
- 買い物リスト
- GET #開発/フロントエンド/HTTP
[[React]] を参照してください。
ルール:
- マーカー: 通常のノード（リンク可能）+ マーカー: 非リンクノード（グレーアウト、リンク不可、子も非リンク扱い）#tag: タグ（ノードとして存在すれば開ける）#親/子: スラッシュ区切りタグ（各パーツを個別に開ける）[[ノード名]]: Wikiリンク（どこでも使用可能）
3. ノードを開く
メインファイルでの操作
- ノード行やタグにカーソルを置く（例:
React の行、または #技術）
- キーバインドを選択：
- Ctrl+Enter: ノードファイルのみ（右ペイン）
- Ctrl+Shift+Enter: ノードファイルのみ（左ペイン）
- Ctrl+Alt+Enter: 絞り込みビューのみ（左ペイン）
- Ctrl+Shift+Alt+Enter: 絞り込みビュー（左）+ ノードファイル（右）
ノードファイルでの操作
- ノードファイル内でノード名やタグにカーソルを置く
- キーバインドを選択：
- Ctrl+Enter: 現在のタブを置き換え
- Ctrl+Shift+Enter: 新規タブで開く
スラッシュ区切りタグ
#開発/フロントエンド/React のようなタグでは、カーソル位置に応じて開くノードが変わります：
開発 の部分 → 開発 ノードを開くフロントエンド の部分 → フロントエンド ノードを開くReact の部分 → React ノードを開く
4. 絞り込みビューの例
# ====== Filtered ======
## 出現箇所
- 開発 > フロントエンド > React
- React
## 断片
■開発 > フロントエンド > React
- Hooks
- コンポーネント
■React
- Hooks
- コンポーネント
設定項目
treeviewmd.sourceFile
- 型:
string
- 説明: ノード管理対象のMarkdownファイルパス（ワークスペース相対）
- 例:
"notes/main.md" または "main.md"
- デフォルト:
"" （ワークスペースルート）
treeviewmd.nodeFilesDirectory
- 型:
string
- 説明: ノードファイルを保存するディレクトリパス（ワークスペース相対）
- 例:
"notes/nodes" または "nodes"
- デフォルト:
"" （ワークスペースルート）
装飾のカスタマイズ
キーは「部品 → 属性」順。空文字はエディタ既定色（下線色は文字色連動）。
通常ノード
{
"treeviewmd.node.regular.newLeaf.color": "",
"treeviewmd.node.regular.linked.color": "",
"treeviewmd.node.regular.linked.underline": "underline",
"treeviewmd.node.regular.linked.underlineColor": "",
"treeviewmd.node.regular.broken.color": "",
"treeviewmd.node.regular.broken.underline": "underline dotted",
"treeviewmd.node.regular.broken.underlineColor": "",
"treeviewmd.node.regular.duplicate.color": "#4FC3F7"
}
メモノード
{ "treeviewmd.node.memo.color": "#424242" }
タグ
{
"treeviewmd.tag.hash.color": "#9E9E9E",
"treeviewmd.tag.linked.color": "#9E9E9E",
"treeviewmd.tag.linked.underline": "underline",
"treeviewmd.tag.linked.underlineColor": "",
"treeviewmd.tag.broken.color": "#9E9E9E",
"treeviewmd.tag.broken.underline": "underline dotted",
"treeviewmd.tag.broken.underlineColor": "",
"treeviewmd.tag.unused.color": "#9E9E9E"
}
- 下線スタイルは
"none" | "underline" | "underline dotted" | "underline dashed" | "underline double" | "underline wavy" から選択
- 不正な色/下線値は既定値へフォールバックし、開発者コンソールに警告を出力
コマンド
ノード操作
- TreeViewMD: Open Node (
Ctrl+Enter) - ノードファイルを開く
- TreeViewMD: Open in Left Pane / New Tab (
Ctrl+Shift+Enter) - 左ペイン/新規タブで開く
- TreeViewMD: Open Filtered View Only (
Ctrl+Alt+Enter) - 絞り込みビューのみ
- TreeViewMD: Open Both Views (
Ctrl+Shift+Alt+Enter) - 両方開く
ノード編集
- TreeViewMD: Toggle Node Type (
Ctrl+T) - - → * → + → なし → - の4状態循環
- TreeViewMD: Rename Node and File (
F2) - ノード名変更
- TreeViewMD: Insert Parent Hierarchy Paths (
Ctrl+Shift+I) - 親階層パス挿入
ファイル管理
- TreeViewMD: Activate Main File (
Ctrl+Shift+M) - メインファイルをアクティブ化
- TreeViewMD: Close All Temporary Files (
Ctrl+Shift+W) - 一時ファイルを全て閉じる
- TreeViewMD: Close All Except Main (
Ctrl+Shift+Alt+W) - メインファイル以外を閉じる
その他
- TreeViewMD: Jump to Next Occurrence (
Ctrl+Shift+N) - 次の出現箇所へジャンプ
- TreeViewMD: Detect Node at Cursor - ノード検出（デバッグ用）
- TreeViewMD: Show Performance Log - パフォーマンスログ表示
制限事項
注意点
- 非リンクノード（
+）とその子孫は開けません
- ファイル名チェックや警告も表示されません（意図的な動作）
- 無効なファイル名文字を含むノードは開けません
- タグはノードとして存在する場合のみ開けます
- Wikiリンクでは絞り込みビューは開けません（ノードファイルのみ）
ライセンス
MIT
