如何扩展Eslint以使用create-rect应用程序

Question

我正在开发一个React应用程序，我想设置一个linter，这样我就可以在控制台中看到所有警告/错误。

医生没有说太多：https://create-react-app.dev/docs/setting-up-your-editor/

我在.env.dev文件中添加了EXTEND_ESLINT=true，还创建了一个.eslintrc.json文件，其中包含以下内容(取自文档(：

{
"eslintConfig": {
"extends": ["react-app", "shared-config"],
"rules": {
"additional-rule": "warn"
},
"overrides": [
{
"files": ["**/*.ts?(x)"],
"rules": {
"additional-typescript-only-rule": "warn"
}
}
]
}
}

我试图添加的每一条规则都无济于事，我仍然在控制台中看不到任何警告，最重要的是，如果我试图从命令行运行linter：

npx eslint ./src

我得到以下错误：

ESLint configuration in .eslintrc.json is invalid:
- Unexpected top-level property "eslintConfig".

我错过了什么？

Answer 1

您可以在src文件夹中创建一个.eslintrc.js文件，语法如下：

module.exports = {
extends: ["react-app", "shared-config"],
rules: {
"additional-rule": "warn"
},
overrides: [
{
"files": ["**/*.ts?(x)"],
"rules": {
"additional-typescript-only-rule": "warn"
}
}
]
}

或者将其添加到package.json(而不是.eslintrc.json文件(：

"eslintConfig": {
"extends": ["react-app", "shared-config"],
"rules": {
"additional-rule": "warn"
},
"overrides": [
{
"files": ["**/*.ts?(x)"],
"rules": {
"additional-typescript-only-rule": "warn"
}
}
]
}

Answer 2

您只需在package.json中添加插件规则和配置，而无需创建.eslintrc.json和env变量