40

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.

BoBoDev
  • 847
  • 1
  • 8
  • 17
  • 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 Feb 22 '21 at 13:19

4 Answers4

96

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).

thorn0
  • 9,362
  • 3
  • 68
  • 96
  • 4
    To verify. I should also remove `"plugin:prettier/recommended"`, right? My *.eslintrc* file will then contain an array of rules like this: `["plugin:angular/johnpapa", "plugin:@typescript-eslint/recommended", "prettier"]` (with no plugin prefixed at the line with prittier)? – Konrad Viltersten Mar 14 '21 at 11:32
  • 3
    No, esling-config-prettier and eslint-plugin-prettier are two different projects. My answer is only about the former. The plugin has its own recommended configuration. Please check its docs. – thorn0 Mar 14 '21 at 18:15
  • I had to remove the same from all extends for it to work. Thanks. – 1antares1 Oct 25 '21 at 21:55
12

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

josesuero
  • 3,260
  • 2
  • 13
  • 19
8

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.

iva2k
  • 450
  • 4
  • 9
0

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',  
    'eslint:recommended'
        
],
"plugins": ['@typescript-eslint'],

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

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

};

Mohammed Al-Reai
  • 2,344
  • 14
  • 18