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

2 min read

背景

  • @/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-importimport/no-useless-path-segmentsというルールを利用すると良さそうだった。

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

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

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

このページをシェアする

Related Articles

`<input type="range">`のstepを可変にする方法

仕様 / 完成デモ / 実装 / 参考

[Vite] CSSだけをビルドする方法

背景 / Vite をインストール / 仕様

CSS in JSとは何か

想定読者 / そもそも JS フレームワーク(React、Vue.js)を採用する理由とは何か / 「命令的 UI」 と 「宣言的 UI」 / 「命令的 UI」 VS 「宣言的 UI」 / CSS in JS とは / CSS in JS ライブラリ / Emotion の使い方 / 利用するメリット / 利用するデメリット / 関連 / Footnotes