Pug Sniffer

クンクン嗅ぎ回って、Pugで指定したクラスのSCSS定義やmixin定義を探し当てるVS Code拡張です。

対応言語: Pug / Jade（.pug / .jade）

「この .card__title、どこで定義したっけ...？」 「この +myMixin、どのファイルで作ったっけ...？」

そんなとき、pug-sniffer は鼻を鳴らしながら候補を見つけに行きます。

嗅ぎ分けられるもの

• クラス → SCSS定義 … Pugのクラス名から、対応するSCSS定義へ一直線（定義へ移動）
  • フラット定義 .block__element { ... } とネスト定義 .block { &__element { ... } } の両方を追跡
  • モディファイア付き .card__title--large はベース定義 .card__title へジャンプ（単体定義があれば候補にも追加）
• mixin → 定義元 … +mixinName の呼び出しから mixin mixinName の定義行へジャンプ
• extends / include → ファイル … パスをたどって対象のPugファイルを開く
  • / 始まりのパスは src/（pugSniffer.rootDir）を基準に解決
  • 相対パス（./・../）は現在のファイルを基準に解決
  • .pug 拡張子は省略可
• 鼻の記憶（キャッシュ） … 一度嗅いだSCSS / Pugは覚えておき、変更があったときだけ嗅ぎ直す

使い方

クラス → SCSS定義

1. Pugファイルで .class-name のクラス名部分にカーソルを置く
2. 「定義へ移動」を実行
   • 例: F12
   • 例: Cmd + クリック（macOS）
3. 鼻が利けば、SCSS定義にジャンプします

mixin → mixin定義

1. Pugファイルで +mixinName(...) の mixinName 部分にカーソルを置く
2. 「定義へ移動」を実行
   • 例: F12
   • 例: Cmd + クリック（macOS）
3. 鼻が利けば、mixin mixinName が定義されているPugファイルの行にジャンプします

extends/include → ファイルを開く

1. Pugファイルで extends パス や include パス のパス部分にカーソルを置く
2. 「定義へ移動」を実行
   • 例: F12
   • 例: Cmd + クリック（macOS）
3. 鼻が利けば、対象のPugファイルを開きます

設定

この拡張は以下の設定を提供します。

• pugSniffer.scssGlob
  • 型: string
  • デフォルト: src/**/*.scss
  • 説明: SCSSファイルを検索するglobパターン
• pugSniffer.pugGlob
  • 型: string
  • デフォルト: src/**/*.pug
  • 説明: mixin定義を探すPugファイルを検索するglobパターン
• pugSniffer.rootDir
  • 型: string
  • デフォルト: src
  • 説明: extends/include の / 始まり（絶対パス）を解決する基準ディレクトリ（ワークスペース直下からの相対）

例:

{
	"pugSniffer.scssGlob": "src/styles/**/*.scss",
	"pugSniffer.pugGlob": "src/views/**/*.pug",
	"pugSniffer.rootDir": "src"
}

注意点

• クラス抽出は、Pugのショートハンド記法（.class-name）向けです
• クラス名として認識するのは、カーソル位置の単語の直前が . の場合です
• mixin名として認識するのは、カーソル位置の単語の直前が + の場合です
• extends/include のパスで / 始まりのパスは pugSniffer.rootDir（デフォルト src/）を基準に解決します（例: /templates/_base → src/templates/_base.pug）
• プロジェクト構成によっては、pugSniffer.scssGlob / pugSniffer.pugGlob / pugSniffer.rootDir の調整が必要です

開発

npm install
npm run compile

監視モード:

npm run watch

ライセンス

MIT License. 詳細は同梱の LICENSE ファイルを参照してください。