Eslint+prettier 不知道 keyof typeof答案

【问题标题】：Eslint+prettier do not know keyof typeofEslint+prettier 不知道 keyof typeof
【发布时间】：2022-01-14 17:26:35
【问题描述】：

我的 eslint 在我的 TS 代码上显示一个错误，它应该可以工作：

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

type MyType = keyof typeof foo;

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

应用程序是由 create-react-app 工具创建的，带有一些用于 eslint 的默认配置，我添加了更漂亮的支持，这是我的所有配置：

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

here is printscreen of my IDE with the error

有什么想法吗？谢谢！

Edit1：实际上我发现是由plugin:prettier/recommended 引起的，当我删除它时，它将停止调用该错误。但是我想添加这个插件

【问题讨论】：

对此有一个重复的问题：stackoverflow.com/questions/36001552/…

标签： typescript eslint prettier

【解决方案1】：

确保您使用与 eslintrc.js 兼容的解析器，尝试以下设置：

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"
     ]
};

【讨论】：

【解决方案2】：

即使我的配置看起来像这样，问题仍然存在：

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

我不得不删除plugins: ['@typescript-eslint'],，因为我得到：Error: "prettier/@typescript-eslint" has been merged into "prettier" in eslint-config-prettier 8.0.0

【讨论】：