biomeを使って、VSCodeでNext.js（TypeScript + CSSModules）を開発する際、ファイル保存時に自動整形を掛ける 💻

以前は、SCSSはstylelintで、TypeScriptはbiomeで整形を行っていたのですが、biomeがCSSをサポートするようになったので、biomeに一本化することにしました。

前提

biomeのVSCode拡張を入れる
SCSS、PostCSSは諦める（biomeがサポートしていないため）
yarnを使う

という感じで進めます。
僕は、CSSModulesをSCSSで書いていて、ループだけ時々使っていましたが、そこまで使用頻度が高かったこともあり、これを機にCSSでの記述に切り替えました。

手順

❶ Next.jsのプロジェクトを作成

yarn create next-app .

❷ biomeの導入

yarn add --dev --exact @biomejs/biome

yarn biome init

❸ .vscode/extensioins.json の作成

{
  "recommendations": ["biomejs.biome"]
}

❹ .vscode/settings.json の作成

{
  "editor.codeActionsOnSave": {
    "source.organizeImports.biome": "explicit"
  },
  "editor.formatOnSave": true,
  "files.associations": {
    "*.css": "css"
  },
  "[javascript][typescript][javascriptreact][typescriptreact][json][jsonc]": {
    "editor.tabSize": 2,
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[css]": {
    "editor.tabSize": 2,
    "editor.defaultFormatter": "biomejs.biome"
  }
}

これでOKです。

ハマった点 ❶

.vscode/settings.json

{
  "files.associations": {
    "*.css": "css"
  }
}

こちらの記述で、.cssファイルをCSSとして認識させているのですが、これがない状態で、.cssファイルにフォーマットを走らせると、

Configure Default Formatter
There are multiple formatters for 'PostCSS' files. One of them should be configured as default formatter.

と表示されます。

これはおそらく、Next.jsがPostCSSをサポートしていることが原因なので、.cssファイルをCSSファイルとして認識させるとフォーマットがうまくいくようになります。

ハマった点 ❷

biomeを1.9.4から2.0.2にアップデートしたら

biome client: couldn't create connection to server.

となって、動かなくなりました。

spawn /node_modules/@biomejs/cli-darwin-arm64/biome EACCES

的なエラーです。
一か八か、/node_modules/@biomejs/cli-darwin-arm64/biomeに実行権限を付与してみたんですが、それでもダメでした。

どうも、2.0.1から挙動が怪しいみたいです。

github.com

おとなしく、2.0.0を使うことにしました。

リポジトリ