如何禁用 storybook 的 webpack 的 eslint-loader？

Question

我想禁用 storybook 的 webpack 的 eslint-loader，因为我使用其他进程来验证代码的质量。

我知道 webpack 关于故事书的配置存在如下代码，也许我可以在 config.rules 上使用一些过滤器，但可能不好：

const path = require('path')

module.exports = async ({ config }) => {
  // some modifications

  return config
}

我正在尝试搜索关于此的故事书文档，但没有找到任何相关内容。

Answer 1

我遇到了类似的问题，在我的例子中，我使用了 create-react-app 和 customize-cra 来禁用 eslint，因为我也在使用我自己的 linter 配置，但是我运行使用不同的 linting 规则的 Storybook 问题，并抱怨我的源代码。

然后我意识到我可以只查看 customize-cra 的源代码以了解他们如何在 webpack 中禁用 eslint 并且它起作用了。

disableEsLint = (e) => {
  return e.module.rules.filter(e =>
    e.use && e.use.some(e => e.options && void 0 !== e.options.useEslintrc)).forEach(s => {
      e.module.rules = e.module.rules.filter(e => e !== s)
    }), e
}

module.exports = function ({ config }) {
  // Same config, except it is missing the eslint rule
  config = disableEsLint(config);

  // Do any thing else you want here
  config.module.rules.unshift({
    test: /\.story\.tsx?$/,
    loaders: [
      {
        loader: require.resolve('@storybook/addon-storysource/loader'),
        options: { parser: 'typescript' },
      },
    ],
    enforce: 'pre',
  });

  // return the new config
  return config;
};

我不确定这是否适合你的情况，但值得一试。

其他建议尝试在 webpack 中控制台日志配置，找到规则的名称和 config.module.rules.delete('your-rule-name')

在我的例子中，规则没有名称/或者我找不到它。

Answer 2

使用 this 示例了解如何自定义故事书的默认配置。

然后您需要过滤该配置中的 rules 数组。

module.exports = {
  webpackFinal: (config) => {
    return {
      ...config,
      module: {
      rules: config.module.rules.filter(rule => {
        if (!rule.use) return true;
        return !rule.use.find(
          useItem => typeof useItem.loader === 'string' && useItem.loader.includes('eslint-loader'),
        );
      }),
    },
  },
};

Answer 3

似乎较新的故事书版本使用了 eslint-webpack-plugin，因此所需的更改现在看起来像这样：

--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const EslintWebpackPlugin = require('eslint-webpack-plugin');
+
 module.exports = {
    stories: ['./stories/*.stories.tsx'],
    addons: [
@@ -8,4 +11,17 @@ module.exports = {
        '@storybook/addon-links',
        '@storybook/addon-controls',
    ],
+   webpackFinal: config => {
+       return {
+           ...config,
+           plugins: config.plugins.filter(plugin => {
+               // Remove the eslint-webpack-plugin: We already check our code, storybook doesn't need to bother
+               // doing it again with potentially different options.
+               if (plugin instanceof EslintWebpackPlugin) {
+                   return false;
+               }
+               return true;
+           }),
+       };
+   },
 };

Answer 4

plugin instanceof EslintWebpackPlugin 的解决方案对我没有帮助，但这种方法有帮助：

//.storybook/main.js

module.exports = {
  webpackFinal: config => {
    return {
      ...config,
      plugins: config.plugins.filter(plugin => {
        if (plugin.constructor.name === 'ESLintWebpackPlugin') {
          return false
        }
        return true
      }),
    }
  },
}

P.S。新版本将有一个 CLI 参数来禁用 eslint：https://github.com/storybookjs/storybook/pull/13452，6.2.0-alpha.7 已经支持它

Answer 5

storybook v6.3：从默认配置中，只需注释掉 create-react-app 预设插件：

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    // '@storybook/preset-create-react-app'    - HERE - comment this out
  ],
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
};

如果发现 eslint 'error'，create react app preset 将停止您的构建，在我看来这非常愚蠢

如何禁用 storybook 的 webpack 的 eslint-loader？

How disable eslint-loader of storybook's webpack?

javascript

eslint

webpack

storybook