BiomeがVueに対応したらしいので使ってみる

JavaScript/TypeScript Vue

publishedAt: 2024-03-18 14:29:44updatedAt: 2024-03-24 17:21:39

BiomeがVueに対応したらしい。

対応したとはいっても、Partial Supportである旨が記載されており、Astro, Svelte, VueそれぞれのファイルのJS/TS部分だけの適用に留まっているようだ。

ただ、2024年のロードマップを見る限り、HTMLとMarkdownの対応も予定されており、これらが使用できるようになればVue, Svelte, Astroも解析できるようになると。

早速つかってみよう。この記事を書いているブログで試す。

biomeのinstall/init

おれはBunを使っているのでこれでイケる。

--jsoncオプションを付与するとjsoncで設定ファイルが生成されるのでこれをつけてみる。

fish

bun add --dev --exact @biomejs/biome
bunx @biomejs/biome init --jsonc

biomeの設定

initまで済ませるとbiome.jsonが生成される。

biome.jsonc

{
  "$schema": "https://biomejs.dev/schemas/1.6.1/schema.json",
  "organizeImports": {
    "enabled": false
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

今回はただ試したいだけなので、特にeslint設定の引継ぎなどはしない。

ただしprettierからのmigrateが同バージョンから実装されたので、これは試してみる。

今後eslint設定のmigrateも実装されるみたい。

fish

biome migrate prettier

元の.prettierrcがこれで。

.prettierrc

{
  "printWidth": 100,
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": false,
  "arrowParens": "avoid",
  "singleQuote": false,
  "endOfLine": "lf"
}

コマンドを実行すると、biome.jsoncがこうなる。

biome.jsonc

{
  "$schema": "https://biomejs.dev/schemas/1.6.1/schema.json",
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 100,
    "attributePosition": "auto"
  },
  "organizeImports": { "enabled": true },
  "linter": { "enabled": true, "rules": { "recommended": true } },
  "javascript": {
    "formatter": {
      "jsxQuoteStyle": "double",
      "quoteProperties": "asNeeded",
      "trailingComma": "all",
      "semicolons": "asNeeded",
      "arrowParentheses": "asNeeded",
      "bracketSpacing": true,
      "bracketSameLine": false,
      "quoteStyle": "double",
      "attributePosition": "auto"
    }
  }
}

なるほど。これは便利な機能…。

biomeのコマンドを試してみる

早速biomeを試してみる。

lint

fish

biome lint --apply src
Checked 47 files in 3ms. No fixes needed.

ルールが違うので完璧に比較できないが、eslintでは3秒くらいかかっていたものが3msで終わっているらしい。異常なはやさ。

ちなみにforEachを使うとおこられる

biome.jsoncでlinter.rules.recommendをtrueにしている（デフォルト値）が、forEachを使ったら怒られた。

fish

src/hoge.ts:5:3 lint/complexity/noForEach ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Prefer for...of instead of forEach.

    4 │ const testEach = (arr: string[]) => {
  > 5 │   arr.forEach(arr => console.log(arr))
      │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    6 │ }

  ℹ forEach may lead to performance issues when working with large arrays. When combined with functions like filter or map, this causes multiple iterations over the same type.

反復が多くパフォーマンスの問題があるから、forEachじゃなくてfor of...を使えと言われた。

ただmapにfilterをチェーンした箇所については怒られなかった。

format

fish

biome format src
Checked 47 files in 2ms. No fixes needed.

またしても異常なはやさだ。prettierのときは1秒はかからないものの1秒弱はかかっていたので驚愕

check

lintとformatを同時に行うことができるcheckコマンドがある。

fish

biome check --apply src
Checked 47 files in 4ms. No fixes needed.

同時に行ってもたったの4msだ。異常だ。

Vueファイルでテストしてみる

<script>

このように余計な改行を入れた箇所ではどうなるのか。

hoge.vue

const articleOverviewTitle = css(
  { fontSize: "xl", fontWeight: "bold" }
)

hoge.vue

const articleOverviewTitle = css({ fontSize: "xl", fontWeight: "bold" })

きちんと改行が消えている。確かにJavaScript/TypeScriptの箇所は対応されているらしい。

<template>

対応していないとは書いていたが一応。

hoge.vue

<template>
  <p>
    <span>
      aaa
    </span>
  </p>
</template>

特にここがformatされるなどはしていない。prettierにかけると以下のようになる。

hoge.vue

<template>
  <p>
    <span> aaa </span>
  </p>
</template>

ここも早く対応してほしいですね。

biomeの所感

現状はPartial Supportだけれど着実にVueへの対応が進んでいて非常にうれしい。

正直lintやformatの速度も重要だが、eslintはプラグインが非常に多くて管理するのが大変であるため、それがライブラリ1つで完結してしまうのがあまりにも神だ！

アップデートはdependabotやrenovateに任せるとはいえ、package.jsonにeslint/nantoka-kantokaという文字列がズラーッと並んでいるとかなり辟易としてしまう。

biomeにはこれからも頑張ってもらいたい！！！このブログのプロジェクトにはいれることにした。