Slide 1

Slide 1 text

ESLintで命名規則のチェックをする @taiyama1212 1 / 11

Slide 2

Slide 2 text

自己紹介 山根大生(株式会社iimon) Qiitaで毎月10個記事を書き、休日を光の速さで過ごして います SNS X(taiyama1212) Qiita(yamatai12) 好きなこと 抹茶ラテ 、旅行 2 / 11

Slide 3

Slide 3 text

背景 命名規則をドキュメントで管理している ↓ ESLintに任せられないだろうか? 3 / 11

Slide 4

Slide 4 text

目次 typescript-eslintのnaming-conventionとは ルールの例 型エイリアス 変数,関数,引数で返り値、値がbooleanの時 課題1 メソッドで返り値がbooleanの時は適切なチェックがされなかった 課題2 関数型コンポーネント名をPascalCaseに指定できなかった まとめ 4 / 11

Slide 5

Slide 5 text

typescript-eslintのnaming-conventionとは 命名規則を強制することができます。 5 / 11

Slide 6

Slide 6 text

ルールの例 '@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

Slide 7

Slide 7 text

型エイリアス { selector: 'typeAlias', format: ['PascalCase'], suffix: ['Type'], }, 7 / 11

Slide 8

Slide 8 text

変数,関数,引数で返り値が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

Slide 9

Slide 9 text

課題1 メソッドで返り値がbooleanの時は適切なチェック がされなかった export type CustomPaginationPropsType = { total: number; pageSize: number; pageChangeHandling: (page: number) => Promise; }; 9 / 11

Slide 10

Slide 10 text

課題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

Slide 11

Slide 11 text

まとめ やや不完全ですが、社内で決めている命名規則をほとんどESLintで実現できるのではないで しょうか? これを導入すればRvで命名規則に指摘されることもなくなりますし、命名規則を覚えなくて も済むので便利だなと思いました ありがとうございました!! 11 / 11