Nuxt3.8のType import changesは@typescript-eslintで解決すればよさそう

Nuxt の v3.8.0 がリリースされました 🎉
今回も様々なアップデートが発表されましたが個人的に気になるアプデがありました。それは Type import changes です。

https://github.com/nuxt/nuxt/releases/tag/v3.8.0

これは TypeScript 5.0 で導入されたverbatimModuleSyntaxに関連するアップデートです。@typescript-eslintで対応したことがあったので自身の備忘録として整理しておきます。

本記事では ESLint Flat Config の実装を行なっていません。
そのため、ESLint Flat Config で利用される場合は適宜置き換えてください。

verbatimModuleSyntax について

TypeScript 5.0 で導入されたverbatimModuleSyntaxについてはteppeis氏が下記記事で解説されています。こちらを合わせて参照ください。

https://zenn.dev/teppeis/articles/2023-04-typescript-5_0-verbatim-module-syntax

@typescript-eslintについてはこの記事の後半でも触れられています。私はこの記事で存在を知りました(ありがたい限りです 🙏)

Type import changes に対応する

本件の対応に際して以下 2STEP の対応を行う必要があるかと思います(コーディングルールによっては STEP2 のみで良いです)。

1. 型情報を明示的に import する
2. 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を利用します。

.eslintrc.js

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 }へ移行することが可能です。

.eslintrc.js

module.exports = {
  // other settings
  rules: {
    "typescript-eslint/no-import-type-side-effects": "error"
  },
};

それ以外の対応方法は？

@typescript-eslint 以外の対応検討としてeslint-plugin-importを利用する方法があります。

本プラグインを利用している環境では一考の余地があるかと思います。

https://github.com/import-js/eslint-plugin-import/blob/6d34c88a91a9cb7556700b7cb83c8a27731ff302/docs/rules/consistent-type-specifier-style.md

おわりに

今回は Nuxt3.8 のアプデで気になった Type import changes について ESLint で対応していきました。

ESLint 関連では ESLint Flat Config への対応もホットな話題かと思います。
eslint-plugin-vue、@nuxt/eslint-configの動向も合わせて追っていきたいですね 👀