Biome を使ってみる
/
Astro と Svelte 製のサイトで、コードリンター&フォーマッターを Eslint・Prettier から Biome に変更しました。
サイトについて
- 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
.eslintrc.yml
1extends:2 - eslint:recommended3 - plugin:astro/recommended4 - plugin:svelte/recommended5 # - plugin:jsx-a11y/recommended6 # - plugin:import/recommended7 # - plugin:import/typescript8 - prettier9parser: '@typescript-eslint/parser'10parserOptions:11 ecmaVersion: latest12 sourceType: module13overrides:14 - files:15 - '*.astro'16 parser: astro-eslint-parser17 parserOptions:18 parser: '@typescript-eslint/parser'19 extraFileExtensions:20 - .astro21 rules: {}22 - files:23 - '*.svelte'24 parser: svelte-eslint-parser25 parserOptions:26 parser: '@typescript-eslint/parser'27 extraFileExtensions:28 - .svelte29 rules: {}30plugins:31 - '@typescript-eslint'32ignorePatterns:33 - './dist/**/*'34 - './node_modules/**/*'35settings: {}36rules: {37 no-undef: off,38 no-unused-vars: warn39}
.pretterrc.yml
1trailingComma: es52tabWidth: 23semi: false4singleQuote: true5plugins:6 - prettier-plugin-astro7 - prettier-plugin-svelte
Biomeとは
Web開発のためのたった1つのツールチェーン format、lintなどが一瞬で完了します!
サイトトップで『高速』を謳っているが、確かに怖いくらいに速い。
設定
1npm install --save-dev --save-exact @biomejs/biome2npx @biomejs/biome init
for GitHub
biome init
で作成した biome.json
に下を追加
1{2 "vcs": {3 "enabled": true,4 "clientKind": "git",5 "useIgnoreFile": true6 }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}
よかったところ、そうでもなかったところ
- よかったところ
- configファイル内の記述が単純になったところ
- 大量のプラグインが不要になったことろ
- 処理が非常に高速で一瞬で終わるところ
- そうでもなかったところ
- 特にない
- 強いて言えば、まだ日が浅いので便利なプラグインが少ないところ。必要であれば作るのみ
- 特にない
さいごに
Biome の登場からまだ日が浅く、Eslint とそのプラグインによる非常に便利な機能はまだ足りない。しかし、設定ファイルを簡素にでき、処理も高速など、できるだけ簡単・簡潔にコードを整えたい需要には丁度良いと感じました。