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
2.7k
大量の 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
React Server Components の疑問を解き明かす
mizdra
PRO
19
6.2k
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
PRO
7
2k
Vue Language Server から生まれた Volar.js と、それが秘める可能性
mizdra
PRO
13
7.2k
マルチテナントで GraphQL を使う際の工夫
mizdra
PRO
0
2.2k
Webフロントエンドの秩序を維持する体制を作る
mizdra
PRO
9
25k
個人開発の裏側
mizdra
PRO
0
250
祝う2
mizdra
PRO
0
660
Other Decks in Technology
See All in Technology
TypeScript x Raycast x AIで変える開発者体験
nagauta
1
220
tenntennはなんでnewmoにnew社したの? - YAPC::Hakodate 2024
tenntenn
PRO
0
190
Hazard pointers with reference counter
ennael
PRO
0
120
ガバメントクラウド開発と変化と成長する組織 / Organizational change and growth in developing a government cloud
kazeburo
4
730
入門 バックアップ
ryuichi1208
18
6.6k
I tried the newly introduced certification "Applied Skills" on Microsoft Learn
mappie_kochi
0
140
スモールスタート、不都合な真実 〜 耳当たりの良い言葉に現場が振り回されないために/20240930-ssmjp-small-start
opelab
13
1.8k
【shownet.conf_】コンピューティング資源を統合した分散コンテナ基盤の進化
shownet
PRO
0
390
kube-vipとkube-proxy置き換えCiliumを積んだ究極のK3sクラスタを建てる
logica0419
4
210
【shownet.conf_】ネットワークテストの最適化と利便性の追求
shownet
PRO
0
320
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
2
220
【shownet.conf_】ローカル5Gを活用したウォーキングツアーの体感向上
shownet
PRO
0
330
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
327
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
25
660
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4k
Typedesign – Prime Four
hannesfritz
39
2.3k
Building an army of robots
kneath
302
42k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
How GitHub (no longer) Works
holman
311
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
It's Worth the Effort
3n
183
27k
Build The Right Thing And Hit Your Dates
maggiecrowley
31
2.3k
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 いかがでしたか?