LoginSignup
0
0

eslint-plugin-strict-dependenciesを使ってみる

Last updated at Posted at 2024-05-25

概要

eslint-plugin-strict-dependencies

  • module,allowReferenceFromの設定を個別に指定することでpackage-privateは実現できます!
  • 以下を再調査します
    • ルールのallowSameModule,excludeTypeImportChecks
    • オプションのpathIndexMap

1. 背景 🖼️

TypeScirptではexport宣言した変数や関数は全てのファイルからimportできてしまいます。
しかし、モジュール内に処理をまとめすぎると肥大化してしまいます 😢

package-privateが実現できれば外部のディレクトリからimportを制限できたり、モジュール管理がしやすくなると思います。

この記事でeslint-plugin-strict-dependenciesについて触れてはいます。
使い込んでみたいと思い今回細かく調査します! 🕵️

ESLint,typescript-eslintの設定はこちらで紹介していますのでご覧ください!
Eslintとtypescript-eslintを手動で設定してみる

2. eslint-plugin-strict-dependenciesとは 🤔

カスタムモジュールの依存関係のルールを定義するためのESLintプラグインです。

3. eslint-plugin-strict-dependenciesの設定 🚧

install

npm install eslint-plugin-strict-dependencies --save-dev

設定ファイルの修正

  • strictDependenciesをimport
  • pluginとruleを追加
eslint.config.js
import typescriptEslintParser from "@typescript-eslint/parser";
import js from "@eslint/js";
import tseslint from 'typescript-eslint';
import strictDependencies from 'eslint-plugin-strict-dependencies';

export default [
    {languageOptions: {
        parser: typescriptEslintParser,
        parserOptions: {
          project: true,
          sourceType: "module",
        },
      }
    },
    js.configs.recommended,
    ...tseslint.configs.recommended,
    {
        plugins: {
          "strict-dependencies": strictDependencies,
        },
    },
   {
       rules: {
        "strict-dependencies/strict-dependencies": [
          "error",[
          {
              "module": "sub",// importされるmoduleのパス
              "allowReferenceFrom": ["sub"],// import可能なmoduleのパス
          },
          ]
        ]
       }
   }
];

4. エラーになるか試す 🚨

.
├── call.ts
├── eslint.config.js
├── node_modules
├── package-lock.json
├── package.json
├── sub
│   ├── call.ts
│   └── called.ts
└── tsconfig.json
call.ts
import { called } from "sub/called";

subディレクトリの外にある、call.tssub/called.tscalledをimportします。

image.png

エラーが表示されました! 🚨

5. その他ルール 👮

targetMembers

importを制限する対象を指定することが可能です。
指定しない場合は全てのexportされた宣言が対象になります。

eslint.config.js
rules: {
        "strict-dependencies/strict-dependencies": [
          "error",[{
            "module": "sub",// importされるmoduleのパス
            "allowReferenceFrom": ["sub"],// import可能なmoduleのパス
            "targetMembers":["cae"] // caeという宣言されたものを対象にする
          },]
        ]
       }

caeという宣言は存在しないので、subディレクトリ配下のモジュールの宣言は全てimport可能です。

image.png

call.tsからsub/calledcalledをimportできました。

allowSameModule

同じディレクトリにある他のファイルからインポートできるかを指定します。

eslint.config.js
rules: {
        "strict-dependencies/strict-dependencies": [
          "error",[{
            "module": "sub",// importされるmoduleのパス
            "allowReferenceFrom": ["sub"],// import可能なmoduleのパス
            "allowSameModule": false
          },]
        ]
       }

trueにしても同一ディレクトリ内でimportができてしまいましたのでまた調査します。。 😇

excludeTypeImportChecks

型のインポートには柔軟性を持たせたい場合に使うそうです。
import type { SampleType } from 'called'
import { SampleType } from 'called'
どちらの記述でも許可されます。

falseにしてもどちらの記述でも許可されてしまいましたのでまた調査します。。 😇

6. オプション ⚙️

resolveRelativeImport

importのパスで相対パスを解決するかどうかです。
defaultはfalseです。

eslint.config.js
rules: {
        "strict-dependencies/strict-dependencies": [
          "error",[{
            "excludeTypeImportChecks": true,
            "module": "sub",// importされるmoduleのパス
            "allowReferenceFrom": ["sub"],// import可能なmoduleのパス
          },
          {
          "resolveRelativeImport": false
          }
        ]
        ]
       }

相対パスで書くとlintの対象外になります(デフォルトでもです)。

image.png

image.png

pathIndexMap

eslint-plugin-strict-dependenciesでは、tsconfigで指定されたパスに基づいてパスエイリアスの解決が行われます。

デフォルトでは、インデックス番号0の値が使用されます、任意のインデックス番号の値を使用するオプションを指定することができます。

tsconfig.json
{
  "compilerOptions": {
      "paths": {
          "*": ["aaa/*", "bbb/*"]
      }
    },
}

pathIndexMap = { "*": 1 }にすると "bbb/*" が指定されるそうです。

pathIndexMap0,1どちらにしても許可されてしまいましたのでまた調査します。。 😇

最後に

  • 以下を再調査します
    • ルールのallowSameModule,excludeTypeImportChecks
    • オプションのpathIndexMap
  • module,allowReferenceFromの設定を個別に指定することでpackage-privateは実現できます!

他にも依存関係の管理に関する記事を書いています 💪

本記事を読んで頂き、ありがとうございました。
いいねいただけると記事執筆の励みになりますので、参考になったと思われた方は是非よろしくお願い致します🙏

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0