Javascript ESLint如何集成到Create React应用程序中？

当我运行

npx create react app…

时，正在为我创建一个裸体react项目。 然后，当我查看

package.json

时，似乎有一些证据表明存在ESLint，如下所示：

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

然而，每当我将ESLint安装为开发人员依赖项并对其进行配置时（就像我通常所做的那样），VS代码似乎都会选择它。 在这种情况下，VS代码似乎没有识别出存在/配置了任何类型的过梁。 这并不出人意料，因为ESLint不是我刚刚生成的React项目的依赖项——至少不是根据

package.json

。 当我尝试在项目的根目录中运行

eslint.

时，它会显示“找不到命令”

我试图通过扩展此ESLint配置来为其注入活力，因此现在我有了：

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

这不会改变什么。 我以一种我知道它违反上述配置的方式操纵了源代码，然而，我没有收到任何错误的信号

这就引出了一个简单的问题： 由

create react app

生成的项目是否带有某种ESLint配置，如果是，如何正确启用和扩展它？

当我被提到时——我显然已经读过了——让我澄清一下我的意思：

显然，与使用手动将ESLint添加到项目中不同，ESLint以不同的方式集成到CreateReact应用程序中。 这不仅仅是因为有大量的人发表了他们为让两人合作所做的努力。 这也很明显，因为

• …无法在项目根目录中运行

  eslint

  命令
• …ESLint似乎不是

  package.json

  中的依赖项
• …VS代码未检测到存在ESLint
• …项目根目录中没有

  .eslintrc.

  文件
• ……等等

---

那么：在createreact应用程序的上下文中如何处理ESLint呢？首先，我该如何运行它？如何扩展它？为什么VS Code不接收它？即使它通常会注意到ESLint的存在？

是的，create react app附带了ESLintconfig

如何正确启用和扩展它

您可以检查如何扩展它

如何启用它

你需要这样做

我如何运行它

集成后，eslint服务器将在后台运行，并将为您的IDE启用linting（有时需要重新启动IDE）

---

运行

npx create react应用程序示例后，我检查了您的所有声明：

…无法在项目根目录中运行eslint命令

你可以：


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

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

为什么会这样？这就是为什么你要用CRA这样的起动器。这是一种内在依赖，你不必担心，这是CRA的工作

…VS代码未检测到存在ESLint

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


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

您可以从CRA获得默认配置（由于专注于编码而对您隐藏）。
如果要覆盖该文件，请添加该文件（您也可以扩展它，检查文档）


了解eslint实际上是什么以及我们如何使用它来应对开发非常有用，请查看相关问题。
您的问题非常有意义。我发现这是有效的：


使用“npx ESLint”（显示所有选项）或“npx ESLint”在VS代码中运行ESLint
将脚本添加到package.json“lint”：“eslint.”，然后使用“npm run lint”

我在将ESLint集成到VS代码时没有遇到问题。在为ESLint安装VS代码扩展后，我会在问题下自动看到VS代码中的警告/错误。
要展开顶部注释的答案：

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

为什么会这样？这就是为什么你要用CRA这样的起动器。这是一种内在依赖，你不必担心，这是CRA的工作

使用create react app创建的项目将具有
react脚本
作为依赖项

react scripts
已作为依赖项安装了
eslint
，如中所示

通过在项目根目录中运行
npm ls
，可以查看是否安装了包（以及安装位置）

npm ls eslint
显示：

└─┬ react-scripts@4.0.3
  └── eslint@7.21.0 

这显示了我们通过在GitHub中查看react脚本手动调查的依赖关系树

因此，使用createreact应用程序制作的项目确实附带了eslint。由于它是一个依赖项，而不是全局安装的东西，因此必须使用npm脚本运行它

这就是为什么在终端中运行
eslint.
不起作用，而是使用

    "lint": "eslint .",

然后
npm运行lint
执行。（尽管您可能需要使用命令
eslint--ignore path.gitignore.
，因为存在错误）

类似地，eslint配置安装在
react脚本中，然后在默认项目输出自己的
包中引用。json
需要通过
settings将其与扩展和设置集成。json
如果在vscode中以调试模式打开控制台，可以查看
eslint
选项卡查看日志（修复错误后，将启用起毛功能）我想你正在努力将它与vscode集成，为什么要否决呢？遗憾的是，你写的东西都无助于我的处境。我没有
纱线
，所以我仍然无法运行
eslint
，在按照你所说的方式创建了两个新项目之后，在vscode中打开这些项目仍然会有结果
    "lint": "eslint .",