preface

Eslint is an essential part of building a mature project template using WebPack. Eslint can be used in one of two ways:

  1. Don’t combinewebpackTo use, only the corresponding configurationnpm scriptsIn this way, errors cannot be found in time during the project development. In the final submission, format verification and modification may resultreworkOf course, noeslintError prompt, can be developed quickly, thinking is not easy to be interrupted by the format problem;
  2. In combination withwebpackThe simple configuration is as follows: 
    module.exports = {
  // ...
  module: {
    rules: [{test: /.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'.options: {
          // eslint options (if necessary)}},],},// ...
};
Copy the code

Is eslint-Loader deprecated?

When I opened it skillfullyeslint-loaderI knew something was wrong when I saw a big red sign as I was filing.Indeed,eslint-loaderAbout to be scrapped.

Eslint-webpack-plugin yes, I’m that guy

However, with my English, I used eslint-webpack-plugin and found that the number of downloads of eslint-webpack-plugin was already high.

So many people already know, alas, that I go?? .

What is the eslint-webpack-plugin?

Look at the documentation.

Before:

module.exports = {
  // ...
  module: {
    rules: [{test: /.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'.options: {
          // eslint options (if necessary)}},],},// ...
};
Copy the code

After:

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ...
  plugins: [new ESLintPlugin(options)],
  // ...
};
Copy the code

Options for the eslint-webpack-plugin are basically the same as those for the eslint-Loader, including that we often use eslint-Loader friendly to display error formatter, Eslint – friendly – the formatter, etc.

Welcome to discuss

Why should the eslint-webpack-plugin be deprecated? Doesn’t the way to use loader smell good? Why change to using plugins? Welcome to the discussion.

Reference documentation

  1. www.npmjs.com/package/esl…
  2. www.npmjs.com/package/esl…
  3. www.npmjs.com/package/esl…