3
votes

Comment désactiver eslint-loader du webpack de Storybook?

Je voudrais désactiver eslint-loader du webpack de storybook, car j'utilise un autre processus pour valider la qualité du code.

Je sais qu'il existe la configuration du webpack sur le livre d'histoires comme le code ci-dessous et peut-être que je pourrais utiliser un filtre sur config.rules , mais peut-être n'est pas bon:

const path = require('path')

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

  return config
}

J'ai essayé de chercher dans les documents de contes à ce sujet, mais je n'ai rien trouvé à ce sujet.

javascript eslint webpack storybook

0 commentaires

3 Réponses :

8
votes

J'ai eu un problème similaire, dans mon cas, j'utilisais create-react-app et personnaliser-cra pour désactiver eslint, car j'utilise également ma propre configuration de linter, mais je rencontre un problème avec Storybook en utilisant différentes règles de linting , et se plaindre de mon code source.

J'ai alors réalisé que je pouvais simplement regarder le code source de custom-cra pour savoir comment ils avaient désactivé eslint dans webpack et que cela fonctionnait.

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;
};

Je ne sais pas si cela fonctionnera pour votre cas, mais cela vaut la peine d'essayer.

D'autres suggestions sont d'essayer de configurer le journal de la console dans webpack, de trouver le nom de la règle et de config.module.rules.delete('your-rule-name')

Dans mon cas, les règles n'avaient pas de nom / ou je ne le trouvais pas.

1 commentaires

il a travaillé pour moi, je l' ai ajouté à .storybook/main.js regardent ce lien: storybook.js.org/docs/configurations/custom-webpack-config/...

2
votes

Utilisez cet exemple pour comprendre comment personnaliser la configuration par défaut du livre d'histoires.

Ensuite, vous devez filtrer le tableau de règles dans cette configuration.

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'),
        );
      }),
    },
  },
};

0 commentaires

0
votes

Il semble que les versions plus récentes du livre de contes utilisent plutôt le plugin eslint-webpack-plugin , donc le changement nécessaire ressemble maintenant à ceci:

--- 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;
+           }),
+       };
+   },
 };

0 commentaires