ESLintで任意のディレクトリ配下は、特定のパスからのインポートを禁止するメモ📝

コンテナ・プレゼンテーションパターンを採用している等、

zenn.dev

特定のパスに集約したロジックはimportを禁止にし静的解析レベルで担保したいケースでESLintのno-restricted-importsを使うと実現できそうだったのでメモ📝

eslint.org

結論

「no-restricted-importsのpatternオプションとfile/ignoresを使っていい感じに設定できる」

例えばVue.jsを使っていてコンテナ・プレゼンテーションパターンを採用し、containersのみにservices配下に切り出しているロジックを利用させたい場合には以下のような感じで設定すると、いい感じに制限できそうだった📝

  // NOTE: 副作用を持つ処理はPageコンポーネントのみで行う
  {
    files: ["*.vue", "**/*.vue"],
    ignores: ["**/container/**/*.vue"],
    rules: {
      "no-restricted-imports": ["error", { patterns: ["**/services/**/*"] }],
    },
  },

補足

no-restricted-importsは「Disallow specified modules when loaded by import」とあるように特定のimportを禁止する機能です。

通常では以下のような感じで特定のmoduleの利用を禁止したりできます。

/*eslint no-restricted-imports: ["error", "fs"]*/

import fs from 'fs';

no-restricted-impors にはpatternsオプションがあり、.gitignore or 正規表現のパターンでimportを禁止するパスを設定することができます。

patterns This is also an object option whose value is an array. This option allows you to specify multiple modules to restrict using gitignore-style patterns or regular expressions. https://eslint.org/docs/latest/rules/no-restricted-imports#patterns

これを使ってfiles: ["*.vue", "**/*.vue"]をのように指定してデフォルトではimport禁止にしておいて、ignores: ["**/container/**/*.vue"],のような感じで特定のパスのみ許可するようなことが出来る。