故事书因反应中的 eslint 错误而失败

Question

我已经配置了 React、Storybook、Tailwind。 一切正常。 但是在我添加 eslint 之后，它会为每个 eslint 错误打破故事书。

.storybook/main.js

    const path = require('path');
    
    module.exports = {
      stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
      addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/preset-create-react-app',
      ],
      webpackFinal: async (config) => {
        config.module.rules.push({
          test: /\.css$/,
          use: [
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [require('tailwindcss'), require('autoprefixer')],
              },
            },
          ],
          include: path.resolve(__dirname, '../'),
        });
        
        return config;
      },
    };

错误

[ESLintError: src/stories/Button.js Line 2:23: 'prop-types' 应该列在项目的依赖项中。 运行 'npm i -S prop-types' 将其添加 import/no-extraneous-dependencies

src/stories/Header.js 第 2:23 行：“prop-types”应该列在项目的依赖项中。 运行 'npm i -S prop-types' 将其添加 import/no-extraneous-dependencies

src/stories/Page.js 第 2:23 行：“prop-types”应该列在项目的依赖项中。 运行 'npm i -S prop-types' 将其添加 import/no-extraneous-dependencies Line 28:11: " can be escaped with " , “ , " , ” react/no-unescaped-entities第 28:16 行： "可以用"转义。 , “ , " , ” 反应/无未转义实体

搜索关键字以了解有关每个错误的更多信息。]

WARN Broken build，修复上面的错误。 WARN 您可能需要刷新浏览器。

错误命令失败，退出代码为 1。

Answer 1

就我而言，我只是想在开发过程中禁用 eslint 错误，所以

DISABLE_ESLINT_PLUGIN=true start-storybook -p 6006 -s public

成功了

Answer 2

感谢您的问题，我在这个问题上苦苦挣扎了几个小时......

我的调查步骤如下：

1. 显示现有的 Webpack 配置：

      webpackFinal: async (config) => {
        console.log(config);

2. 分析配置

  bail: false,
  stats: { preset: 'none', logging: 'error' },

3. bail参数是false没关系，但是preset: 'none'意味着什么都不显示 - 让我们停一下，我们稍后需要它证明： https://webpack.js.org/configuration/stats/#stats-presets
4. 默认情况下，ESLintPlugin 会抛出错误并失败证明： https://webpack.js.org/plugins/eslint-webpack-plugin/#failonerror
5. 试图将参数failOnError更改为false ，例如

      new ESLintPlugin({
        context: path.resolve(__dirname, '..'),
        overrideConfigFile: path.resolve(__dirname, '..', '.eslintrc'),
        extensions: ['js', 'jsx'],
        files: ['./components', './theme'],
        failOnError: false,
      })

6. 现在，如果我们更改stats参数，我们可以看到警告：

  webpackFinal: async config => {
    config.stats = undefined;
    config.plugins.push(

Answer 3

使用ESLINT_NO_DEV_ERRORS选项运行 storybook 也可以解决问题：

ESLINT_NO_DEV_ERRORS=true npm run storybook

您也可以将其设置为故事书环境变量，然后将其忘记。

Answer 4

这是因为 ESLint 抛出错误而不是警告。 故事书不能从那个错误开始。 你有两种方法可以解决这个问题！！

1. 为您在 ESLint 配置文件中使用的所有规则设置“警告”
2. 使用此 package https://github.com/bfanger/eslint-plugin-only-warn将所有规则自动更改为“警告”。