インモビインモビ

tsconfig.jsonのpaths設定でimport文にエイリアスを使えるようにしたものの、

• tscでトランスパイルするとエイリアス形式のパスは変換されない
• パスの変換のためにtsconfig-pathsなどの追加ライブラリが必要で、ビルドコマンドが冗長になる
• jestなどはpathsを反映するために追加設定が必要

などで微妙な気持ちになってきたことはありませんか。

一度導入すると利用箇所が結構多くなってきて手動で戻すには大変すぎるし、まあ動いてるからいいか…みたいな。

そんな時のために自動で相対パスに戻せるeslintプラグインを作ってみました。

やめ方

@mkizka/eslint-plugin-relative-import を入れてeslint --fixするだけ。

https://www.npmjs.com/package/@mkizka/eslint-plugin-relative-import

設定は↓のような感じです。

import { relativeImport } from "@mkizka/eslint-plugin-relative-import";

export default [relativeImport({ alias: { "~": "./app" } })];

.eslintrcにも対応しています。

{
  "plugins": ["@mkizka/relative-import"],
  "rules": {
    "@mkizka/relative-import/no-path-alias": [
      "error",
      { "alias": { "~": "./app" } }
    ]
  }
}

eslint --fixを実行すると以下のように変換されます。

-import { prisma } from "~/server/service/prisma";
-import { createLogger } from "~/utils/logger";
-import { tryCatch } from "~/utils/tryCatch";
+import { prisma } from "../prisma";
+import { createLogger } from "../../../utils/logger";
+import { tryCatch } from "../../../utils/tryCatch";

変換した後は型チェックやテストなどで元の動作が変わっていないことを十分に確認してください。

TypeScriptかつESMで困ったところ

作ってみた、だけで終わりそうなのでTypeScriptかつESMでeslintプラグインを作ってみた知見も置いておきます。

今回プラグインを作るにあたってeslintrcとCommonJSにも対応させてみたのですが、CommonJSへの変換で少し困ることがありました。

公式ドキュメントの解説を読むとプラグインは以下のようなオブジェクトをdefault exportする必要があるようです。

export default {
  meta: {},
  configs: {},
  rules: {},
};

https://eslint.org/docs/latest/extend/plugins

ただしビルド設定(例えば今回使用したtsup)によっては、CJSのビルド結果が以下のようになります。

var index_exports = {};
__export(index_exports, {
  default: () => index_default,
});
module.exports = __toCommonJS(index_exports);

これはmodule.exports = { default: { ... } }でありdefaultが余計なためか、この状態だとeslintrcでは読み込むことが出来ませんでした。

そこで以下のように書くと動作しました。

export const rules = { ... }

これをビルドすると以下のようになっています。

var index_exports = {};
__export(index_exports, {
  rules: () => rules,
});
module.exports = __toCommonJS(index_exports);

これによってFlat Config向けの設定のnamed exportと、eslintrc向けのrulesフィールドを1ファイルで両立することが出来ました。relative-importでは以下のようにしています。

https://github.com/mkizka/eslint-plugin-relative-import/blob/445c4223313d69afa24447d324af5d7c11f3e619/src/index.ts#L4-L20

eslintというよりESM/CJSの一般的な問題ですね。他にも良いやり方がある気はするんですが、こういうパターンもあったということを書いておきます。