Introduction of eslint for webpack and webpackeslint

Introduction of eslint for webpack and webpackeslint

Use eslint in webpack

To enable webpack to support eslint, install eslint-loader. The command is as follows:

npm install --save-dev eslint-loader

Add the following code to webpack. config. js:

{Test :/\. js $/, loader: 'eslint-loader ', enforce: "pre", include: [path. resolve (_ dirname, 'src')], // specify the check DIRECTORY options: {// The configuration item parameters here will be passed to the CLIEngine formatter of eslint: require ('eslint-friendly-formatter ') // specify the format of the Error Report }}

Note: formatter is stylish by default. If you want to use a third party, you can install this plug-in, as shown in eslint-friendly-formatter in the example above.

Second, if you want webpack to have eslint capabilities, you need to install eslint. The command is as follows:

npm install --save-dev eslint

Finally, to use the eslin rules for the project, you can create a configuration file '. eslintrc. js'. The Code is as follows:

module.exports = {  root: true,    parserOptions: {    sourceType: 'module'  },  env: {    browser: true,  },  rules: {    "indent": ["error", 2],    "quotes": ["error", "double"],    "semi": ["error", "always"],    "no-console": "error",    "arrow-parens": 0  }}

In this way, a simple webpack has been introduced into eslint.

Here I will talk about the use of eslintrc. js configuration, For details, please refer to the http://eslint.cn/docs/user-guide

Eslint configuration item

1. Root limits the scope of use of the configuration file
2. Parser specifies the eslint parser
3. ParserOptions set parser options
4. Extends specified eslint Specification
5. Plugins references third-party plug-ins
6. Env specifies the host environment for Code Execution
7. Rules enables additional rules or overwrites default rules
8. Globals declares custom global variables in the code

When we use eslint, is the rules configuration item in the configuration file indispensable?

The answer is yes. However, we do not need to customize reules. We can use a third party. here we need to use the extends configuration item.

Extends

We can use eslint official recommendations, or some large companies, such as aribnb, google, and standard.

We generally use third-party products during development.

Official recommendation

You only need to add the following code in. eslintrc. js:

extends: 'eslint:recommended',extends: 'eslint:all',

For details, refer to the official rule table.

Third-party sharing

For third-party sharing, we generally need to install the relevant plug-in Code as follows:

npm install --save-dev eslint-config-airbnb // bnbnpm install --save-dev eslint-config-standard // standard

Add the following code to. eslintrc. js:

extends: 'eslint:google',// orextends: 'eslint:standard',

When using these third-party extensions, sometimes we need to update some plug-ins, such as standard: eslint-plugin-import

Don't worry, we just need to install these plug-ins step by step according to the error prompt.

Although these third-party extensions are good, sometimes we need to define some more personalized rules and we need to add rules configuration items.

Configure rules

Add rules to the. eslintrc. js file. The Code is as follows:

{  "rules": {    "semi": ["error", "always"],    "quotes": ["error", "double"]  }}

"Semi" and "quotes" are the names of rules in ESLint. The first value is the error level, which can make one of the following values:

1. "Off" or 0-Disable the rule
2. "Warn" or 1-treat the rule as a warning (the exit code is not affected)
3. "Error" or 2-view the rule as an error (exit code 1)

These rules are generally divided into two types:

1. Add
2. Overwrite

In our project, some other files may also need to be formatted, such as html, vue, and react. for processing these files, we need to introduce third-party plug-ins.

Plugins (html)

Install eslint-plugin-html with the following command:

npm install --save-dev eslint-plugin-html

This plug-in will remind module scripts to simulate the sharing of global variables by browsers, because this is not suitable for module scripts.

This plugin can also expand files, such as. vue and. jsx.

In. eslintrc. js, add the following configuration items:

settings: {  'html/html-extensions': ['.html', '.vue'],  'html/indent': '+2',},

Eslint -- ext. html ,. vue src performs detection. If you want to write and detect data while developing, you can use the loader of the corresponding file for processing. Then run npm run dev to implement the function. The write-side detection function.

During development, we may use different. eslintrc. js files in different directories of the same project as needed. In this case, we need to use the configuration item root.

Limits the scope of use (root: true)

If we want to use different. eslintrc in different directories, we need to add the following configuration items to the directory:

{  "root": true}

If it is not set, it will continue to search for more directories. If there is a configuration file in the directory, it will use the root directory, this will cause the current directory configuration to fail.

In development, we need to use different Resolvers for different situations, and we usually use babel-eslint.

Parser (specify parser)

Babel-eslint parser is a frequently used parser, because many companies currently use es6 for many projects, for compatibility considerations, the babel plug-in is basically used to compile the code. The Code Compiled with babel uses the babel-eslint parser to avoid unnecessary troubles.

Babel-eslint installation command:

npm install --save-dev babel-eslint

Add the following configuration item code to the. eslintrc. js configuration file:

parser: 'babel-eslint',

If you use the default parser and use the new js features with compatibility issues in the browser in the code, problems will occur when you use webpack for compilation, in this case, we usually install the latest eslint or use babel-eslint to solve the problem.

Env (Environment)

Add the following code to. eslintrc. js:

"env": {  "browser": true, //  "node": true //}

With the environment specified, you can safely use their global variables and attributes.

Global

Specify global variables.

Add the following code to. eslintrc. js:

"globals": {  "var1": true,  "var2": false }

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.