将 .eslintrc 重新定位到父级后，ESLint 找不到配置“prettier/@typescript-eslint”

Question

我有一个类似的文件夹结构

parentFolder > componentA
             > componentB
             > componentC

每个组件都有一个 package.json，它定义了一个yarn lint 命令（eslint "myFilter" --no-error-on-unmatched-pattern）。每个组件都有自己的 .eslintrc 和 .prettierrc

当我在组件A/B/C 文件夹中并运行yarn lint 时，它按预期工作。

由于每个组件文件夹中的所有 .eslintrc 都是相同的，因此我将文件移到了parentFolder 下，并删除了组件文件夹中的副本。当我调用yarn lint时，它使用了parentFolder中的.eslintrc，但是，我收到了错误。

哎呀！出了问题！ :(

ESLint：6.8.0.

ESLint 找不到配置“prettier/@typescript-eslint” 延伸自.请检查配置名称是否正确。

我将 .prettierrc 移至父文件夹，但是找不到它。我应该怎么办？谢谢你

更新：我注意到如果我在父文件夹中的package.json上添加prettier并运行yarn install，它就会起作用。但是，我不知道这是否是正确的方法。

Answer 1

prettier/@typescript-eslint

已在 eslint-config-prettier v8.0.0 中

删除

。只需将其从 ESLint 配置文件中删除即可。为了使 Prettier 和 ESLint 不冲突，

extends

中现在需要的唯一条目是

"prettier"

（确保它是

extends

中的最后一个）。

Answer 2

当我更新到 eslint-config-prettier 8.0.0 时，我遇到了同样的错误，我通过将 .eslintrc.js 更改为：

来修复它

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

确保您的 package.json 包含：

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

您当然可以包含其他插件和其他扩展，您可以找到所有选项：https://www.npmjs.com/package/@typescript-eslint/eslint-plugin

Answer 3

prettier/@typescript-eslint

已在

eslint-config-prettier

v8.0.0

中删除

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

从v8开始，配置更加简单。不幸的是，互联网上仍然有许多 How-Tos 提到旧的配置文件，但现在已经全部消失了。

Answer 4

只需在包.josn中添加这个包 作为开发者

 "@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",

在 eslint.js 中查看此文件添加并尝试检查它是否相同

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',
    },
},

};

Answer 5

点击此链接：https://github.com/prettier/eslint-plugin-prettier，访问 eslint-plugin-prettier GitHub 存储库，您将在以下位置找到解决方案以及发生这种情况的原因： 自述文件。祝你好运🤞