create-react-app 如何显示 "npm start" 的 lint 错误？

Question

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

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

我很确定它与 husky and/or lint-staged 有关，但我无法在我的（不可共享的）围栏中复制这种行为。

我了解如何设置和配置 eslint（我可以在直接调用 eslint 时看到 errors/warnings），并且我已经能够运行在我的 Git 动作（即 pre-commit）使用 husky 和 lint-staged，所以我觉得我快要解决这个难题了，但是当我调用 webpack-dev-server.

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

Answer 1

这是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

Answer 2

对于Angular和带有npm模块的react项目，你可以使用“npm 运行 lint -- --fix”来解决所有问题可能的 lint 错误，然后使用 ng lint 命令 post 检查上面的修复命令运行s

create-react-app 如何显示 "npm start" 的 lint 错误？

How is create-react-app showing lint errors with "npm start"?

reactjs

eslint

webpack-dev-server

create-react-app