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.2k
大量の 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
7.1k
あなたの知らない Function.prototype.toString() の世界
mizdra
PRO
4
5.5k
React Server Components の疑問を解き明かす
mizdra
PRO
21
13k
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
PRO
8
3k
Vue Language Server から生まれた Volar.js と、それが秘める可能性
mizdra
PRO
13
8.9k
マルチテナントで GraphQL を使う際の工夫
mizdra
PRO
0
2.6k
Webフロントエンドの秩序を維持する体制を作る
mizdra
PRO
9
26k
個人開発の裏側
mizdra
PRO
0
370
祝う2
mizdra
PRO
0
760
Other Decks in Technology
See All in Technology
Git in Team
kawaguti
PRO
3
370
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
6
1k
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
2
1.4k
20251010_HCCJP_AdaptiveCloudUpdates
sdosamut
0
110
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
630
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
290
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
450
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
300
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
2
620
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
700
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
120
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
8.8k
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Code Review Best Practice
trishagee
72
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
A Tale of Four Properties
chriscoyier
161
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Building Adaptive Systems
keathley
44
2.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
33
2.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Practical Orchestrator
shlominoach
190
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
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 いかがでしたか?