[SCSS]別ファイルに記述した変数を補完をするVisualStudioCodeのプラグインを知りたい

Question

お世話になります。

VisualStudioCodeエディタを使用しています。

SCSSで変数を記述した_variables.scss を作成し、 style.scss 内で@import "variables";と読み込み、変数を使用しています。

その際、style.scss内でインテリセンス(コード補完機能)が効いてくれません。

別ファイルに記載したSCSSの変数を補完してくれるプラグインを教えて欲しいです。

//_variables.scss
$color-black: #000000;

//style.scss
@import "variables";

.aaa{
    color:$color-black; //←ここを $ と入れるだけで候補を表示して欲しい。
}

Comments

[takopo]

.aaa {
color:
}
のようにコロンの後で候補を出したいということであってますか？

[bpbjsu]

はい！そういった挙動になりませんでしょうか？

Answer 1

自分もそういうプラグインがあったら便利だと思うのですが、見つからないのでユーザースニペットで登録しています。下のようにscss.jsonに_variables.scssで使う変数名を登録しておけば、候補が表示されるようになるのではないでしょうか。

"メインカラー": {
  "prefix": "color:main",
  "body": [
    "\$color-main"
  ]
},
"サブカラー": {
  "prefix": "color:sub",
  "body": [
    "\$color-sub"
  ]
},
"アクセントカラー": {
  "prefix": "color:accent",
  "body": [
    "\$color-accent"
  ]
},
"ベースカラー": {
  "prefix": "color:base",
  "body": [
    "\$color-base"
  ]
},
"テキストカラー": {
  "prefix": "color:txt",
  "body": [
    "\$color-txt"
  ]
},
"リンクカラー": {
  "prefix": "color:link",
  "body": [
    "\$color-link"
  ]
},
"white": {
  "prefix": "color:white",
  "body": [
    "\$color-white"
  ]
},
"black": {
  "prefix": "color:black",
  "body": [
    "\$color-black"
  ]
},
"Primary color": {
  "prefix": "color:primary",
  "body": [
    "\$color-primary"
  ]
}