SpiraCSS Comment Links

SCSS ファイル内の // @rel/...、// @components/... などの形式のコメントを Cmd/Ctrl+Click でファイルジャンプできるようにする VSCode 拡張です。

SpiraCSS の CSS 設計規約と組み合わせて使うことを想定しています。

// @rel/child.scss             ← クリックで同階層の child.scss を開く
// @components/button.scss     ← クリックで @components の解決先を開く（aliasRoots / フォールバック）

使い方

相対リンク @rel

現在のファイルからの相対パスで解決します。

// @rel/sibling.scss     → 同じディレクトリの sibling.scss
// @rel/../parent.scss   → 親ディレクトリの parent.scss

エイリアスリンク

ワークスペースルート配下のパスを、@components のようなショートカットで指定できます。
基本はプロジェクトルートの spiracss.config.js（aliasRoots）で、各プロジェクトに合わせて自由に定義して使う想定です。
aliasRoots に定義がないエイリアスは、拡張内のフォールバック（下表）で解決します。

// @components/button.scss → src/components/button.scss
// @styles/variables.scss  → src/styles/variables.scss

// @components/button.scss, のように末尾が , . ; で終わっていても解決できます。

設定（推奨）

この拡張は、プロジェクトルートの spiracss.config.js にある aliasRoots を使ってエイリアスの解決先を決めます。
ただし aliasRoots にそのキーが無い場合は、設定ファイルの有無に関わらず拡張内のフォールバックで解決します。

// spiracss.config.js
module.exports = {
  aliasRoots: {
    src: ['src'],
    components: ['src/components'],
    styles: ['src/styles'],
    assets: ['src/assets'],
    pages: ['src/components/pages'],
    parts: ['src/components/parts'],
    common: ['src/components/common'],
    // 独自エイリアスも追加可能（@layouts/... を認識）
    // layouts: ['src/layouts'],
  }
}

• キー名: @ は付けずに定義します（components → コメント側で @components/...）
• 独自キー追加: layouts: ['src/layouts'] のように追加すれば @layouts/... も認識
• 複数候補: assets: ['src/assets', 'public/assets'] のように書くと先に存在するパスを優先
• マルチルート: 各ワークスペースルート直下の spiracss.config.js が参照されます

設定の全体像は docs/spiracss-config.md を参照してください。

対象と制限

• SCSS の行コメント（// ...）のみ対応（ブロックコメント /* ... */ は対象外）
• コメントの先頭から @ で始まる書き方のみ対象（例: // TODO @components/... は対象外）
• ワークスペース（フォルダ）を開いている必要あり（ワークスペースルート解決のため）
• 現状はローカルの file ワークスペースのみ対応（Remote-SSH / Dev Containers / WSL などは対象外）

関連ツール

SpiraCSS 関連ツールの他のパッケージ：

• SpiraCSS HTML to SCSS - HTML から SCSS スケルトンを自動生成
• @spiracss/stylelint-plugin - SpiraCSS ルールを検証する stylelint プラグイン

Release Notes

0.1.1

• 関連ツールのリンクを VSCode Marketplace URL に更新

0.1.0

• 初回リリース（プレビュー版）