Move from eslint-loader to eslint-webpack-plugin, close #847

Author: Kocal

index.js

@@ -1234,47 +1234,33 @@ class Encore {
     }
 
     /**
-     * If enabled, the eslint-loader is enabled.
+     * If enabled, the eslint-webpack-plugin is enabled.
      *
-     * https://github.com/MoOx/eslint-loader
+     * https://github.com/webpack-contrib/eslint-webpack-plugin
      *
      * ```
-     * // enables the eslint loaded using the default eslint configuration.
-     * Encore.enableEslintLoader();
+     * // enables the eslint plugin using the default eslint configuration.
+     * Encore.enableEslintPlugin();
      *
      * // You can also pass in an object of options
-     * // that will be passed on to the eslint-loader
-     * Encore.enableEslintLoader({
+     * // that will be passed on to the eslint-webpack-plugin
+     * Encore.enableEslintPlugin({
      *     emitWarning: false
      * });
      *
      * // For a more advanced usage you can pass in a callback
-     * // https://github.com/webpack-contrib/eslint-loader#options
-     * Encore.enableEslintLoader((options) => {
-     *      options.extends = 'airbnb';
+     * // https://github.com/webpack-contrib/eslint-webpack-plugin#options
+     * Encore.enableEslintPlugin((options) => {
+     *      options.extensions.push('vue'); // to lint Vue files
      *      options.emitWarning = false;
      * });
-     *
-     * // configure Encore-specific options
-     * Encore.enableEslintLoader(() => {}, {
-     *     // set optional Encore-specific options, for instance:
-     *
-     *     // lint `.vue` files
-     *     lintVue: true
-     * });
      * ```
      *
-     * Supported options:
-     *      * {boolean} lintVue (default=false)
-     *              Configure the loader to lint `.vue` files
-     * ```
-     *
-     * @param {string|object|function} eslintLoaderOptionsOrCallback
-     * @param {object} encoreOptions
+     * @param {string|object|function} eslintPluginOptionsOrCallback
      * @returns {Encore}
      */
-    enableEslintLoader(eslintLoaderOptionsOrCallback = () => {}, encoreOptions = {}) {
-        webpackConfig.enableEslintLoader(eslintLoaderOptionsOrCallback, encoreOptions);
+    enableEslintPlugin(eslintPluginOptionsOrCallback = () => {}) {
+        webpackConfig.enableEslintPlugin(eslintPluginOptionsOrCallback);
 
         return this;
     }
@@ -1491,7 +1477,7 @@ class Encore {
      *
      * ```
      * Encore
-     *     .enableEslintLoader()
+     *     .enableEslintPlugin()
      *     .enableVueLoader()
      *     .configureLoaderRule('eslint', (loaderRule) => {
      *          loaderRule.test = /\.(jsx?|vue)/;

lib/WebpackConfig.js

@@ -119,7 +119,7 @@ class WebpackConfig {
         this.useReact = false;
         this.usePreact = false;
         this.useVueLoader = false;
-        this.useEslintLoader = false;
+        this.useEslintPlugin = false;
         this.useTypeScriptLoader = false;
         this.useForkedTypeScriptTypeChecking = false;
         this.useBabelTypeScriptPreset = false;
@@ -150,9 +150,6 @@ class WebpackConfig {
             version: null,
             runtimeCompilerBuild: null
         };
-        this.eslintOptions = {
-            lintVue: false,
-        };
         this.persistentCacheBuildDependencies = {};
 
         // Features/Loaders options callbacks
@@ -170,7 +167,7 @@ class WebpackConfig {
         this.watchOptionsConfigurationCallback = () => {};
         this.devServerOptionsConfigurationCallback = () => {};
         this.vueLoaderOptionsCallback = () => {};
-        this.eslintLoaderOptionsCallback = () => {};
+        this.eslintPluginOptionsCallback = () => {};
         this.tsConfigurationCallback = () => {};
         this.handlebarsConfigurationCallback = () => {};
         this.miniCssExtractLoaderConfigurationCallback = () => {};
@@ -184,7 +181,6 @@ class WebpackConfig {
             less: () => {},
             stylus: () => {},
             vue: () => {},
-            eslint: () => {},
             typescript: () => {},
             handlebars: () => {},
         };
@@ -802,33 +798,18 @@ class WebpackConfig {
         }
     }
 
-    enableEslintLoader(eslintLoaderOptionsOrCallback = () => {}, eslintOptions = {}) {
-        this.useEslintLoader = true;
-
-        if (typeof eslintLoaderOptionsOrCallback === 'function') {
-            this.eslintLoaderOptionsCallback = eslintLoaderOptionsOrCallback;
-        } else if (typeof eslintLoaderOptionsOrCallback === 'string') {
-            logger.deprecation('enableEslintLoader: Extending from a configuration is deprecated, please use a configuration file instead. See https://eslint.org/docs/user-guide/configuring for more information.');
+    enableEslintPlugin(eslintPluginOptionsOrCallback = () => {}) {
+        this.useEslintPlugin = true;
 
-            this.eslintLoaderOptionsCallback = (options) => {
-                options.extends = eslintLoaderOptionsOrCallback;
-            };
-        } else if (typeof eslintLoaderOptionsOrCallback === 'object') {
-            this.eslintLoaderOptionsCallback = (options) => {
-                Object.assign(options, eslintLoaderOptionsOrCallback);
+        if (typeof eslintPluginOptionsOrCallback === 'function') {
+            this.eslintPluginOptionsCallback = eslintPluginOptionsOrCallback;
+        } else if (typeof eslintPluginOptionsOrCallback === 'object') {
+            this.eslintPluginOptionsCallback = (options) => {
+                Object.assign(options, eslintPluginOptionsOrCallback);
             };
         } else {
-            throw new Error('Argument 1 to enableEslintLoader() must be either a string, object or callback function.');
-        }
-
-        // Check allowed keys
-        for (const key of Object.keys(eslintOptions)) {
-            if (!(key in this.eslintOptions)) {
-                throw new Error(`"${key}" is not a valid key for enableEslintLoader(). Valid keys: ${Object.keys(this.eslintOptions).join(', ')}.`);
-            }
+            throw new Error('Argument 1 to enableEslintPlugin() must be either an object or callback function.');
         }
-
-        this.eslintOptions = eslintOptions;
     }
 
     enableBuildNotifications(enabled = true, notifierPluginOptionsCallback = () => {}) {

lib/config-generator.js

@@ -22,7 +22,6 @@ const babelLoaderUtil = require('./loaders/babel');
 const tsLoaderUtil = require('./loaders/typescript');
 const vueLoaderUtil = require('./loaders/vue');
 const handlebarsLoaderUtil = require('./loaders/handlebars');
-const eslintLoaderUtil = require('./loaders/eslint');
 // plugins utils
 const miniCssExtractPluginUtil = require('./plugins/mini-css-extract');
 const deleteUnusedEntriesPluginUtil = require('./plugins/delete-unused-entries');
@@ -37,6 +36,7 @@ const vuePluginUtil = require('./plugins/vue');
 const friendlyErrorPluginUtil = require('./plugins/friendly-errors');
 const assetOutputDisplay = require('./plugins/asset-output-display');
 const notifierPluginUtil = require('./plugins/notifier');
+const eslintPluginUtil = require('./plugins/eslint');
 const PluginPriorities = require('./plugins/plugin-priorities');
 const stimulusBridge = require('./plugins/stimulus-bridge');
 const applyOptionsCallback = require('./utils/apply-options-callback');
@@ -400,16 +400,6 @@ class ConfigGenerator {
             }));
         }
 
-        if (this.webpackConfig.useEslintLoader) {
-            rules.push(applyRuleConfigurationCallback('eslint', {
-                test: eslintLoaderUtil.getTest(this.webpackConfig),
-                loader: require.resolve('eslint-loader'), //eslint-disable-line node/no-unpublished-require
-                exclude: /node_modules/,
-                enforce: 'pre',
-                options: eslintLoaderUtil.getOptions(this.webpackConfig)
-            }));
-        }
-
         if (this.webpackConfig.useTypeScriptLoader) {
             rules.push(applyRuleConfigurationCallback('typescript', {
                 test: /\.tsx?$/,
@@ -457,6 +447,8 @@ class ConfigGenerator {
 
         vuePluginUtil(plugins, this.webpackConfig);
 
+        eslintPluginUtil(plugins, this.webpackConfig);
+
         if (!this.webpackConfig.runtimeConfig.outputJson) {
             const friendlyErrorPlugin = friendlyErrorPluginUtil(this.webpackConfig);
             plugins.push({

lib/features.js

@@ -118,11 +118,11 @@ const features = {
         description: 'use Vue with JSX support'
     },
     eslint: {
-        method: 'enableEslintLoader()',
+        method: 'enableEslintPlugin()',
         // eslint is needed so the end-user can do things
         packages: [
             { name: 'eslint' },
-            { name: 'eslint-loader', enforce_version: true },
+            { name: 'eslint-webpack-plugin', enforce_version: true },
         ],
         description: 'Enable ESLint checks'
     },

lib/loaders/eslint.js renamed to lib/plugins/eslint.js

@@ -10,8 +10,9 @@
 'use strict';
 
 const WebpackConfig = require('../WebpackConfig'); //eslint-disable-line no-unused-vars
-const loaderFeatures = require('../features');
+const EslintPlugin = require('eslint-webpack-plugin'); //eslint-disable-line node/no-unpublished-require
 const applyOptionsCallback = require('../utils/apply-options-callback');
+const pluginFeatures = require('../features');
 
 function isMissingConfigError(e) {
     if (!e.message || !e.message.includes('No ESLint configuration found')) {
@@ -21,27 +22,32 @@ function isMissingConfigError(e) {
     return true;
 }
 
-module.exports = {
-    /**
-     * @param {WebpackConfig} webpackConfig
-     * @return {Object} of options to use for eslint-loader options.
-     */
-    getOptions(webpackConfig) {
-        loaderFeatures.ensurePackagesExistAndAreCorrectVersion('eslint');
-
-        const eslint = require('eslint'); // eslint-disable-line node/no-unpublished-require
-        const engine = new eslint.CLIEngine({
+/**
+ * Support for ESLint.
+ *
+ * @param {Array} plugins
+ * @param {WebpackConfig} webpackConfig
+ * @return {void}
+ */
+module.exports = function(plugins, webpackConfig) {
+    if (webpackConfig.useEslintPlugin) {
+        pluginFeatures.ensurePackagesExistAndAreCorrectVersion('eslint');
+
+        const { ESLint } = require('eslint'); // eslint-disable-line node/no-unpublished-require
+        const eslint = new ESLint({
             cwd: webpackConfig.runtimeConfig.context,
         });
 
         try {
-            engine.getConfigForFile('webpack.config.js');
+            (async function() {
+                await eslint.calculateConfigForFile('webpack.config.js');
+            })();
         } catch (e) {
             if (isMissingConfigError(e)) {
                 const chalk = require('chalk');
                 const packageHelper = require('../package-helper');
 
-                const message = `No ESLint configration has been found.
+                const message = `No ESLint configuration has been found.
 
 ${chalk.bgGreen.black('', 'FIX', '')} Run command ${chalk.yellow('./node_modules/.bin/eslint --init')} or manually create a ${chalk.yellow('.eslintrc.js')} file at the root of your project.
 
@@ -63,25 +69,15 @@ Install ${chalk.yellow('babel-eslint')} to prevent potential parsing issues: ${p
             throw e;
         }
 
-        const eslintLoaderOptions = {
-            cache: true,
-            emitWarning: true
+        const eslintPluginOptions = {
+            emitWarning: true,
+            extensions: ['js', 'jsx'],
         };
 
-        return applyOptionsCallback(webpackConfig.eslintLoaderOptionsCallback, eslintLoaderOptions);
-    },
-
-    /**
-     * @param {WebpackConfig} webpackConfig
-     * @return {RegExp} to use for eslint-loader `test` rule
-     */
-    getTest(webpackConfig) {
-        const extensions = ['jsx?'];
-
-        if (webpackConfig.eslintOptions.lintVue) {
-            extensions.push('vue');
-        }
-
-        return new RegExp(`\\.(${extensions.join('|')})$`);
+        plugins.push({
+            plugin: new EslintPlugin(
+                applyOptionsCallback(webpackConfig.eslintPluginOptionsCallback, eslintPluginOptions)
+            ),
+        });
     }
 };

package.json

@@ -66,11 +66,11 @@
     "chai-fs": "^2.0.0",
     "chai-subset": "^1.6.0",
     "core-js": "^3.0.0",
-    "eslint": "^6.7.0 || ^7.0.0",
-    "eslint-loader": "^4.0.0",
+    "eslint": "^7.0.0",
     "eslint-plugin-header": "^3.0.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-node": "^11.1.0",
+    "eslint-webpack-plugin": "^2.5.4",
     "file-loader": "^6.0.0",
     "fork-ts-checker-webpack-plugin": "^5.0.0 || ^6.0.0",
     "fs-extra": "^9.0.0",

test/WebpackConfig.js

@@ -1437,29 +1437,29 @@ describe('WebpackConfig object', () => {
             const config = createConfig();
             const callback = (loader) => {};
 
-            expect(config.loaderConfigurationCallbacks['eslint']).to.not.equal(callback);
+            expect(config.loaderConfigurationCallbacks['vue']).to.not.equal(callback);
 
-            config.configureLoaderRule('eslint', callback);
-            expect(config.loaderConfigurationCallbacks['eslint']).to.equal(callback);
+            config.configureLoaderRule('vue', callback);
+            expect(config.loaderConfigurationCallbacks['vue']).to.equal(callback);
         });
 
         it('Call method with a not supported loader', () => {
             const config = createConfig();
 
             expect(() => {
                 config.configureLoaderRule('reason');
-            }).to.throw('Loader "reason" is not configurable. Valid loaders are "javascript", "css", "images", "fonts", "sass", "less", "stylus", "vue", "eslint", "typescript", "handlebars" and the aliases "js", "ts", "scss".');
+            }).to.throw('Loader "reason" is not configurable. Valid loaders are "javascript", "css", "images", "fonts", "sass", "less", "stylus", "vue", "typescript", "handlebars" and the aliases "js", "ts", "scss".');
         });
 
         it('Call method with not a valid callback', () => {
             const config = createConfig();
 
             expect(() => {
-                config.configureLoaderRule('eslint');
+                config.configureLoaderRule('vue');
             }).to.throw('Argument 2 to configureLoaderRule() must be a callback function.');
 
             expect(() => {
-                config.configureLoaderRule('eslint', {});
+                config.configureLoaderRule('vue', {});
             }).to.throw('Argument 2 to configureLoaderRule() must be a callback function.');
         });
     });
@@ -1501,16 +1501,4 @@ describe('WebpackConfig object', () => {
             expect(() => config.enableIntegrityHashes(true, ['sha1', 'foo', 'sha256'])).to.throw('Invalid hash algorithm "foo"');
         });
     });
-
-    describe('enableEslintLoader', () => {
-        it('Should validate Encore-specific options', () => {
-            const config = createConfig();
-
-            expect(() => {
-                config.enableEslintLoader(() => {}, {
-                    notExisting: false,
-                });
-            }).to.throw('"notExisting" is not a valid key for enableEslintLoader(). Valid keys: lintVue.');
-        });
-    });
 });