create-react-app 如何使用“npm start”显示 lint 错误？

Question

在使用 create-react-app（没有自定义）并调用 npm start 时，似乎在保存单个文件时会出现 linting，并且会显示任何错误或警告输出：

我正在尝试对它的工作原理进行逆向工程，但被卡住了。

我很确定这与 husky 和/或 lint-staged 有关，但我无法在我的（不可共享的）游戏笔中复制此行为。

我了解如何设置和配置 eslint（直接调用 eslint 时可以看到错误/警告），并且我已经能够使用 husky 和lint-staged，所以我觉得我已经接近解决这个难题了，但是当我调用 webpack-dev-server 时，我仍然没有得到任何此类输出。

使用什么工具在 create-react-app npm start 命令期间显示 eslint 输出？

Answer 1

对于带有 npm 模块的 Angular 和 react 项目，您可以使用“npm run lint -- --fix”来解决所有可能的 lint 错误，然后使用 ng 进行检查lint 命令发布上述修复命令运行

Answer 2

这是 eslint-loader 的特性，添加到 create-react-app 中的 webpack 配置中。

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  enforce: 'pre',
  use: [{
    options: {
      cache: true,
      formatter: require.resolve('react-dev-utils/eslintFormatter'),
      eslintPath: require.resolve('eslint'),
      resolvePluginsRelativeTo: __dirname,
      // @remove-on-eject-begin
      ignore: isExtendingEslintConfig,
      baseConfig: isExtendingEslintConfig
        ? undefined
        : {
            extends: [require.resolve('eslint-config-react-app')],
          },
      useEslintrc: isExtendingEslintConfig,
      // @remove-on-eject-end
    },
    loader: require.resolve('eslint-loader'),
  }],
  include: paths.appSrc
}

Source