ESLintで命名規則のチェックをする（LT版）/eslint-naming-convention

本スライドの原案は以下です！
https://qiita.com/yamatai12/items/8d229f318a1a57b7af5e

naming-conventionを導入すればRvで命名規則に指摘されることもなくなりますし、命名規則を覚えなくても済むので便利だなと思いました

Transcript

1. ESLintで命名規則のチェックをする @taiyama1212 1 / 11
2. 自己紹介 山根大生（株式会社iimon） Qiitaで毎月10個記事を書き、休日を光の速さで過ごして います SNS X(taiyama1212) Qiita(yamatai12) 好きなこと 抹茶ラテ 、旅行 2 / 11
3. 背景 命名規則をドキュメントで管理している ↓ ESLintに任せられないだろうか？ 3 / 11
4. 目次 typescript-eslintのnaming-conventionとは ルールの例 型エイリアス 変数,関数,引数で返り値、値がbooleanの時 課題1 メソッドで返り値がbooleanの時は適切なチェックがされなかった 課題2 関数型コンポーネント名をPascalCaseに指定できなかった まとめ 4 / 11
5. typescript-eslintのnaming-conventionとは 命名規則を強制することができます。 5 / 11
6. ルールの例 '@typescript-eslint/naming-convention': [ 'error', // ①型エイリアスは接尾辞にType をつける { selector: 'typeAlias', format: ['PascalCase'], suffix: ['Type'], }, // TODO メソッドでもboolean を返す場合のルールを追加する // ②変数, 関数, 引数で返り値がboolean { selector: ['variable', 'function', 'parameter'], types: ['boolean'], format: ['PascalCase'],// prefix を除いたcase です　例）isDev → prefix でis が取られ、Dev が残る prefix: ['is', 'should', 'has', 'need'], //disabled とrequired は例外的にprefix を必要としない filter: { regex: 'disabled|required', match: false, }, }, // ③変数、関数、引数、メソッド, 引数 { selector: ['variable', 'function', 'parameter', 'method'], format: ['camelCase'], }, // ④プロパティ { selector: ['property'], format: ['camelCase', 'snake_case'], }, // ⑤定数 { selector: 'variable', format: ['camelCase', 'UPPER_CASE'], modifiers: ['const'], }, // ついでに追加しました { selector: 'class', format: ['PascalCase'], }, ] 6 / 11
7. 型エイリアス { selector: 'typeAlias', format: ['PascalCase'], suffix: ['Type'], }, 7 / 11
8. 変数,関数,引数で返り値がbooleanの時 { selector: ['variable', 'function', 'parameter'], types: ['boolean'], format: ['PascalCase'],// prefix を除いたcase です　例）isDev → prefix でis が取られ、Dev が残る prefix: ['is', 'should', 'has', 'need'], //disabled とrequired は例外的にprefix を必要としない filter: { regex: 'disabled|required', match: false, }, }, 8 / 11
9. 課題1 メソッドで返り値がbooleanの時は適切なチェック がされなかった export type CustomPaginationPropsType = { total: number; pageSize: number; pageChangeHandling: (page: number) => Promise<void>; }; 9 / 11
10. 課題2 関数型コンポーネント名をPascalCaseに指定でき なかった '@typescript-eslint/naming-convention': [ 'error', { selector: ['variable'], format: ['camelCase'], }, ~~~ ] eslint-plugin-reactのjsx-pascal-caseも適用すると以下の矛盾が起こる naming-convention→ コンポーネント名はcamelCase eslint-plugin-react/jsx-pascal-case→ コンポーネント名はPascalCase 10 / 11
11. まとめ やや不完全ですが、社内で決めている命名規則をほとんどESLintで実現できるのではないで しょうか？ これを導入すればRvで命名規則に指摘されることもなくなりますし、命名規則を覚えなくて も済むので便利だなと思いました ありがとうございました！！ 11 / 11