hyme

[ESLint] eslint-plugin-import で、特定のフォルダをまたいだimportを防ぐ

ESLint のプラグインのひとつに、 import / export 周辺の記法について設定することができる、 eslint-plugin-import というものがあります。 このプラグインで設定できるルールのひとつに、 no-restricted-paths という項目があります。

これは、例えば Atomic Design のような atoms / molecules / organisms がというコンポーネントレイヤーが存在し、フォルダも同様に分けられているときに、「atomsではmoleculesのフォルダに入っているファイルをimportできない」というルールを設定することができます。

以下のようなディレクトリを考えます。

components/
  atoms/
  molecules/
  organisms/
.eslintrc.cjs
package.json
package-lock.json

まずは npm i -D eslint-plugin-import でインストールします。

.eslintrc.cjs に次のような設定項目を追加します。

module.exports = { plugins: ['import'], // 追加 rules: { // 追加 'import/no-restricted-paths': [ 'error', { zones: [ { from: './components/atoms', target: './components/molecules', message: 'Cannot import molecule components from atom components.', }, ], }, ], }, }

この状態でプロジェクト内の ESLint を実行した場合に、実際に import している箇所でエラーが出るようになっていたらOKです。