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

Posted 2023-02-19

【中文标题】故事书因反应中的 eslint 错误而失败

【英文标题】：Storybook fails on eslint errors in react

【发布时间】：2021-08-05 13:19:46

【问题描述】：

我已经配置了 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;
      ,
    ;

错误

[ESLint 错误： src/故事/Button.js 第 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 第 28:11 行：" 可以用"、“、"、”react/no-unescaped-entities 转义 第 28:16 行：" 可以用"、“、"、”react/no-unescaped-entities 转义

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

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

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

【参考方案1】：

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

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

【参考方案2】：

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

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

成功了