大量の ESLint エラーに対処する技術 / The technology to fight with many ESLint's errors

Transcript

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

   1

2. 自己紹介 • mizdra (みずどら) • 株式会社はてな ◦ Web アプリケーションエンジニア ◦

   フロントエンドエキスパート • 興味: 開発者体験向上 ◦ よく便利グッズ作ってる 2

3. 3 さっそく本題

4. 4 本日のテーマ ESLint

5. ESLint とは • JavaScript 向けの Linter ◦ コードを解析し、不具合を引き起こすコードを警告 • JavaScript

   ではデファクトのはず • 使ってる人手を挙げて〜 󰢨󰢨 5

6. 弊社(はてな)でも使ってます • JS を書くならほぼ必ず導入 • 社内向けの shareable config も ◦

   eslint-config-hatena ◦ OSS です 6 module.exports = { root: true, extends: [ '@hatena/hatena', '@hatena/hatena/+typescript', '@hatena/hatena/+prettier', ], };

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

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

   どこから手を付ければ良いのやら 8

9. 修正するのも困難 • 数が多すぎるので • 一応 ESLint には自動修正機能がある ◦ `eslint --fix`

   ◦ けど、自動修正可能なルールは一部 • 数百個手で修正していく羽目に ◦ やってられない 9

10. せめて段階的な導入をしたい • 既存のコードでは無効化にしつつ... ◦ 新規コードでは有効化したい • `/* eslint-disable-next-line prefer-const */`

    ◦ エラー行1つ1つに手で挿入しないといけない • 大変すぎる 10

11. 11 技術で解決だ！

12. ツールを作った • eslint-interactive ◦ https://github.com/mizdra/eslint-interactive ◦ eslint をラップした CLI ツール

    ◦ 大量のエラーを高速に捌くのに特化 • デモを交えつつ紹介していきます ◦ https://github.com/mizdra/eslint-interactive-demo 12

13. 使い方 1. `npm install -D eslint-interactive` 2. `eslint …` を

    `eslint-interactive …` に置き換えて実行 a. 例: `eslint src/` => `eslint-interactive src/` (デモタイム) 13

14. 14 機能紹介

15. • 一気に `eslint --fix` して commit すると... ◦ ごちゃまぜの commit

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

16. • 既存のコードでは無効、新規コードでは有効にしたい • そのために... ◦ ` /* eslint-disable ... */`

    を挿入したい • eslint-interactive を使えばできる！ (デモタイム) 16 2. ` /* eslint-disable ... */`の挿入

17. • 自動修正不可なものを可能な状態に変換するモード • 例: `no-unused-vars` ◦ `const unused = 1`

    => `const _unused = 1`にしたい ◦ しかし、そういう自動修正はできない ◦ そこで... ▪ `const _unused = 1` に自動修正する rule に convert ▪ それを `eslint –-fix` する 17 3. 自動修正可能なエラーに強制変換

18. 18 Current Status

19. 19 🤔 Current Status

20. • Node.js 向けの API ◦ プログラマブルに eslint-interactive の機能を呼び出せる • 例:

    rule ごとに `eslint --fix` しつつ `git commit` (デモタイム) 20 4. Programmable API

21. 21 Current Status

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