Visual Studio CodeのExtensionで、CSS in JSでもCSS Custom Propertiesを補完させる

この記事の概要

私は最近CSS in JSでスタイルを書くことが多いのですが、CSS Custom Properties（CSS変数）が補完されず微妙に非効率な思いをしていました。
これを解消できるVisual Studio CodeのExtensionを発見したので、簡単な使い方とともに紹介します。

また、新人プログラマ応援 - みんなで新人を育てよう！イベントへの参加記事でもあります。

最終イメージ

CSS Custom Propertiesを定義しているのも、それを呼び出しているのもTypeScriptのファイルです。
しかし、ちゃんと補完が効いています。

Extension

こちらのExtensionです。

似たようなExtensionはいくつかありましたが、.cssのファイルを触っている間しか補完が効かないなど……。
CSS Custom PropertiesやCSS Variableなどで検索してヒットするものをひとしきり試した中ではこのExtensionが1番求めるものに近かったです。

デフォルト設定

上記のドキュメントにある通りですが、デフォルトでは以下のファイルを対象にして補完されます。

[
  "**/*.css",
  "**/*.scss",
  "**/*.sass",
  "**/*.less"
]

また、以下のものは除外されています。

[
  "**/.git",
  "**/.svn",
  "**/.hg",
  "**/CVS",
  "**/.DS_Store",
  "**/.git",
  "**/node_modules",
  "**/bower_components",
  "**/tmp",
  "**/dist",
  "**/tests"
]

.jsや.ts内でCustom Propertiesを定義する際

styled-componentsのcreateGlobalStyleやEmotionのGlobalを使用している場合、.jsや.tsのファイル内でCustom Propertiesを定義することもあると思います。

この場合、Visual Studio Codeのsettings.jsonを開いて、以下のように記載します。

{
  // 既存の設定
  "cssVariables.lookupFiles": [
    "**/*.css",
    "**/*.scss",
    "**/*.sass",
    "**/*.less",
    "**/*.js",
    "**/*.ts"
  ],
}

グローバルなsettings.jsonではなく、ワークスペース固有のsettings.jsonに対して指定するのももちろんOKです。

{
  // 既存の設定
  "cssVariables.lookupFiles": [
    "path/to/styles.js",
    "path/to/styles.ts"
  ],
}

---

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！