大量の ESLint エラーに 対処する技術 id:mizdra / @mizdra 2024/01/12 ToKyoto.js #2 1 

自己紹介 ● mizdra (みずどら) ● 株式会社はてな ○ Web アプリケーションエンジニア ○ フロントエンドエキスパート ● 興味: 開発者体験向上 ○ よく便利グッズ作ってる 2 

3 さっそく本題 

4 本日のテーマ ESLint 

ESLint とは ● JavaScript 向けの Linter ○ コードを解析し、不具合を引き起こすコードを警告 ● JavaScript ではデファクトのはず ● 使ってる人手を挙げて〜 󰢨󰢨 5 

弊社(はてな)でも使ってます ● JS を書くならほぼ必ず導入 ● 社内向けの shareable config も ○ eslint-config-hatena ○ OSS です 6 module.exports = { root: true, extends: [ '@hatena/hatena', '@hatena/hatena/+typescript', '@hatena/hatena/+prettier', ], }; 

shareable config 自体は良いけれど... ● 導入が思いの外大変 ● 特に大規模なコードベースを持つプロジェクト 7 

どういうことか ● 違反コードが大量にある ○ 物凄い数のエラーが報告される ● その結果... ○ 全体像が掴めず、切り込みづらい ○ どこから手を付ければ良いのやら 8 

修正するのも困難 ● 数が多すぎるので ● 一応 ESLint には自動修正機能がある ○ `eslint --fix` ○ けど、自動修正可能なルールは一部 ● 数百個手で修正していく羽目に ○ やってられない 9 

せめて段階的な導入をしたい ● 既存のコードでは無効化にしつつ... ○ 新規コードでは有効化したい ● `/* eslint-disable-next-line prefer-const */` ○ エラー行1つ1つに手で挿入しないといけない ● 大変すぎる 10 

11 技術で解決だ！ 

ツールを作った ● eslint-interactive ○ https://github.com/mizdra/eslint-interactive ○ eslint をラップした CLI ツール ○ 大量のエラーを高速に捌くのに特化 ● デモを交えつつ紹介していきます ○ https://github.com/mizdra/eslint-interactive-demo 12 

使い方 1. `npm install -D eslint-interactive` 2. `eslint …` を `eslint-interactive …` に置き換えて実行 a. 例: `eslint src/` => `eslint-interactive src/` (デモタイム) 13 

14 機能紹介 

● 一気に `eslint --fix` して commit すると... ○ ごちゃまぜの commit になって、レビューが難しい ● rule ごとに修正 & commit したい ● eslint-interactive を使えばできる！ (デモタイム) 15 1. ルールごとに `eslint --fix` する 

● 既存のコードでは無効、新規コードでは有効にしたい ● そのために... ○ ` /* eslint-disable ... */` を挿入したい ● eslint-interactive を使えばできる！ (デモタイム) 16 2. ` /* eslint-disable ... */`の挿入 

● 自動修正不可なものを可能な状態に変換するモード ● 例: `no-unused-vars` ○ `const unused = 1` => `const _unused = 1`にしたい ○ しかし、そういう自動修正はできない ○ そこで... ■ `const _unused = 1` に自動修正する rule に convert ■ それを `eslint –-fix` する 17 3. 自動修正可能なエラーに強制変換 

18 Current Status 

19 🤔 Current Status 

● Node.js 向けの API ○ プログラマブルに eslint-interactive の機能を呼び出せる ● 例: rule ごとに `eslint --fix` しつつ `git commit` (デモタイム) 20 4. Programmable API 

21 Current Status 

● ESLint 界のアーミーナイフのご紹介でした ● 他にも色々機能あります ● 是非使ってみてください 22 いかがでしたか?