新しいTypeScriptのリンター Biomeを触ってみる

BiomeというTypeScriptのフォーマッタ/リンターがあると聞いて触ってみました。
Vite Reactのプロジェクトで使ってみます。

プロジェクトを生成する

npm create vite@latest

インストール

npm install --save-dev --save-exact @biomejs/biome

設定ファイルを生成する

npx biome init

vscodeの拡張機能を追加する

.vscode/extensions.json

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

vscodeの設定をする

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "files.eol": "\n",
  "editor.codeActionsOnSave": {
    "quickfix.biome": true,
    "source.organizeImports.biome": true
  }
}

Biomeの設定をする

biome.json

{
  "$schema": "https://biomejs.dev/schemas/1.3.3/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "lineWidth": 80
  }
}

package.jsonにコマンドを追加する

package.json

    "lint:code": "biome lint ./",
    "lint:style": "biome format ./",
    "fix:style": "biome format --write ./",
    "fix:code": "biome lint --apply ./"

感想

リンターとフォーマッターが一緒になっていて便利でした。
とっても速く動くので、コードが多くなっても開発機の負担が少なくCIでも有利だろうなと思いました😊