[更新: 2024/05/19]
NuxtからNuxt ESLintがリリースされました。
以下で紹介するType import changes周りの対応が本ESLint設定で設定されています。
そのため、すぐに設定を追加したい方はNuxt ESLintを設定すると良いでしょう。
Nuxt ESLintのマイグレーション記事は以下の通りです。合わせてご覧ください。
Nuxt の v3.8.0 がリリースされました 🎉
今回も様々なアップデートが発表されましたが個人的に気になるアプデがありました。それは Type import changes です。
これは TypeScript 5.0 で導入されたverbatimModuleSyntaxに関連するアップデートです。@typescript-eslintで対応したことがあったので自身の備忘録として整理しておきます。
verbatimModuleSyntax について
TypeScript 5.0 で導入されたverbatimModuleSyntaxについてはteppeis氏が下記記事で解説されています。こちらを合わせて参照ください。
@typescript-eslintについてはこの記事の後半でも触れられています。私はこの記事で存在を知りました(ありがたい限りです 🙏)
Type import changes に対応する
本件の対応に際して以下 2STEP の対応を行う必要があるかと思います(コーディングルールによっては STEP2 のみで良いです)。
- 型情報を明示的に import する
-
import { type XXX }をimport type { XXX }に変更する
どちらの STEP も@typescript-eslintのルールを用いて解決します。
1. 型情報の import を明示的にする
Type import changes 対応を行うために、まず型情報を明示的に import しておく必要があります。例えば、以下のような環境です。
// OK => import { type Foo } from "Foo";
// OK => import type { Foo } from "Foo";
// NG ↓
import { Foo } from "Foo";
// OK => import type Bar from "Foo";
// NG ↓
import Bar from "Bar";
type T = Foo;
const x: Bar = 1;
本件の対応には@typescript-eslint/consistent-type-importsを利用します。
module.exports = {
// other settings
rules: {
"@typescript-eslint/consistent-type-imports": [
"error",
// 下記はデフォルト設定
{
prefer: "type-imports",
disallowTypeAnnotations: true,
fixStyle: "separate-type-imports",
}
]
},
};
これで明示的な type-imports を強制できました。separate-type-importsがデフォルトで設定されており、import type { Foo }が強制されます。
2. import { type XXX }をimport type { XXX }に変更する
コーディング規約がimport { type Foo }である場合は@typescript-eslint/no-import-type-side-effectsを利用することでimport type { Foo }へ移行することが可能です。
module.exports = {
// other settings
rules: {
"typescript-eslint/no-import-type-side-effects": "error"
},
};
それ以外の対応方法は？
@typescript-eslint 以外の対応検討としてeslint-plugin-importを利用する方法があります。
本プラグインを利用している環境では一考の余地があるかと思います。
おわりに
今回は Nuxt3.8 のアプデで気になった Type import changes について ESLint で対応していきました。
ESLint 関連では ESLint Flat Config への対応もホットな話題かと思います。
eslint-plugin-vue、@nuxt/eslint-configの動向も合わせて追っていきたいですね 👀
Discussion