CSS Modulesで未使用のclass名を検知する

できる様になること

これで不要なclass名の記載に気付けます。

方法

pnpm のワークスペースの構成を確認

pnpm-workspace.yaml の例
この場合、apps/web の Next.js プロジェクトに typescript-plugin-css-modules をインストールする

apps/web に typescript-plugin-css-modules をインストール

apps/web に typescript-plugin-css-modules を追加

pnpm add -D typescript-plugin-css-modules -C apps/web

-C apps/web（--filter apps/web でもOK）を指定することで、apps/web のみにインストールできます

tsconfig.json に plugin を追加

apps/web/tsconfig.json に typescript-plugin-css-modules を追加

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-plugin-css-modules"
      }
    ]
  }
}

これで apps/web だけで typescript-plugin-css-modules が適用され、VSCode で stylesの未定義エラーを警告表示できる様になります

VSCode を再起動しましょう。

VSCodeがnode_modules/typescriptを参照する様にする

「VS codeのバージョンを使用」をチェックしましょう。

これでVS Code上でCSS Modulesを用いた未使用のclass名の検知ができます。
それでは、良いVS Codeライフを!