Biome を使ってみる

Astro と Svelte 製のサイトで、コードリンター＆フォーマッターを Eslint・Prettier から Biome に変更しました。

Biome

Format, lint, and more in a fraction of a second.

biomejs.dev

サイトについて

• built with
  • Astro
  • Svelte • Cybernetically enhanced web apps
  • ESLint - Pluggable JavaScript Linter
    • @typescript-eslint/eslint-plugin
    • @typescript-eslint/parser
    • eslint-import-resolver-typescript
    • eslint-plugin-import
    • eslint-plugin-jsx-a11y
    • eslint-plugin-astro
    • eslint-plugin-svelte
    • eslint-config-prettier
    • svelte-eslint-parser
  • Prettier · Opinionated Code Formatter
    • prettier-plugin-astro
    • prettier-plugin-svelte

1
extends:
2
  - eslint:recommended
3
  - plugin:astro/recommended
4
  - plugin:svelte/recommended
5
  # - plugin:jsx-a11y/recommended
6
  # - plugin:import/recommended
7
  # - plugin:import/typescript
8
  - prettier
9
parser: '@typescript-eslint/parser'
10
parserOptions:
11
  ecmaVersion: latest
12
  sourceType: module
13
overrides:
14
  - files:
15
      - '*.astro'
16
    parser: astro-eslint-parser
17
    parserOptions:
18
      parser: '@typescript-eslint/parser'
19
      extraFileExtensions:
20
        - .astro
21
    rules: {}
22
  - files:
23
    - '*.svelte'
24
    parser:  svelte-eslint-parser
25
    parserOptions:
26
      parser: '@typescript-eslint/parser'
27
      extraFileExtensions:
28
        - .svelte
29
    rules: {}
30
plugins:
31
  - '@typescript-eslint'
32
ignorePatterns:
33
  - './dist/**/*'
34
  - './node_modules/**/*'
35
settings: {}
36
rules: {
37
  no-undef: off,
38
  no-unused-vars: warn
39
}

1
trailingComma: es5
2
tabWidth: 2
3
semi: false
4
singleQuote: true
5
plugins:
6
  - prettier-plugin-astro
7
  - prettier-plugin-svelte

Biomeとは

Web開発のためのたった1つのツールチェーン format、lintなどが一瞬で完了します！

サイトトップで『高速』を謳っているが、確かに怖いくらいに速い。

設定

1
npm install --save-dev --save-exact @biomejs/biome
2
npx @biomejs/biome init

for GitHub

biome init で作成した biome.json に下を追加

1
{
2
 "vcs": {
3
  "enabled": true,
4
  "clientKind": "git",
5
  "useIgnoreFile": true
6
 }
7
}

for Astro

biome init で作成した biome.json に下を追加

1
{
2
  "javascript": {
3
    "globals": [
4
      "Astro"
5
    ]
6
  }
7
}

for Svelte

biome init で作成した biome.json に下を追加した。Svelte では $:double = count * 2や$: {} といった様にドル記号を使った Reactive Declarations がある。これがルールに抵触するので、noUnusedLabels と noConfusingLabels を OFF にして、.svelte ではルールを上書きしている。

1
{
2
 "overrides": [
3
  {
4
   "include": [
5
    "*.svelte"
6
   ],
7
   "linter": {
8
    "rules": {
9
     "correctness": {
10
      "noUnusedLabels": "off"
11
     },
12
     "suspicious": {
13
      "noConfusingLabels": "off"
14
     },
15
     "style": {
16
      "useConst": "off"
17
     }
18
    }
19
   }
20
  }
21
 ]
22
}

• Reactive Declarations - Docs • Svelt Docs
• The many meanings of $ in Svelte - Geoff Rich

よかったところ、そうでもなかったところ

• よかったところ
  • configファイル内の記述が単純になったところ
  • 大量のプラグインが不要になったことろ
  • 処理が非常に高速で一瞬で終わるところ
• そうでもなかったところ
  • 特にない
    • 強いて言えば、まだ日が浅いので便利なプラグインが少ないところ。必要であれば作るのみ

さいごに

Biome の登場からまだ日が浅く、Eslint とそのプラグインによる非常に便利な機能はまだ足りない。しかし、設定ファイルを簡素にでき、処理も高速など、できるだけ簡単・簡潔にコードを整えたい需要には丁度良いと感じました。