ESLint如何集成到Create React App中？ [英] How is ESLint integrated into Create React App?

问题描述

当我运行 npx create-react-app ... 时，正在为我创建一个准骨头的React项目。
然后，我窥视 package.json 时，似乎存在一些ESLint证据，如下所示：

  eslintConfig：{
 extends： react-app 
}，
  

但是，每当我将ESLint安装为dev依赖项并对其进行配置时（如我通常所做的那样），VS Code似乎都会将其拾起。
在这种情况下，VS Code似乎不认识到存在/配置了任何种类的短绒。
这并不奇怪，因为ESLint不是我刚刚生成的React项目的依赖项-至少不是根据 package.json 的依赖。
当我尝试在项目的根目录中运行 eslint。时，它显示找不到命令。

我试图通过扩展它来为ESLint配置注入生命，所以现在我有了：

  eslintConfig： {
 extends：[ react-app， eslint：recommended， google]，
 rules：{
 semi：[ error，总是]，
引号：[错误，双精度] 
} 
}，
  

这不会改变。
我以某种方式操纵源代码，因为我知道它违反了上面的配置，但是，我没有收到任何不当行为的信号。

一个简单的问题：
由 create-react-app 生成的项目是否带有某种ESLint配置，如果是的话，如何启用？并正确扩展它？

当我被引用为

... ESLint似乎不是package.json的依赖项。

为什么？这就是为什么您使用诸如CRA之类的启动器。

... VS代码无法识别出存在ESLint。

它确实：

...项目根目录中没有.eslintrc。*文件。

为什么会这样？您从CRA获得默认配置。
如果要覆盖它，请添加文件。

When I run npx create-react-app ..., a bare-bone React project is being created for me. When I then peek into package.json, there seems to be some evidence of ESLint to be present, as there is this:

"eslintConfig": {
  "extends": "react-app"
},

However, whenever I install ESLint as a dev dependency and configure it -- as I usually do --, VS Code seems to pick it up. In this case, VS Code does not seem to recognize that there is any kind of linter present/configured. This is not super surprising, as ESLint is not a dependency of the React project I just generated -- at least not according to package.json. When I try to run eslint . within the project's root directory, it says "command not found".

I tried to breathe life into this ESLint configuration by expanding it, so now I have this:

"eslintConfig": {
  "extends": ["react-app", "eslint:recommended", "google"],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
   }
},

This changes nothing. I manipulated the source code in a way that I know it violates the above configuration, yet, I have not been signaled any wrongdoing.

This leads me to a simple question: Do projects generated by create-react-app come with some kind of ESLint configuration, and, if so, how do I enable and extend it correctly?

As I am being referred to the number one Google hit that comes up when searching "create react app eslint" -- which I have obviously read --, let me clarify what I mean:

ESLint is obviously integrated into Create React App in a different way than it would be if it had been manually added to the project using like so. This is not only evident by the sheer number of people who post about their struggles of getting the two to work together. This is also evident as...

• ...one cannot run the eslint command in the project root.
• ...ESLint does not seem to be a dependency within package.json.
• ...VS Code doesn't pick up that there is ESLint present.
• ...there is no .eslintrc.* file in the project root.
• ...etc.

So: How do I go about ESLint in the context of Create React App? For starters: How do I run it? How do I expand it? And why does VS Code not pick it up -- even though it usually notices the presence of ESLint?

解决方案

Yes, create-react-app comes with eslint config.

How do I enable and extend it correctly?

You can check how to extend it here.

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

How do I enable it?

You need to integrate it with your IDE.

How do I run it?

After integrating it, an eslint server will be running in the background and will enable linting for your IDE.

---

I checked all your claims after running npx create-react-app example:

...one cannot run the eslint command in the project root.

You can:

...ESLint does not seem to be a dependency within package.json.

Why should it be? That's why you using a starter like CRA.

...VS Code doesn't pick up that there is ESLint present.

It does:

...there is no .eslintrc.* file in the project root.

Why would it be? You get the default configuration from CRA. Add a file if you want to override it.

这篇关于ESLint如何集成到Create React App中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！