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

Posted 2023-02-22

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

【英文标题】：ESLint couldn't find the config "prettier/@typescript-eslint" after relocating .eslintrc to parent

【发布时间】：2021-04-16 22:07:20

【问题描述】：

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

parentFolder > componentA
             > componentB
             > componentC

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

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

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

哎呀！有些不对劲！ :(

ESLint：6.8.0。

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

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

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

【问题讨论】：

我认为以下是一种解决方法，我在升级 eslint、prettier 并从 js 项目转移到 typescript 项目后遇到了同样的问题。我第一次从 extends 数组中删除 prettier/@typescript-eslint 并再次正常工作。之后，我将prettier/@typescript-elist 添加到extends 数组中，它继续工作没有问题。这种行为很奇怪，不知道为什么第一次就失败了????‍♂️，也不知道为什么没有这个键运行了几次后就可以了。

【参考方案1】：

当我更新到 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

【参考方案2】：

prettier/@typescript-eslint 在eslint-config-prettier v8.0.0 中一直是removed。只需从您的 ESLint 配置文件中删除它即可。 extends 中唯一需要 Prettier 和 ESLint 不冲突的条目是 "prettier"（确保它是 extends 中的最后一个）。

【讨论】：

验证。我也应该删除"plugin:prettier/recommended"，对吗？然后，我的 .eslintrc 文件将包含一组规则，如下所示：["plugin:angular/johnpapa", "plugin:@typescript-eslint/recommended", "prettier"]（在 prittier 行没有插件前缀）？

不，esling-config-prettier 和 eslint-plugin-prettier 是两个不同的项目。我的回答只针对前者。该插件有自己的推荐配置。请查看其文档。

我必须从所有扩展中删除相同的内容才能使其正常工作。谢谢。

【参考方案3】：

prettier/@typescript-eslint 在eslint-config-prettier v8.0.0 中被删除

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

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

【参考方案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',  
    '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',
    ,
,

;