Biome を使ってみる

/
#biome#eslint#prettier

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

サイトについて

.eslintrc.yml
undefined
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
}
.pretterrc.yml
undefined
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などが一瞬で完了します！

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

設定

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

for GitHub

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

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

for Astro

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

undefined
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 ではルールを上書きしている。

undefined
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
}

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

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

さいごに

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