「このパスでこのファイルのインポートをさせたくない、、、」をESLintでルール化する

5902 ワード

TypeScript ESLint solid原則 tech テキストリンク

Webエンジニアのhikaeです。
皆さんは「SOLID原則」についてどの程度知っているでしょうか？

ソフトウェア開発においてメンテナンスしやすいコードを書くことは、とても重要な要素です。
今回はD（Dependency inversion principle）「依存性逆転の原則」にあたる内容で、
対象のパスで対象のファイルをインポートするのを禁止する仕組みを整えてみました。

日本語の記事が見当たらなかったので、始めてみたい人はこの記事を参考にプロジェクトに導入してみてはいかかでしょうか？

今回の実装PRは以下に含まれています。

インストール

依存性逆転の原則に関しては以下の記事を参考にしてください。ここではルールの設定方法について説明します。

使用するライブラリはeslint-plugin-importです。メンテナの方、ありがとうございます。

npm install --save-dev eslint eslint-plugin-import
npm install --save-dev eslint-import-resolver-typescript # TypeScriptのimport構文を対応させるためのもの

.eslintrcはこちら

module.exports = {
  extends: [
    "plugin:import/recommended",
    "plugin:import/typescript",
  ],
  // TypeScriptの場合は以下も追加
  settings: {
    "import/resolver": {
      typescript: {},
    },
  },
}

`import/no-restricted-paths`の設定

importプラグインにあるimport/no-restricted-pathsでインポートできるパスを制限します。

"import/no-restricted-paths": [
    "warn", // "error"
    {
        zones: [
            {
                from: "node_modules/vue", // 対象の依存パス
                target: "./src/(usecases|entities|adapter)", // 禁止するパス（正規表現可）
                message: // エラーメッセージ
                    "フレームワーク非依存な層です。hooks層での実装を検討してください。",
            },
            {
                from: "./src/api/@types",
                target: "./src/!(entities)/**/*", // ./src/entities以外のパスでは禁止する
                message: "APIの型定義はアプリケーション内でそのまま利用することはできません。",
            },
        ],
    },
],