Блог

Главная - Вопросы по программированию - Есть ли способ переопределить параметры ESLintPlugin в конфигурации веб-пакета create-react-app?

Есть ли способ переопределить параметры ESLintPlugin в конфигурации веб-пакета create-react-app?

#reactjs #webpack #eslint

#reactjs #webpack #eslint

Вопрос:

Итак, я столкнулся с проблемой с eslint в моем приложении react, и я смог решить ее после извлечения приложения и добавил некоторые параметры ESLintPlugin в webpack.config файл.

   new ESLintPlugin({
        // Plugin options
        extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
        formatter: require.resolve('react-dev-utils/eslintFormatter'),
        eslintPath: require.resolve('eslint'),
        context: paths.appSrc,
        failOnError: false, <== this one 
        emitWarning: true, <== and this one
        // ESLint class options
        cwd: paths.appPath,
        resolvePluginsRelativeTo: __dirname,
        baseConfig: {
          extends: [require.resolve('eslint-config-react-app/base')],
          rules: {
            ...(!hasJsxRuntime amp;amp; {
              'react/react-in-jsx-scope': 'error'
            })
          }
        }
      })

Мне было интересно, могу ли я сделать то же самое, но без необходимости извлекать приложение и использовать react-app-rewired вместо него, у меня уже есть config-overrides.js файл

 module.exports = function override(webpackConfig) {
  webpackConfig.module.rules.push({
    test: /.mjs$/,
    include: /node_modules/,
    type: 'javascript/auto',
  });
  return webpackConfig;
};

есть ли аналогичный способ получить доступ к функции ESLintPlugin в webpack.config файле и добавить к ней новые параметры через config-overrides.js file?

Комментарии:

1. Будет ли добавление .eslintrc файла в корень вашего проекта работать?

2. @NinoFiliu У меня уже есть .eslintrc файл, и все параметры компоновки находятся внутри него. мои вопросы касаются ESLintPlugin функции, которая существует внутри webpack.config файла. я отредактировал свой вопрос и добавил функцию.

Ответ №1:

Это работает для меня на реактивных сценариях «^ 5.0.0». То, что я сделал, это просто повторно инициализировать плагин eslint webpack в config-overrides.js

 //config-overrides.js
const ESLintPlugin = require('eslint-webpack-plugin') //this package should be exist by default

module.exports = function override(config) {

  for (let i = 0; i < config.plugins.length; i  ) {
    if (config.plugins[i].key !== "ESLintWebpackPlugin") continue;
    const currentEslint = config.plugins[i];
    config.plugins[i] = new ESLintPlugin({
      ...currentEslint.options, // using default eslint option
    })
    break;
  }

  return config;
}

путем повторной инициализации на config-overrides.js он читает ваш custom .eslintrc.json