At the end of the last section, we asked how we could control the uniformity of our code style and avoid some silly mistakes. In this section we’ll look at a solution to both of these problems: ESLint syntax checking.

background

In the daily development process, projects are usually multi-person collaborations. In order to keep the code uniform and standardized, we need to use ESLint to do this. To do this, we need to use esLint-Loader as well as ESLint.

The installation

yarn add -D eslint eslint-loader
Copy the code

The basic configuration

After installation, add the following configuration to webpack.config.js:

/ *... * /
module: {
  rules: [{test: /\.js$/,
        exclude: /node_modules/.// Node_modules need to be ignored, otherwise the contents will also be checked
        loader: 'eslint-loader'.options: {}}]}/ *... * /
Copy the code

After configuration, ESLint also needs to know what the rules are. At this point, we need to configure the eslintConfig property in package.json or add an.eslintrc file in the root directory to configure esLint rules. However, manually configuring the rules is obviously cumbersome, so we can use a third-party tool to do this. Here we use the Airbnb configuration. To use Airbnb’s ESLint rules, we need to install several plugins: eslint-config-arbnb-base and eslint-plugin-import.

yarn add -D eslint-config-airbnb-base  eslint-plugin-import
Copy the code

Then add the following configuration to package.json:

"eslintConfig": {
  "extends": "airbnb-base"
}
Copy the code

Or add to the.eslintrc file:

 "extends": "airbnb-base"
Copy the code

This inherits airbnb’s ESLint configuration. When repacking or running, the console will give the corresponding error message:

We can also add VScode, or ESlint plugins from other ides that our friends use to aid in our daily development. Here, I use VScode. If you use the same IDE as me, I recommend installing this plug-in:

After installing and enabling the plugin, we can see the corresponding prompt from ESLint in the editor:

When we move the cursor over the wavy line and click the Quick Fix option in the window that pops up, the plugin also provides some Quick fixes to make the Fix even easier:

Auto repair configuration

If we need to fix these problems automatically, we can add a configuration:

module: {
  rules: [{test: /\.js$/,
      exclude: /node_modules/.// Node_modules need to be ignored, otherwise the contents will also be checked
      loader: 'eslint-loader'.options: {
          fix: true // Automatically fixes some ESLint issues}}}]Copy the code

This will automatically fix some problems. But not all problems can be fixed automatically, some still need to be fixed manually:At this point, we just need to follow the instructions given one by one.

Work with babel-loader

So far, we’ve seen how ESlint can be used. In daily development, wouldn’t it be nice to check your code and then use Babel-Loader to convert it? (Manual funny) How to use it with the babel-loader mentioned in the previous section? Loaders are executed from left to right, from bottom to top, and from back to front. So if we need to check the code before packaging it, eslint-loader needs to be configured after babel-loader:

// Here we write two loaders together because they are all matching JS files
// Note the change in the format of the loader, which used to write directly
module: {
  rules: [{// Match.js files
      test: /\.js$/.// Node_modules need to be ignored, otherwise the contents will also be checked, which will reduce the performance of packaging
      exclude: /node_modules/,
      use: [
      	/ / use the Babel - loader
        {
          loader: 'babel-loader'.// Loader configuration
          options: {
            presets: ['@babel/preset-env'],}},// With eslint-loader, configure write after babel-loader and execute first
        {
          loader: 'eslint-loader'.options: {
            fix: true,},},],},Copy the code

After the configuration is complete, we can implement the first code check, syntax conversion

trailer

In conjunction with the content of the previous section, we introduced some basic operations of WebPack when processing JS files, including syntax conversion and syntax checking. After introducing JS, in the next section, we will take a look at the basic operations webPack does when handling CSS files. Wait and see.