「実践 AWS CDK」の ESLint 設定が動かなかったので修正してみた

2020年8月18日 16:30

　技術書典応援祭で発売されていた「実践 AWS CDK - TypeScript でインフラもアプリも！」という書籍があります。

　TypeScript を用いて AWS CDK を始めようと思っている人や少し触った程度の方にはぴったりな本となっています。まさに俺向け！

　第2章で CDK プロジェクトに ESLint と Prettier を導入しているのですが、書籍の通りにやって動かなかったので修正してみました。

「2.3.2 ESLint と Prettier」をやってみる

　まずはサンプルプロジェクトを作成します。

cdk init sample-app --language=typescript

　次に必要なライブラリ類を導入します。

npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

　そして ESLint 設定を記述していきます。

.eslintrc.js

module.exports = {
   extends: [
       'plugin:@typescript-eslint/recommended',
       'prettier/@typescript-eslint',
       'plugin:prettier/recommended',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
       ecmaVersion: 2019,
       project: './tsconfig.json',
       sourceType: 'module',
   },
   rules: {
       "@typescript-eslint/interface-name-prefix": [
           "error", {
               "prefixWithI": "always"
           }
       ],
       "@typescript-eslint/no-floating-promises": [
           "error"
       ],
       "@typescript-eslint/no-unused-vars": [
           "error", {
               "argsIgnorePattern": "^_"
           }
       ],
   }
};

　合わせて Prettier も導入します。今回の事象は ESLint で起こったものなので上だけで確認できるのですが、自分用メモも兼ねて進めていきます。

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

.prettierrc.js

module.exports = {
   singleQuote: true,
   tabWidth: 4,
   trailingComma: 'es5',
};

　package.json の scripts に追記

"lint": "eslint --ext .ts ."

　lint を実行します。

npm run lint

　いろいろエラーが出て失敗するのですが、1つクリティカルなエラーが出ているのを確認しました。

1:1  error  Definition for rule '@typescript-eslint/interface-name-prefix' was not found  @typescript-eslint/interface-name-prefix

　@typescript-eslint/interface-name-prefix は interface の命名規則を I から始めるようにするかしないかを強制するルールのようですが、typescript-eslint v3 からは @typescript-eslint/naming-convention に置換えるように案内されています。

修正する

　TypeScript 本体は付けないルールということもあってか、interface に I を付けるかどうか各所で議論されているようです。

　今回の事象もどっちでもいいというならルール自体をとるのも一つの手段です。ただプロジェクトとして付ける付けないを統一したいならば @typescript-eslint/naming-convention に置換えましょう。

　私自身は C# を齧っていたこともあるので I がついていても大丈夫派。今回は元の記述通り、付けないで統一するルールにします。

　.eslintrc.js を以下のように修正します。

module.exports = {
   extends: [
       'plugin:@typescript-eslint/recommended',
       'prettier/@typescript-eslint',
       'plugin:prettier/recommended',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
       ecmaVersion: 2019,
       project: './tsconfig.json',
       sourceType: 'module',
   },
   rules: {
       "@typescript-eslint/naming-convention": [
           "error",
           {
               "selector": "interface",
               "format": ["PascalCase"],
               "custom": {
                   "regex": "^I[A-Z]",
                   "match": false
               }
           }
       ],
       "@typescript-eslint/no-floating-promises": [
           "error"
       ],
       "@typescript-eslint/no-unused-vars": [
           "error", {
               "argsIgnorePattern": "^_"
           }
       ],
   }
};

　試しに ISample インタフェースを作ってみると、命名規則に沿っていないと怒られているのが分かります。

1:11  error  Interface name `ISample` must not match the RegExp: /^I[A-Z]/u  @typescript-eslint/naming-convention

　I を付けないように強制する書き方は公式ドキュメントに記載されています。match の部分を true に変えるだけですね。

まとめ

　変更点が分かるように GitHub に上げておきました。

　書籍「実践 AWS CDK - TypeScript でインフラもアプリも！」は AWS CDK 入門にいいぞ！

　@typescript-eslint/interface-name-prefix は削除されたので、@typescript-eslint/naming-convention に置換えが必要。

　複数人でやるならルール決め重要！　そして機械的にチェックしよう！

😉