設定ファイルをパッケージ化して幸せになる話

設定ファイルを パッケージ化して 幸せになる話 5 2 4 0 4 2 0 2 sushi-chan(Kentaro Suzuki) @ . .

sushi-chan / 鈴 電気通信 謙太郎 学B フロントエンドとか 学サークルの情報基盤作り 最近はCloudflare WorkersとHono :fire: 木 大 3 大 学外での登壇は初めてです 己 自 大 紹介

本編

おしながき • Linterやツールの設定がつらい • パッケージ化した 見 • 副次的効果 / 知

おしながき • Linterやツールの設定がつらい • パッケージ化した 見 • 副次的効果 / 知

Linter使ってますか？

• 間より賢い • 同じ間違いには忘れず毎回同じ指摘をしてくれる • 初学者でも 比 人 Linterやツールの嬉しいところ 較的安全なコードが書ける

• 間より賢い • 同じ間違いには忘れず毎回同じ指摘をしてくれる • 初学者でも 比 人 Linterやツールの嬉しいところ 較的安全なコードが書ける

Linterのつらいところ

Linterやツールの設定

Linterやツールの設定 多すぎ！！！！！！！

Linterやツールの設定がつらい 無限に増殖する恐怖の設定ファイル • あまりにも多すぎる設定項 • 毎回違うリポジトリからコピペしてきていた tsconfig.json … 目 •

おしながき • Linterやツールの設定がつらい • パッケージ化した 見 • 副次的効果 / 知

パッケージ化した • 違うリポジトリからのコピペを不要にするには？

パッケージ化した • 違うリポジトリからのコピペを不要にするには？ パッケージで配布すればいいのでは...？💡

ということで作りました

パッケージ化した @virtual-live-lab/js-config • pnpm workspaceでモノレポ • ESLint, Prettier, Stylelint, tsconfig

Before & After: ESLint before: after: npm install -D eslint eslint- npm install -D eslint config-hogehoge …以下10個以上のeslint系パッ ケージ @virtual-live-lab/eslint-config

Before & After: ESLint before: after: npm install -D eslint eslint- npm install -D eslint config-hogehoge …以下10個以上のeslint系パッ ケージ @virtual-live-lab/eslint-config すごく楽

Before & After: tsconfig.json

Before & After: tsconfig.json すごく楽

おしながき • Linterやツールの設定がつらい • パッケージ化した 見 • 副次的効果 / 知

• monorepoの知 • ができた 動リリースの便利さを知った 見 • 初めてnpmにパッケージを公開した 見 自 副次的効果 / 知

• monorepoの知 • ができた 動リリースの便利さを知った 見 • 初めてnpmにパッケージを公開した 見 自 副次的効果 / 知

monorepoの知 ができた • monorepo特有のbuildやdependencies事情 見 な場合に採 用 用 • 有 する決断がしやすくなった

• monorepoの知 • ができた 動リリースの便利さを知った 見 • 初めてnpmにパッケージを公開した 見 自 副次的効果 / 知

自 自 動リリースの便利さを知った • 分でタグつけたりパッケージレジストリに 公開したりするのはすごく苦しい • Pull Requestベースで簡単に管理

• monorepoの知 • ができた 動リリースの便利さを知った 見 • 初めてnpmにパッケージを公開した 見 自 副次的効果 / 知

初めてnpmにパッケージを公開した • 意外とパッケージ公開って 理ハードルがある • Linter Ruleなどは、あまりバンドルなどの 心 苦しい分野が出てこないので初めてにいいかも

まとめ

自 まとめ • Linter設定のパッケージ化は幸せ • パッケージ公開を経験するのに最適な難易度 • 分が好きな設定ファイルを配布しよう！

ありがとうございました！