🧬

VSCodeでファイル保存時にBiomeを適用させる

RYO

2024/11/19に公開

VS Code

Biome

tech

レバテック開発部の松浪です。

私は普段、認証基盤システム（レバテックID）の開発を担当しています。
最近、コードの静的解析およびコードのフォーマッターとして、Biomeを導入しました。

本記事ではVisualStudioCodeで編集中のファイルを保存した時にBiomeを実行させて、即座にコードをフォーマットする方法について記載します。

 使用環境VisualStudioCode: v1.95

Biome: v1.9.4

 手順
 拡張機能としてBiomeをインストールするVisualStudioCodeでBiomeを実行させるには、拡張機能が必要です。

まずはマーケットプレイスから拡張機能をインストールしましょう。
https://marketplace.visualstudio.com/items?itemName=biomejs.biome


 settings.jsonにBiomeを実行する設定を記載する.vscodeディレクトリ配下にあるsettings.jsonというファイルにBiomeを実行させるための設定を追記します。

（ディレクトリやファイルが無ければ手動で作成してください。）
.vscode/settings.json
{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}
それぞれの設定値には以下のような意味があります。

 editor.formatOnSave
ファイルを保存した時にフォーマットすることを許可するフラグです。

デフォルトではfalseになっているので、trueにします。

 editor.defaultFormatter
デフォルトのフォーマッターを指定します。

デフォルトではnullになっているので、 biomejs.biome を指定します。

開発を担当している認証基盤システムでは、NextとTypeScriptで主に実装しているので、ts/js/tsx/jsxファイルがフォーマットの対象となるように設定しています。

 editor.codeActionsOnSave
通常、拡張機能がコードに変更を加える場合、ポップアップでユーザに確認を求められます。

quickfix.biome と source.organizeImports.biome にそれぞれ explicit を指定することで、ファイルを保存した時に確認を求められることなく即座にフォーマットして、import文を良い感じに並べ替えてくれます。

 biome.jsonにフォーマットのルールを記載するルート配下にある biome.json にフォーマットするルールを記載します。

どのようなルールが記載可能なのかは公式ドキュメントを見ながら確認してください。

https://biomejs.dev/reference/configuration/
ルールが多すぎて迷う方は初期設定のままでもいいかもしれません。

https://biomejs.dev/guides/getting-started/#configuration
ちなみに認証基盤システムでは、このような設定にしています。
biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "vcs": { "enabled": false, "clientKind": "git", "useIgnoreFile": false },
  "files": {
    "ignoreUnknown": false,
    "include": ["**/*.ts", "**/*.tsx", "**/*.js"],
    "ignore": [
      "**/dist",
      "**/.next",
      "**/.turbo",
      "**/.vscode",
      "**/node_modules"
    ]
  },
  "formatter": {
    "enabled": true,
    "useEditorconfig": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 80,
    "attributePosition": "auto",
    "bracketSpacing": true,
    "ignore": ["**/dist"]
  },
  "organizeImports": { "enabled": true },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "a11y": {
        "useKeyWithClickEvents": "off"
      },
      "complexity": {
        "noUselessFragments": "warn"
      },
      "correctness": {
        "useHookAtTopLevel": "off",
        "noUnusedVariables": "warn"
      },
      "style": {
        "useSelfClosingElements": "warn"
      }
    }
  },
  "javascript": {
    "formatter": {
      "jsxQuoteStyle": "double",
      "quoteProperties": "asNeeded",
      "trailingCommas": "none",
      "semicolons": "asNeeded",
      "arrowParentheses": "always",
      "bracketSameLine": false,
      "quoteStyle": "double",
      "attributePosition": "auto",
      "bracketSpacing": true
    }
  }
}

ここまでくれば準備完了です。

 動作を確認してみるわざと改行する位置を崩してみて、ファイルを保存してみます。

↓↓↓ 保存(Ctrl+S)
整いました!!
わざとimportの順番を並び替えてみて、ファイルを保存してみます。

↓↓↓ 保存(Ctrl+S)
こちらも整いました!!

 extensions.jsonで推奨する拡張機能を共有する自動でフォーマットするには、VisualStudioCodeに拡張機能をインストールする必要があります。

しかし、チームメンバーや新規参画者に拡張機能をインストールするように伝えるのは面倒ですよね？
.vscodeディレクトリ配下にextensions.jsonというファイルを作っておけば、拡張機能をインストールするように促してくれるようになります。
.vscode/extensions.json
{
  "recommendations": [
    "biomejs.biome"
  ]
}
この extensions.json をリポジトリにPushしておけば、チームメンバーや新規参画者がCloneした際、VisualStudioCodeに下記のようなポップアップが表示されるようになります。

必須ではありませんが、対応しておくと便利かもしれません。

 さいごにファイルを保存時に自動でフォーマットされることで、プルリクエストを上げてからフォーマットし忘れたことに気付く、という事象がなくなりました。

実装が捗りますね。
今後も便利な拡張機能とsettings.jsonを活用して、より良い開発体験を築きたいと思います。