From 7280b0068d6d5ab9aaf22b66735687d5269ce370 Mon Sep 17 00:00:00 2001 From: Yuto Yoshino Date: Wed, 25 Dec 2024 02:06:15 +0900 Subject: [PATCH] =?UTF-8?q?Biome=E3=81=A8typescript-eslint=E3=81=AE?= =?UTF-8?q?=E4=BD=B5=E7=94=A8=E3=81=A8=E5=9E=8B=E6=83=85=E5=A0=B1Lint?= =?UTF-8?q?=E3=81=AE=E8=AA=B2=E9=A1=8C=20(#63)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: BiomeとESLintは共存させる * update * update --- .../posts/biome-and-typescript-eslint.mdx | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 app/routes/posts/biome-and-typescript-eslint.mdx diff --git a/app/routes/posts/biome-and-typescript-eslint.mdx b/app/routes/posts/biome-and-typescript-eslint.mdx new file mode 100644 index 0000000..ea584d0 --- /dev/null +++ b/app/routes/posts/biome-and-typescript-eslint.mdx @@ -0,0 +1,61 @@ +--- +title: "Biomeとtypescript-eslintの併用と型情報Lintの課題" +description: "VercelがBiomeのGold Sponsorになりました。これを機に、採用していく企業やチームが増えていくはずなので、Biomeの課題でもある型情報Lintの話をしようと思います。" +date: "2024/12/25" +updatedAt: "2024/12/25" +path: "biome-and-typescript-eslint" +published: true +--- + +[2024年 ユウトの一人アドベントカレンダー](https://adventar.org/calendars/9980)の25日目の記事です。 + +## Intro + +VercelがBiomeのGold Sponsorになりました。 + +これを機に、採用していく企業やチームが増えていくはずなので、Biomeの課題でもある型情報Lintの話をしようと思います。 + +## 前提 + +本記事では話をスムーズに進ませるために、いくつか前提をすっ飛ばしていくので、以下のブログを見ていただけると、話がスムーズに進むかもしれません。 + +- [typescript-eslintでの型情報の利用とルール実装の実際](https://yossy.dev/posts/typescript-eslint-type-info-rules) +- [eslint v9で追加されたunused disable directivesとbiomeは相性がいいかもしれない](https://yossy.dev/posts/eslint-v9-biome) + +## Details + +Biomeが型情報を用いたLintルールがないことは、有名な話だと思います +こちらについては、[☂️ Type-aware linter #3187](https://github.com/biomejs/biome/issues/3187)をご覧いただければいいでしょう。 + +Biome側がどうするかも気になるところですが、今現在でこの方法を解決する手段として、typescript-eslintとbiomeを同時に動かすという方法を提案します。 + +### typescript-eslintとbiomeを同時に動かす + +動かすために特段難しいことをする必要はなく、二つのパッケージ（正しくはeslintも入っているはずなので三つではあります）をインストールし、セットアップするだけで動かせるはずです。 + +これにより、Biomeの速度の恩恵も受けつつ、typescript-eslintで使いたいルールや、カスタムルールなども使うことができます。 + +ちらっと出たカスタムルールですが、これはBiome側でGritQLを使ったプラグインの作成をできるようになるように進んでいます。これは型情報よりも近いうちにリリースされるはずです。 + +[成長中のFanTech領域におけるBiomeを活用したCIの高速化](https://cadc.cyberagent.co.jp/2024/sessions/fantech-web-biome/)というセッションで、この話と既存のeslintからの移行なども話しているので、ぜひ見てみてください。 + +## typescript-eslintのあり方 + +余談ですが、今年のVueFesに参加した際、Vue.jsの作者の[Evan You](https://x.com/youyuxi)と、OXCの作者の[Boshen](https://x.com/boshen_c)と話す機会がありました。 + +OXCはBiome同様、rust製linterのoxlintというものを作っています。そのため、気になっていた「typescript-eslint相当のlintルールを作ることはやはり難しいのか」という質問をしました。 + +この際、覚えている限りでは以下のような返答をいただきました。 + +- tscは遅すぎる +- typescript-eslintはtypescript本体が持っているべきでは？ + +Biome側がtypescript-eslit相当のものを実装しない要因として、tscの遅さは同様に挙げていました。 +実際、普通に実行した時にはそこの課題は露呈していると思います。 + +同時にやはりisolatedDeclartionがデフォルトになれば、tscは早くなるはずなので、そうなればできるかも。みたいなことも言っていました。 + +## まとめ + +最後は少し余談を挟んでしまいましたが、要するに、 +Biomeを採用する際にtypescript-eslintがない、カスタムルールがないから使わない。というのは勿体無く、biome + eslint + typescrip-eslintを併用すれば解決できるかもしれません。 \ No newline at end of file