Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork2.8k
Description
Before You File a Documentation Request Please Confirm You Have Done The Following...
- I have looked for existingopen or closed documentation requests that match my proposal.
- I haveread the FAQ and my problem is not listed.
Suggested Changes
Here's my real-life config:
importjsEslintfrom"@eslint/js";importeslintConfigPrettierfrom"eslint-config-prettier/flat";importreactHooksfrom"eslint-plugin-react-hooks";importreactRefreshfrom"eslint-plugin-react-refresh";importglobalsfrom"globals";importtsEslintfrom"typescript-eslint";exportdefaulttsEslint.config(jsEslint.configs.recommended,tsEslint.configs.recommendedTypeChecked,tsEslint.configs.stylisticTypeChecked,reactHooks.configs["recommended-latest"],reactRefresh.configs.recommended,reactRefresh.configs.vite,{ignores:["dist"],},{languageOptions:{parserOptions:{project:["./tsconfig.node.json","./tsconfig.app.json"],tsconfigRootDir:import.meta.dirname,},ecmaVersion:2020,globals:globals.browser,},},{files:["**/*.js","**/*.mjs"],extends:[tsEslint.configs.disableTypeChecked],},eslintConfigPrettier,);
After setting it up, it turned out there's just one rule I'd like to override, so I turned my config into:
exportdefaulttsEslint.config(// ... configs{ignores:["dist"],},{languageOptions:{parserOptions:{project:["./tsconfig.node.json","./tsconfig.app.json"],tsconfigRootDir:import.meta.dirname,},ecmaVersion:2020,globals:globals.browser,},rules:{// The rule I added:"@typescript-eslint/consistent-type-definitions":"off",},},{files:["**/*.js","**/*.mjs"],extends:[tsEslint.configs.disableTypeChecked],},eslintConfigPrettier,);
I expected this to simply merge with the existing rules, but it turned out it overwrote all the previously set rules, includingreact-hooks/rules-of-hooks andreact-refresh/only-export-components.
My first instinct was to manually re-add all the previously defined rules:
exportdefaulttsEslint.config(// ... configs{ignores:["dist"],},{languageOptions:{parserOptions:{project:["./tsconfig.node.json","./tsconfig.app.json"],tsconfigRootDir:import.meta.dirname,},ecmaVersion:2020,globals:globals.browser,},rules:{// The rules I brought back:"react-hooks/rules-of-hooks":"error","react-hooks/exhaustive-deps":"warn","react-refresh/only-export-components":"error","@typescript-eslint/consistent-type-definitions":"off",},},{files:["**/*.js","**/*.mjs"],extends:[tsEslint.configs.disableTypeChecked],},eslintConfigPrettier,);
It worked, but the manual process didn't feel right or elegant, so I started fiddling around and figured out that I have to append therules into the next array item, instead of adding it to the entry that containslanguageOptions.
I ended up with:
importjsEslintfrom"@eslint/js";importeslintConfigPrettierfrom"eslint-config-prettier/flat";importreactHooksfrom"eslint-plugin-react-hooks";importreactRefreshfrom"eslint-plugin-react-refresh";importglobalsfrom"globals";importtsEslintfrom"typescript-eslint";exportdefaulttsEslint.config(// ... configs{ignores:["dist"],},{languageOptions:{parserOptions:{project:["./tsconfig.node.json","./tsconfig.app.json"],tsconfigRootDir:import.meta.dirname,},ecmaVersion:2020,globals:globals.browser,},},{rules:{"@typescript-eslint/consistent-type-definitions":"off",},},{files:["**/*.js","**/*.mjs"],extends:[tsEslint.configs.disableTypeChecked],},eslintConfigPrettier,);
It was just a trial-and-error process that led me to that solution, but after figuring it out I still don't really understand why it worked. Why does havingrules together withlanguageOptions prevent merging, whereas a separate entry containing just therules object is correctly merged?
What I'm proposing is adding a very explicit explanation on how to add custom rule overrides in a safe way - so that preceding rules aren't overridden OR, and maybe it's a better option, clarify how thetsEslint.config() performs merging: what's being merged and what is not.
Affected URL(s)
https://typescript-eslint.io/packages/typescript-eslint#config
Additional Info
No response