From 1da2052a4576b6d31c9aa9f48b1634a8eea6c18d Mon Sep 17 00:00:00 2001
From: Yuto Yoshino <yossydev@yossy.dev>
Date: Mon, 11 Nov 2024 23:08:54 +0900
Subject: [PATCH] =?UTF-8?q?eslint=20v9=E3=81=A7=E8=BF=BD=E5=8A=A0=E3=81=95?=
 =?UTF-8?q?=E3=82=8C=E3=81=9Funused=20disable=20directives=E3=81=A8biome?=
 =?UTF-8?q?=E3=81=AF=E7=9B=B8=E6=80=A7=E3=81=8C=E3=81=84=E3=81=84=E3=81=8B?=
 =?UTF-8?q?=E3=82=82=E3=81=97=E3=82=8C=E3=81=AA=E3=81=84=20(#55)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: eslint v9で追加されたunused disable directivesとbiomeは相性がいいかもしれない

* feat

* ipdate
---
 .gitignore                           |  5 ++
 app/routes/posts/eslint-v9-biome.mdx | 79 ++++++++++++++++++++++++++++
 package.json                         |  2 +-
 3 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 app/routes/posts/eslint-v9-biome.mdx

diff --git a/.gitignore b/.gitignore
index a20e8b3..b2498d4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,8 @@ package-lock.json
 yarn.lock
 pnpm-lock.yaml
 bun.lockb
+
+# https
+localhost-key.pem
+localhost.pem
+
diff --git a/app/routes/posts/eslint-v9-biome.mdx b/app/routes/posts/eslint-v9-biome.mdx
new file mode 100644
index 0000000..bc64055
--- /dev/null
+++ b/app/routes/posts/eslint-v9-biome.mdx
@@ -0,0 +1,79 @@
+---
+title: "eslint v9で追加されたunused disable directivesとbiomeは相性がいいかもしれない"
+description: "a"
+date: "2024/12/01"
+updatedAt: "2024/12/01"
+path: "eslint-v9-unused-disable-directives-biome"
+published: false
+---
+
+本記事は、[ユウトの一人アドベントカレンダー](https://adventar.org/calendars/9981)の1日目です
+
+## Intro
+
+最近v9へのバージョンアップを行ったんですが、その際に`lint --fix`を行うとなぜか大量のeslint-disableコメントが削除されるようになりました。
+
+これはeslint v9.5で追加された`remove unused eslint-disable directive`という機能によるものなんですが、これを使えばBiomeへの以降もちょっとやりやすくなるのかなと思った話をします。
+
+## unused disable directivesとは
+
+[feat: warn by default for unused disable directives](https://github.com/eslint/eslint/pull/17879)というPRで、eslint本体に取り込まれた機能です。
+正確に言えば実装はこの機能が追加されたPRは[こっち](https://github.com/eslint/eslint/pull/17212)なんですが、実装コードは今回の話には関係ないので一旦このまま進めます。
+
+動き自体はシンプルで、意味がないeslint-disableコメントがあった場合、warnが出るようになって、`--fix`を行うとauto fixするという機能です。
+
+なのでおそらく大小はあれど、不要なeslint-disableはそこそこのプロダクト規模ならあると思うので、影響を受けた方も多いかと思います。
+
+## 前提
+
+以降の話に進む前に、少し筆者の考えを書いておきます。
+
+筆者は、現在のBiomeのLinterの上手な使い方は、ESLintと共存させることだと思っています。
+Biomeの恩恵を受けつつ、足りない機能、カスタムルールやtypescript-eslintを使用し、型情報のLintなども可能になるためです。
+
+これは新規プロダクトよりも、すでにある程度Lintに依存しているプロダクトの方がメリットはあるかと思います。しかし、そうなった場合に一つ課題としてあるのが、ESLintルールの後始末です。
+
+例えば、eslintのコアルールをいくつかBiomeに置き換えたいとします。この中のルールにはBiomeに移行できるものもあれば、そうでないものも色々混ざっています。
+そうでないものは引き続き個別にルールをonにして使えば良いかと思いますが、Biomeで使えるものは速度面でもなるべく移行したいです。
+
+しかし、ESLintのコアルールは、通常定義されていないルールをeslint-disableしようとすると、`Definition for rule 'foo rule' was not found`というエラーになりますが、コアルールに限ってはこれはならないです。
+なので例えば、以下のようなコードがあったとします。
+
+✅ 存在しないルールなのでエラーになる
+```js
+/* eslint-disable non-existent-rule */
+
+function foo() {
+  console.log("Hello");
+}
+```
+
+❌ コアルールなのでそのまま残り続ける
+```js
+/* eslint-disable camelcase */
+
+const my_variable = 123;
+```
+
+eslint-disableなのでminifyしていれば削除されるとはいえ、なるべくデッドコードは無くしておきたいです。
+
+## unused disable directivesで解決
+
+遠回りしましたが、今回伝えたかったことです。
+最初にもお伝えした通り、eslint v9からは、無効な`eslint-disable`があった場合、warnが出るようになり、auto fixしてくれるようにもなりました。
+
+つまり、**Biome移行時の一つのmigrateコマンドとして機能としてくれるということ**です。
+
+しかも、場合によっては移行時に意図せず無効になってしまっているルールにも気づくことができます。筆者はこれを実際に体験しました。
+
+## まとめ
+
+今更v9のことかよと思われた方もいるかもしれませんが、筆者は基本Reactプロジェクトしか見ていないので、eslint-plugin-react-hooksの影響で揚げたくてもなかなかあげられませんでした。
+最近やっとv9対応してくれたのであげてみて、今回の内容に繋がった次第です。
+
+Biomeも着々とplugin対応が進んでいるので、今後が楽しみです。
+
+## 関連・参考
+
+- [feat: warn by default for unused disable directives](https://github.com/eslint/eslint/pull/17879)
+- [feat: Support custom severity when reporting unused disable directives](https://github.com/eslint/eslint/pull/17212)
diff --git a/package.json b/package.json
index 6e5b016..03556b1 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "blog",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build --mode client && vite build",
     "preview": "wrangler pages dev ./dist",
     "deploy": "NODE_TLS_REJECT_UNAUTHORIZED=0 $npm_execpath run build && wrangler pages deploy ./dist",