故事書因反應中的 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將所有規則自動更改為“警告”。