ESLint couldn't find the config "prettier/@typescript-eslint" after relocating .eslintrc to parent

22
votes

I have a folder structure like

parentFolder > componentA
             > componentB
             > componentC

Each component has a package.json which defines a yarn lint command (eslint "myFilter" --no-error-on-unmatched-pattern). And each component has its own .eslintrc and .prettierrc

When I am in a componentA/B/C folder and run yarn lint, it is working as expected.

Since all of the .eslintrc are the same in each component folder, I moved the file under parentFolder and delete the copies in the component folders. When I call yarn lint, it used the .eslintrc in the parentFolder, but, I am getting an error.

Oops! Something went wrong! :(

ESLint: 6.8.0.

ESLint couldn't find the config "prettier/@typescript-eslint" to extend from. Please check that the name of the config is correct.

I moved the .prettierrc to the parent folder, but, it couldn't find it. What should I do? Thank you

Update: I noticed if I add the prettier on the package.json in the parent folder and run the yarn install, it works. But, I don't know if this is the proper way to do it.

4
eslintprettier
I think the following is a workaround, I had the same issue after upgrade eslint, prettier, and move from a js project to a typescript project. The first time I remove prettier/@typescript-eslint from the extends array and all work properly again. After that, I add the prettier/@typescript-elist to the extends array and it continues working without problems. This behavior is very strange, I don't know why it fails the first time 🤷‍♂️ and I don't know why it works after a few runs without this key. – Diego Alberto Zapata Häntsch

4 Answers

50
votes

prettier/@typescript-eslint has been removed in eslint-config-prettier v8.0.0. Just remove it from your ESLint config file. The only entry in extends that is needed now for Prettier and ESLint to not conflict is "prettier" (make sure it's the last one in extends).

7
votes

I got the same error when I updated to eslint-config-prettier 8.0.0, I fixed it by changing .eslintrc.js to:

    "plugins": ['@typescript-eslint'],
    "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"]

Make sure your package.json includes:

 @typescript-eslint/eslint-plugin
 @typescript-eslint/parser

You can of course include other plugins and other extends, you can find all the optons: https://www.npmjs.com/package/@typescript-eslint/eslint-plugin

5
votes

prettier/@typescript-eslint was removed in eslint-config-prettier v8.0.0

see https://github.com/prettier/eslint-config-prettier/issues/173

From v8, there is simpler configuration. Unfortunately there are still many How-Tos on the Internet that mention old config files that are all gone now.

0
votes

just to in the package .josn add this package as dev

 "@typescript-eslint/eslint-plugin": "^4.30.0",
    "@typescript-eslint/parser": "^4.30.0",
   "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",

in eslint.js look to this file add to try to cheack if it is the same

module.exports = {
parser: '@typescript-eslint/parser',
extends: [
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'plugin:prettier/recommended',  
    'plugin:react-hooks/recommended',
    'eslint:recommended'
        
],
"plugins": ['@typescript-eslint'],

parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
        jsx: true,
    },
},
rules: {
    'react/react-in-jsx-scope': 'off',

},
settings: {
    react: {
        version: 'detect',
    },
},

};