Slide 1
Slide 1 text
大量の ESLint エラーに
対処する技術
id:mizdra / @mizdra
2024/01/12 ToKyoto.js #2
1
Slide 2
Slide 2 text
自己紹介
● mizdra (みずどら)
● 株式会社はてな
○ Web アプリケーションエンジニア
○ フロントエンドエキスパート
● 興味: 開発者体験向上
○ よく便利グッズ作ってる
2
Slide 3
Slide 3 text
3
さっそく本題
Slide 4
Slide 4 text
4
本日のテーマ
ESLint
Slide 5
Slide 5 text
ESLint とは
● JavaScript 向けの Linter
○ コードを解析し、不具合を引き起こすコードを警告
● JavaScript ではデファクトのはず
● 使ってる人手を挙げて〜
5
Slide 6
Slide 6 text
弊社(はてな)でも使ってます
● JS を書くならほぼ必ず導入
● 社内向けの shareable config も
○ eslint-config-hatena
○ OSS です
6
module.exports = {
root: true,
extends: [
'@hatena/hatena',
'@hatena/hatena/+typescript',
'@hatena/hatena/+prettier',
],
};
Slide 7
Slide 7 text
shareable config 自体は良いけれど...
● 導入が思いの外大変
● 特に大規模なコードベースを持つプロジェクト
7
Slide 8
Slide 8 text
どういうことか
● 違反コードが大量にある
○ 物凄い数のエラーが報告される
● その結果...
○ 全体像が掴めず、切り込みづらい
○ どこから手を付ければ良いのやら
8
Slide 9
Slide 9 text
修正するのも困難
● 数が多すぎるので
● 一応 ESLint には自動修正機能がある
○ `eslint --fix`
○ けど、自動修正可能なルールは一部
● 数百個手で修正していく羽目に
○ やってられない
9
Slide 10
Slide 10 text
せめて段階的な導入をしたい
● 既存のコードでは無効化にしつつ...
○ 新規コードでは有効化したい
● `/* eslint-disable-next-line prefer-const */`
○ エラー行1つ1つに手で挿入しないといけない
● 大変すぎる
10
Slide 11
Slide 11 text
11
技術で解決だ！
Slide 12
Slide 12 text
ツールを作った
● eslint-interactive
○ https://github.com/mizdra/eslint-interactive
○ eslint をラップした CLI ツール
○ 大量のエラーを高速に捌くのに特化
● デモを交えつつ紹介していきます
○ https://github.com/mizdra/eslint-interactive-demo
12
Slide 13
Slide 13 text
使い方
1. `npm install -D eslint-interactive`
2. `eslint …` を `eslint-interactive …` に置き換えて実行
a. 例: `eslint src/` => `eslint-interactive src/`
(デモタイム)
13
Slide 14
Slide 14 text
14
機能紹介
Slide 15
Slide 15 text
● 一気に `eslint --fix` して commit すると...
○ ごちゃまぜの commit になって、レビューが難しい
● rule ごとに修正 & commit したい
● eslint-interactive を使えばできる！
(デモタイム)
15
1. ルールごとに `eslint --fix` する
Slide 16
Slide 16 text
● 既存のコードでは無効、新規コードでは有効にしたい
● そのために...
○ `
/* eslint-disable ... */` を挿入したい
● eslint-interactive を使えばできる！
(デモタイム)
16
2. `
/* eslint-disable ... */`の挿入
Slide 17
Slide 17 text
● 自動修正不可なものを可能な状態に変換するモード
● 例: `no-unused-vars`
○ `const unused = 1` => `const _unused = 1`にしたい
○ しかし、そういう自動修正はできない
○ そこで...
■ `const _unused = 1` に自動修正する rule に convert
■ それを `eslint –-fix` する
17
3. 自動修正可能なエラーに強制変換
Slide 18
Slide 18 text
18
Current
Status
Slide 19
Slide 19 text
19
🤔
Current
Status
Slide 20
Slide 20 text
● Node.js 向けの API
○ プログラマブルに eslint-interactive の機能を呼び出せる
● 例: rule ごとに `eslint --fix` しつつ `git commit`
(デモタイム)
20
4. Programmable API
Slide 21
Slide 21 text
21
Current
Status
Slide 22
Slide 22 text
● ESLint 界のアーミーナイフのご紹介でした
● 他にも色々機能あります
● 是非使ってみてください
22
いかがでしたか?