create-react-app 子文件夹项目不会 lint

JS

使用create-react-app创建React项目是开发React应用程序的一种简单而快速的方法。它为我们提供了一个基本的项目结构和配置，使我们能够快速开始开发。然而，一些开发者可能会遇到一个问题：在使用create-react-app创建的子文件夹项目中，无法进行代码检查（lint）。

在默认情况下，create-react-app会在项目根目录下的src文件夹中进行代码检查。这意味着如果我们在子文件夹中创建了一个新的React组件，它将不会被代码检查工具所检测到。这可能会导致一些潜在的问题在代码提交之前没有被发现。幸运的是，我们可以通过一些简单的配置来解决这个问题。

要在create-react-app的子文件夹项目中启用代码检查，我们需要进行一些额外的配置。首先，我们需要在子文件夹的根目录下创建一个名为.eslintrc.JSon的文件。在这个文件中，我们可以定义我们想要使用的eslint规则和配置。

接下来，我们需要在子文件夹的根目录下创建一个名为.prettierrc.JSon的文件。这个文件用于配置代码格式化工具prettier的规则和配置。

一旦我们完成了上述配置，我们就可以在子文件夹中进行代码检查了。我们可以使用以下命令来运行代码检查：

eslint src

这将会对子文件夹中的代码进行检查，并输出任何不符合eslint规则的问题。

案例代码：

假设我们在create-react-app的src文件夹中创建了一个名为Components的子文件夹，并在其中创建了一个名为Button.JS的组件。在Button.JS中，我们有如下代码：

JSx
import React from 'react';
const Button = () => {
  return (
    <button className="button">
      Click me!
    </button>
  );
};
export default Button;

如果我们运行eslint src命令，它将不会检查到Button.JS文件中的任何问题，因为它不是在src文件夹的直接子目录中。

为了解决这个问题，我们可以按照上述步骤在Components文件夹的根目录下创建.eslintrc.JSon和.prettierrc.JSon文件。在这些文件中，我们可以定义我们想要使用的eslint和prettier规则和配置。

例如，我们可以在.eslintrc.JSon文件中添加以下配置：

JSon
{
  "extends": "react-app",
  "rules": {
    "react/prop-types": "off"
  }
}

这将禁用React组件必须声明propTypes的规则。

然后，我们可以运行eslint src/Components命令来检查Button.JS文件。现在，eslint会检查到Button.JS中的任何不符合eslint规则的问题，并输出给我们。

：

通过简单的配置，我们可以在create-react-app的子文件夹项目中启用代码检查。这样，我们就可以确保我们的代码质量，并避免一些潜在的问题在代码提交之前被发现。在实际开发中，这对于保持代码的一致性和可维护性非常重要。