ESLint×Prettierでtype importを自動で追加する

実施内容

ESLintとPrettierを組み合わせてTypeScriptのimport文にtypeキーワードを自動で追加する方法をやってみました。
この設定は、型のみをインポートする場合とその他のインポートを区別するのに有効です。

準備

この設定を行う前に、以下のツールがインストールされていることを確認してください。

• Node.js（推奨バージョン16以上）
• Next.js（13.5）
• ESLint（最新バージョン）
• Prettier（最新バージョン）
• TypeScript(推奨バージョン4.9以上)

実装手順

ESLintの設定

@typescript-eslint/eslint-pluginと@typescript-eslint/parse パッケージをプロジェクトにインストールします。

npm install @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest --save-dev

次に、.eslintrc.json(js) ファイル（またはプロジェクトに合ったESLint設定ファイル）を開き、次の設定を追加します。

{
  "extends": [
    "next",
    "next/core-web-vitals",
    "prettier",
    "plugin:@typescript-eslint/recommended" // こいつがないと動かないです
  ],

  "rules": {
    "import/first": "error",
    "import/newline-after-import": "error",
    "unused-imports/no-unused-imports": "error",
    "@typescript-eslint/consistent-type-imports": "warn", // ここで型インポートの場合でtypeが入っていない場合warnningに設定
    "@typescript-eslint/no-explicit-any": "off",

    //...(略)
}

このルールは、型のみのインポートに自動で type を追加するようESLintに指示します。

エディタの設定

VSCodeなどのエディタにESLintプラグインがインストールされている場合、ファイル保存時に自動的にESLintの修正を適用するように設定します。

VSCodeの settings.json に以下を追加します。

// ファイル保存時、ESLint による自動フォーマット
  "editor.codeActionsOnSave": {
    // 不足しているimportの追加
    "source.addMissingImports": true,
    "source.fixAll": true
  },

これで、ファイルを保存するたびにESLintのルールに従ってコードが自動修正されます。

結果

上記の設定を行うことで、プロジェクト内のTypeScriptファイルにおいて、型のみのインポートに自動的に type キーワードが付与されるようになりました。

参考

ESLint - @typescript-eslint/consistent-type-imports