tsconfig.jsonのpaths設定でimport文にエイリアスを使えるようにしたものの、
などで微妙な気持ちになってきたことはありませんか。
一度導入すると利用箇所が結構多くなってきて手動で戻すには大変すぎるし、まあ動いてるからいいか…みたいな。
そんな時のために自動で相対パスに戻せるeslintプラグインを作ってみました。
@mkizka/eslint-plugin-relative-import を入れてeslint --fixするだけ。
設定は↓のような感じです。
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でeslintプラグインを作ってみた知見も置いておきます。
今回プラグインを作るにあたってeslintrcとCommonJSにも対応させてみたのですが、CommonJSへの変換で少し困ることがありました。
公式ドキュメントの解説を読むとプラグインは以下のようなオブジェクトをdefault exportする必要があるようです。
export default {
meta: {},
configs: {},
rules: {},
};
ただしビルド設定(例えば今回使用した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では以下のようにしています。
eslintというよりESM/CJSの一般的な問題ですね。他にも良いやり方がある気はするんですが、こういうパターンもあったということを書いておきます。
Be the first to comment
