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

问题描述

当我运行 npx create-react-app ... 时，正在为我创建一个基本的 React 项目.然后当我查看 package.json 时，似乎有一些 ESLint 存在的证据，因为有这个:

"eslintConfig": {扩展":反应应用程序"},

然而，每当我将 ESLint 安装为开发依赖项并对其进行配置时——就像我通常所做的那样——，VS Code 似乎会选择它.在这种情况下，VS Code 似乎没有意识到存在/配置了任何类型的 linter.这并不奇怪，因为 ESLint 不是我刚生成的 React 项目的依赖项——至少不是根据 package.json.当我尝试在项目的根目录中运行 eslint . 时，它说找不到命令".

我试图通过扩展它来为这个 ESLint 配置注入活力，所以现在我有了这个:

"eslintConfig": {"extends": ["react-app", "eslint:recommended", "google"],规则":{半":[错误"，总是"]，"quotes": ["error", "double"]}},

这没有任何改变.我以一种我知道它违反上述配置的方式操作源代码，但我没有收到任何不当行为的信号.

这让我想到一个简单的问题:create-react-app 生成的项目是否带有某种 ESLint 配置，如果是，我该如何正确启用和扩展它?

当我被提及

eslint 作为项目依赖的一部分安装，只需全局运行 eslint(eslint [cmd])，您需要确保它全局安装(不推荐).

<块引用>

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

为什么会这样?这就是您使用像 CRA 这样的启动器的原因.这是一种内在的依赖，你不必担心，这是 CRA 的工作.

<块引用>

...VS Code 没有发现存在 ESLint.

确实如此，请检查 OUTPUT 选项卡并查找 ESLint 以查看服务器的输出.

<块引用>

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

您从 CRA 获得默认配置(因为您专注于编码而对您隐藏).如果您想覆盖它，请添加此类文件(您也可以扩展它，请查看文档).

---

了解 eslint 实际上是什么以及我们如何使用它 React 开发非常有用，请查看相关问题 React 钩子真的必须从使用"开始吗?".

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 (sometimes restarting IDE required).

---

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 is installed as part of the project dependency, just by running eslint globally (eslint [cmd]) you need to ensure it installed globally (not recommended).

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

Why should it be? That's why you using a starter like CRA. It's an inner dependency, you don't need to worry about it, that's CRA's job.

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

It does, check the OUTPUT tab and look for ESLint to see the server's output.

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

You get the default configuration from CRA (which is hidden from you for focusing on coding). Add such file if you want to override it (you can also extend it, check the docs).

---

Its very useful to understand what eslint actually is and how we use it React development, check out related question "Do React hooks really have to start with "use"?".

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