eslintのプラグインを作成した話

eslintのプラグインを作成した話

Transcript

1. Eslintのプラグインを 作成した話 平崎 葵(ひらさき まもる) 2022/02/08 Saitama.js vol.2発表資料 https://saitamajs.connpass.com/event/233089/
2. ⾃⼰紹介 平崎葵(ひらさきまもる) クーガー株式会社 所属 https://couger.co.jp u フロントエンド、サーバサイドエンジニア u バーチャルヒューマンエージェントの開発 趣味: ドラム、作曲
3. 発表内容 Eslintのプラグインを作成して、npmパッケージとして公開した話 u どういうものを作ったのか u なぜ作ったのか u どう使うのか u どう作ったのか
4. どういうものを作ったのか コーディングルールをeslintでチェック ▪npmパッケージ https://www.npmjs.com/package/@hirasaki/eslint-plugin-coding-rules ▪github https://github.com/hirasaki1985/eslint-plugin-coding-rules
5. なぜ作ったのか コードレビューを⾃動化したい ▪⼀例で、フロント側の設計例 • ServiceやRepository, WebAPIを直接componentから呼び出されたくない • Organisms〜Atomのコンポーネントでreduxを直接使われたくない
6. どう使うのか u https://github.com/hirasaki1985/eslint-plugin-coding-rules#rule-details Pathの書き⽅はmicromatchを選択。 https://github.com/micromatch/micromatch
7. どう作ったのか u Typescriptで実装。 u テストはjestを使⽤。 u Buildはtsupを使⽤。 ▪Eslintのプラグインの構成について • metaとcreateから構成されている。 • meta: ルールのメタ情報 • Create: ルールを実装したオブジェクトを返す。 ▪参考 https://eslint.org/docs/developer-guide/working-with-rules
8. 参考 u https://speakerdeck.com/texmeijin/eslintfalsedu-zi-ruruzuo-cheng- nitiyarenzisitahua u https://techblog.yahoo.co.jp/javascript/how-to-create-eslint-rules/ u https://azu.github.io/JavaScript-Plugin-Architecture/ja/ESLint/ 公式 u https://eslint.org/docs/developer-guide/architecture
9. エンジニア募集中 https://couger.co.jp/news/career/ カジュアル⾯談実施中︕ u フロントエンドエンジニア u DevOpsエンジニア u AI/機械学習エンジニア u サーバアプリケーションエンジニア