请教假如我想保留create-react-app原本的规则，我该怎么做？

[JunQu]

我很想尝试这个规则，于是我在官方脚手架 create-react-app 中引入了它，我的操作是这样：

npx create-react-app my-app
cd my-app
yarn
yarn add -D eslint-config-alloy

因为我想保留原来的设置，所以我只增加了 eslint-config-alloy ，于是我的 .eslintrc.js 是：

module.exports = {
    extends: [
        'react-app',
        'alloy',
        'alloy/react',
    ]
};

这个时候查看原本的App.js，他就会报错，报错信息如下图：

当我在.eslintrc.js 只去掉 alloy，保留alloy/react，这时候我只会报一个错误：

ESLint: Definition for rule 'react/jsx-no-useless-fragment' was not found.(react/jsx-no-useless-fragment)

期望：
能像eslint-config-airbnb那样，可以保留react-app的eslint设置。我把react-app 从.eslintrc.js 移除后是没问题的，但是我想保留它原本的设置，那我应该怎么做？

环境：
webstorm 2019.3
windows10 1909
node 12.13.1

create-react-app 中自带的eslint相关的版本：

"babel-eslint": "10.0.3",
"eslint": "^6.1.0",
"eslint-config-react-app": "^5.0.2",
"eslint-loader": "3.0.2",
"eslint-plugin-flowtype": "3.13.0",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.14.3",
"eslint-plugin-react-hooks": "^1.6.1",
"@typescript-eslint/eslint-plugin": "^2.2.0",
"@typescript-eslint/parser": "^2.2.0",

[xcatliu]

原因是 eslint 版本低了，一些规则只有在高版本 eslint 中才是可用的，比如你的截图中的 grouped-accessor-pairs 是在 6.7.0 才支持的，而你的 eslint 只有 6.1.0 版本。

eslint 对于 config 中的格式检查是非常严格的，只要检查到不支持的规则就会报错。

所以解决方案就是升级 eslint 到最新版。建议一次性把相关的模块都升级到最新版：

npm install --save-dev eslint@latest typescript@latest @typescript-eslint/parser@latest @typescript-eslint/eslint-plugin@latest eslint-plugin-react@latest eslint-config-alloy@latest

[JunQu]

谢谢。那些 eslint相关的模块是我 eject 后看到的。我在尝试更新所有模块后，create-react-app 自带的规则就失效了，所以又重新安装 create-react-app 的规则，把所有模块又重装一遍后就好了。不过我最后还是选择 airbnb ，airbnb 可能都是被低版本 eslint 支持的，因为我不是很想去覆盖官方的那个。非常谢谢。

[xcatliu]

没关系，如果有一些规则需要个性化配置的话，还可以来参考 alloy 的规则哈

[JunQu]

因为这里注释的详细，我经常来看的（参考），谢谢你的规则。主要作为新手我目前更倾向官方，以后我肯定还会尝试你们的规则。