Eslint prettier do not know keyof typeof-CodePudding

my eslint is calling out an error on my TS code which should work:

const foo = {
  key1: 'value1',
  key2: 'value2'
};

type MyType = keyof typeof foo;

ESLint: Parsing error: Unexpected token `typeof`, expected the token `;`(prettier/prettier

App is created by create-react-app tool with some default config for eslint and I added prettier support, here is my config of all of that:

// eslintrc
"extends": [
    "react-app",
    "react-app/jest",
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],

here is printscreen of my IDE with the error

Any ideas? Thanks!

Edit1: actually I have found out that plugin:prettier/recommended is causing it and when I remove it will stop calling out that error. However I would like to have this plugin added

CodePudding user response：

make sure you use a compatible parser to eslintrc.js, try these settings:

module.exports = {
      root: true,
      parser: '@typescript-eslint/parser',
      plugins: ['@typescript-eslint'],
      extends: [
        "react-app",
        "react-app/jest",
        "plugin:prettier/recommended",
        "prettier/@typescript-eslint",
        "prettier/react"
     ]
};

CodePudding user response：

Still experiencing the issue even with this look of my config:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "no-console": "warn"
  },
  "globals": {
    "JSX": true
  }
}

I had to remove plugins: ['@typescript-eslint'], because I was getting: Error: "prettier/@typescript-eslint" has been merged into "prettier" in eslint-config-prettier 8.0.0