Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
大量の ESLint エラーに対処する技術 / The technology to fight...
Search
mizdra
PRO
January 12, 2024
Technology
0
3.1k
大量の ESLint エラーに対処する技術 / The technology to fight with many ESLint's errors
2024/01/12 の ToKyoto.js #2 で話した発表資料です。
mizdra
PRO
January 12, 2024
Tweet
Share
More Decks by mizdra
See All by mizdra
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
6.3k
あなたの知らない Function.prototype.toString() の世界
mizdra
PRO
4
5.4k
React Server Components の疑問を解き明かす
mizdra
PRO
21
13k
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
PRO
8
2.9k
Vue Language Server から生まれた Volar.js と、それが秘める可能性
mizdra
PRO
13
8.8k
マルチテナントで GraphQL を使う際の工夫
mizdra
PRO
0
2.6k
Webフロントエンドの秩序を維持する体制を作る
mizdra
PRO
9
26k
個人開発の裏側
mizdra
PRO
0
360
祝う2
mizdra
PRO
0
750
Other Decks in Technology
See All in Technology
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
5
700
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
220
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
110
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.4k
Rustから学ぶ 非同期処理の仕組み
skanehira
1
130
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
260
2025年になってもまだMySQLが好き
yoku0825
8
4.5k
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.7k
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
150
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
440
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Embracing the Ebb and Flow
colly
87
4.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Fireside Chat
paigeccino
39
3.6k
How to Ace a Technical Interview
jacobian
279
23k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Transcript
大量の 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 いかがでしたか?