ESLintのローカルルールで独自のコーディング規約を実装する

Lightning TechTalks #2 〜フロントエンドで導入してよかったOSS〜 で発表させていただいたスライドです

フラットコンフィグへの移行は最近新卒の方に一部やっていただきました 新卒エンジニアがESLintのFlat Config移行と格闘した話 - ドワンゴ教育サービス開発者ブログ

ドワンゴ教育事業採用サイト

Transcript

1. ESLintのローカルルールで 独自のコーディング規約を 実装する berlysia / Lightning TechTalks #2
2. 誰 - berlysia （べるりしあ、と読む） - Web、特にブラウザの周りに関心 - 株式会社ドワンゴ所属 教育事業のWebフロント担当 - Webフロントをやる人 - Webフロントのためにいろいろやる人
3. ドワンゴの教育事業 (仮称) (設置認可申請中 )
4. disclaimer • ESLintでローカルルールを実装する方法について話します • 具体的なルール・プラグインの作り方の話はしません
5. コーディング規約 ありますか
6. コーディング規約 どうしてますか
7. コーディング規約の対象 • コードフォーマット • 命名のお作法 • コメント、（コード内）ドキュメンテーションのお作法 • エラー処理のお作法 • モジュール、コンポーネントの分割のお作法 • 依存関係のお作法 • ディレクトリ構造のお作法 • テストのお作法 • ↑↑今日の話題はここまで↑↑ • コミットメッセージのお作法 • プルリクエストのお作法 • etc…
8. コーディング規約の実現のカタ 整理 伝達 検証 修正 • 文書としてまとめる • スタイルガイドにまとめる • 研修やワークショップ • ペアプログラミング、コードレビュー • コードレビューで指摘する • Linterによる自動検知 • 手で直す • Linter、Formatterによる自動修正
9. コーディング規約の実現のカタ 整理 伝達 検証 修正 • 文書としてまとめる • スタイルガイドにまとめる • 研修やワークショップ • ペアプログラミング、コードレビュー • コードレビューで指摘する • Linterによる自動検知 • 手で直す • Linter、Formatterによる自動修正 コスト高いが 背景を残したり 高次な話までできる
10. コーディング規約の実現のカタ 整理 伝達 検証 修正 • 文書としてまとめる • スタイルガイドにまとめる • 研修やワークショップ • ペアプログラミング、コードレビュー • コードレビューで指摘する • Linterによる自動検知 • 手で直す • Linter、Formatterによる自動修正 検出と修正は できるだけ 自動でやりたい 何なら文書を 読みたくない
11. 使っていますか https://eslint.org/
12. ESLint alternatives - Deno Linter - https://docs.deno.com/runtime/manual/tools/linter - Nodeのプロジェクトでも普通に使える。 Rust製 - Biome Linter - https://biomejs.dev/linter/ - 元Rome。Rust製 - oxlint - https://github.com/web-infra-dev/oxc#-linter - Rust製
13. よくありそう[要出典]な会話 「あ、これはこっちの書き方をするやつですよね」 「これってESLintのルールないですかね」 1. 「しらないですね」 ◦ はい 2. 「このプラグインにありますね」 ◦ 歩くESLintプラグインカタログや検索巧者がいるとこうなりがち 3. 「このコアルールを使うと表現できますね」 ◦ no-restricted-syntaxを使うと任意の構文を検知できる ▪ コードからASTが透けて見えない人は AST explorerを使うとよい ▪ 構文以外の情報が必要な場合はむずかしい
14. よくありそう[要出典]な会話、修正編 「あ、これはこっちの書き方をするやつですよね」 「これってESLintのルールないですかね」 「このルールで検知できそうですね」 「いちいち直すのもあれですし、自動修正できないもんですかね？」 「このルールになければないですね……」 自動修正までしたいと思うと、ピッタリの道具がないことがある
15. ルールがなければ、作りたい - ESLint: ある - （皆さんご存じ）プラグインの仕組みがある https://eslint.org/docs/latest/extend/plugins - Deno Linter: ない - Issueはある https://github.com/denoland/deno_lint/issues/175 - PoC実装されていたようだが消えたようだ https://github.com/denoland/deno_lint/pull/1045 - Biome Linter: ない、予定もない - Discussionは立っているが、調査から必要だね、という状況 - oxlint: ないが、予定はある - trustfallというGraphQLサブセット言語で書くプラグインシステムを計画中 - https://github.com/web-infra-dev/oxc#linter-plugin 実は独自のルールを作れるのは現状ESLintしかない
16. プラグイン／ルールを作るのは別に難しくない
17. が、ルールは元々こうやって参照する ESLintが内部的に require(“eslint-plugin-import”) みたいなことをする ESLint pluginが node_modules 配下にあることを期待している プラグインはパッケージとして参照できなければいけない…… eslint-plugin-import の no-deprecated というルール
18. ローカルのルールを読む仕組みがかつてあった、が
19. プラグインとしてpublishしないためのアプローチ rulesdirがやっていたようなことをやるESLint pluginが作られた - https://github.com/cletusw/eslint-plugin-local-rules - eslint-local-rules.js / eslint-local-rules/index.js をルールの一覧として受け取る - https://github.com/not-an-aardvark/eslint-plugin-rulesdir - ルールが配置されているディレクトリを文字列で与える - https://github.com/taskworld/eslint-plugin-local - .eslintplugin.js / .eslintplugin/index.js をプラグインとして受け取る プロジェクト固有のルールが欲しければ、こういった道具を使うか、 観念してpluginとしてpublishする必要があった――だが今は違う！
20. 新しいFlat Configの世界では――
21. Flat Configの世界ではプラグインを利用者が解決する node_modules配下 プラグイン プロジェクト内 ローカル プラグイン JSのオブジェクトとして 設定に与える どちらでも透過的に ルールを設定できる！
22. Flat Configの世界ではプラグインを利用者が解決する node_modules配下 プラグイン プロジェクト内 ローカル プラグイン JSのオブジェクトとして 設定に与える どちらでも透過的に ルールを設定できる！ ローカルルール 誰でも簡単 書き放題 書こう！ 追記：ご参考にどうぞ 新卒エンジニアがESLintのFlat Config移行と格闘した話 - ドワンゴ教育サービス開発者ブログ
23. おまけ：我々のコーディング規約の考え方 大きいことは文書化、細かいことはLinter/Formatterに任せて自動化 • 文書化して周知やストック ◦ 全体の思想みたいな文書 ◦ 大きいレベルのリファクタリング方針 • Linterで検知だけ ◦ モジュールの参照方向違反など自動修正しにくいもの ◦ 実装パターン移行中で新規に増えてほしくないもの • Linterで検知して自動修正 ◦ 良い感じに揃ってることに嬉しさがあるもの • 「気にしない」と決める ◦ 好みの問題のやつ ドワンゴ教育事業各ポジション募集中！ Webフロント一緒にやりませんか！