[ESLint] 特定のimportにおいてパスの末尾スラッシュを禁止する方法

背景

• @/ui/system みたいなパスがある
• Storybook 上で参照する際に@/ui/system/の様に末尾にスラッシュが付いている場合にエラーが発生
  • system/index.ts があるため、こういった指定が有効
  • エラーになるのは、importMap の設定によるもの

やりたいこと

以下のように末尾にスラッシュが付いているものは禁止。

import { system } from "@/ui/system/";

以下のように末尾にスラッシュがないものは許可。

import { system } from "@/ui/system";

@typescript-eslint/no-restricted-imports を利用した

変更する Eslint の設定ファイル（.eslintrc.js）は以下の通り。

module.exports = {
  rules: {
    "@typescript-eslint/no-restricted-imports": [
      "error",
      {
        paths: [
          {
            name: "@/ui/system/",
            message:
              "`@/ui/system`のように末尾にスラッシュを付けないでください。",
            allowTypeImports: true,
          },
        ],
      },
    ],
  },
};

この設定で良さそうだった。

余談（末尾のスラッシュ自体を禁止にする）

eslint-plugin-importにimport/no-useless-path-segmentsというルールを利用すると良さそうだった。

import "./pages/"; // should be "./pages"

これを利用すれば上記のような末尾スラッシュはエラーとしてしてくれる。

ただ、これだけだとエイリアスには対応していないため、別途設定が必要そう。