やりたいこと
以下のように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」です。
コマンドを実行しパッケージをインストールします。
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上でエラーを確認できました。