Biome を使ってみる

/

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 がある。これがルールに抵触するので、noUnusedLabelsnoConfusingLabels を 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 とそのプラグインによる非常に便利な機能はまだ足りない。しかし、設定ファイルを簡素にでき、処理も高速など、できるだけ簡単・簡潔にコードを整えたい需要には丁度良いと感じました。