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
3.8k
あなたの知らない Function.prototype.toString() の世界
mizdra
PRO
4
5.1k
React Server Components の疑問を解き明かす
mizdra
PRO
21
13k
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
PRO
8
2.7k
Vue Language Server から生まれた Volar.js と、それが秘める可能性
mizdra
PRO
13
8.5k
マルチテナントで GraphQL を使う際の工夫
mizdra
PRO
0
2.5k
Webフロントエンドの秩序を維持する体制を作る
mizdra
PRO
9
25k
個人開発の裏側
mizdra
PRO
0
340
祝う2
mizdra
PRO
0
730
Other Decks in Technology
See All in Technology
How Community Opened Global Doors
hiroramos4
PRO
1
120
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
100
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
260
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
110
Delegating the chores of authenticating users to Keycloak
ahus1
0
120
Model Mondays S2E02: Model Context Protocol
nitya
0
220
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
270
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
110
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
210
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
340
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
100
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
How GitHub (no longer) Works
holman
314
140k
Thoughts on Productivity
jonyablonski
69
4.7k
Optimizing for Happiness
mojombo
379
70k
Making Projects Easy
brettharned
116
6.3k
Statistics for Hackers
jakevdp
799
220k
Code Review Best Practice
trishagee
68
18k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Embracing the Ebb and Flow
colly
86
4.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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 いかがでしたか?