ESLintでdefault exportをエラーにする


やりたいこと

以下のようにdefault exportしている場合はESLintでエラーとしたい。

const num = 100;
export default num;


default exportとnamed exportどちらを使うべきか?みたいな話は今回書いてませんのでご了承ください。

前提

TypeScriptを使用しているプロジェクトでESLintとPrettierが導入済みの状態です。自分の場合は以下の状態からdefault exportをエラーにする設定を追加しました。

{
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.54.1",
    "eslint": "^8.36.0",
    "eslint-config-prettier": "^8.7.0",
    "prettier": "2.8.3",
    "typescript": "^4.9.4"
  }
}
{
  "root": true,
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      "error",
      { "argsIgnorePattern": "^_" }
    ]
  }
}


手順

eslint-plugin-importをインストール

ESLintのみがインストールされている状態ではdefault exportをエラーにできないので、パッケージを追加でインストールする必要があります。インストールするパッケージは「eslint-plugin-import」です。

www.npmjs.com


コマンドを実行しパッケージをインストールします。

npm install eslint-plugin-import --save-dev
{
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.54.1",
    "eslint": "^8.36.0",
    "eslint-config-prettier": "^8.7.0",
    "eslint-plugin-import": "^2.27.5",
    "prettier": "2.8.3",
    "typescript": "^4.9.4"
  }
}


.eslintrcを編集

"extends"に以下のプラグインを追加します。

  • "plugin:import/recommended"
  • "plugin:import/typescript"

"rules"に以下のルールを追加します。

  • "import/no-default-export": "error"

.eslintrcは以下のようになります。

{
  "root": true,
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "prettier"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      "error",
      { "argsIgnorePattern": "^_" }
    ],
    "import/no-default-export": "error"
  }
}


以上で設定は完了です。ESLintを実行するとdefault exportでエラーになることが確認できます。自分の場合はVSCodeにESLintのプラグインを設定してるので、以下のようにVSCode上でエラーを確認できました。