Mokuji - CSS Table of Contents

CSSファイル内のコメントを使って、サイドバーに目次（Mokuji）を表示するVS Code拡張機能です。

機能

• CSSファイル内の特別なコメント形式を認識し、階層的な目次を自動生成
• サイドバーに見やすいツリービューで表示
• 目次項目をクリックして、該当のコード行へ即座にジャンプ
• ファイル編集時にリアルタイムで目次を更新
• CSS、SCSS、LESSファイルに対応

使用方法

コメントの記述形式

2つのコメント形式をサポートしています：

標準CSS形式

/* # メインセクション */
.main {
  color: blue;
}

/* ## サブセクション */
.sub {
  color: red;
}

SCSS/LESS形式

// # メインセクション
.main {
  color: blue;
}

// ## サブセクション
.sub {
  color: red;
}

階層レベル

目次の表示

1. CSSファイルを開く
2. アクティビティバーの「Mokuji」アイコンをクリック
3. サイドバーに目次が表示されます
4. 目次項目をクリックすると、該当行へジャンプします

インストール

開発版の実行

1. このリポジトリをクローン
2. npm install で依存関係をインストール
3. npm run compile でコンパイル
4. F5キーを押してExtension Development Hostを起動

開発

# 依存関係のインストール
npm install

# TypeScriptのコンパイル
npm run compile

# ウォッチモード（自動コンパイル）
npm run watch

ライセンス

MIT