Comment Links

SCSS ファイル内の // @rel/...、// @components/... などの形式のコメントを Cmd/Ctrl+Click でファイルジャンプできるようにする VS Code 拡張です。
リンクコメントは関連ファイルへの移動を一発で行うための仕組みで、ない場合は参照先を手作業で辿る必要があり運用負担が大きくなります。
SpiraCSS 設計原則に基づいて設計されています。

// @rel/child.scss
// @components/button.scss

インストール

VS Code >= 1.99.0 が必要です。

VS Code Marketplace または Open VSX から SpiraCSS Comment Links を検索してインストールします。

→ VS Code Marketplace / Open VSX からインストール

使い方

相対リンク @rel

現在のファイルからの相対パスで解決します。
先頭の / は無視されます。

// @rel/sibling.scss     → 同じディレクトリの sibling.scss
// @rel/../parent.scss   → 親ディレクトリの parent.scss
// @rel//sibling.scss    → 先頭の / を無視して sibling.scss

エイリアスリンク

ワークスペース内のパスを、@components のようなショートカットで指定できます。
解決は aliasRoots の基準パスにコメント側の文字列を連結し、先頭の / は無視されます。
aliasRoots に定義したキー、または下記の既定エイリアスのみが対象です。
解決結果がプロジェクトルート外になる場合は無視されます。

エイリアス	解決先（`aliasRoots` 未定義時のフォールバック）
`@src`	`src/`
`@components`	`src/components/`
`@styles`	`src/styles/`
`@assets`	`src/assets/`
`@pages`	`src/components/pages/`
`@parts`	`src/components/parts/`
`@common`	`src/components/common/`

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

設定

この拡張は、プロジェクトルートの spiracss.config.js にある aliasRoots を使ってエイリアスの解決先を決めます。
aliasRoots にキーを定義すると、そのエイリアスが認識されます。
未定義の場合は既定エイリアスのみフォールバックで認識され、未知キーはリンク化されません。

最小例:

module.exports = {
  aliasRoots: {
    components: ['src/components'],
    // 独自エイリアスも追加可能
    // layouts: ['src/layouts'],
  },
}

キー名は @ を付けずに定義します（components → コメント側で @components/...）。
package.json に "type": "module" がある場合は export default を使用してください。

制限事項

SCSS の行コメント（// ...）のみ対応（ブロックコメント /* ... */ は対象外）
コメントの先頭から @ で始まる書き方のみ対象（例: // TODO @components/... は対象外）
エイリアスリンクは @alias/... の形式のみ対象（@alias 単体や @aliasFoo は対象外）
エイリアスの基点がワークスペース外の場合は警告して無視されます
ワークスペース（フォルダ）を開いている必要あり

使用例

@use "sass:meta";

// @assets/css/home.scss

.hero-section {
  @include meta.load-css("scss");

  > .feature-card {
    // @rel/scss/feature-card.scss
  }
}

前へ
HTML to SCSS 次へ
spiracss.config.js