[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"

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

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

このページをシェアする

関連タグ

関連記事

Boolean型の変数に適した命名規則

背景 / プレフィックス / どのような条件なのか分かりやすくする / 否定形を避ける / 同じ意味の単語を避ける / プロジェクトの命名規則やコーディング規約に従う / Linter で矯正する

[Next.js] Google Adsenseを表示させる方法

環境 / 条件 / 方法

[Next.js] Qiita と Zenn の 記事一覧(フィード)を取得する方法

やりたいこと / 環境 / フィードの仕様 / 実装

Deprecated になった jQuery API を静的に検出する方法

モチベーション / eslint-plugin-no-jquery を導入する / 実行する

[CSS] カスケードレイヤー(@layer)とITCSSの概念を組み合わせた設計を考える

カスケードレイヤーとは / ITCSS のレイヤー / ITCSS のレイヤーをカスケードレイヤーに落とし込む / 参考