Using eslint configuration in webpack (detailed tutorial)

This article mainly introduces the detailed explanation of the eslint configuration introduced by webpack. Now I will share it with you and give you a reference.

Using eslint in webpack

First of all, to make webpack support eslint, you need to install eslint-loader. The command is as follows:

npm install --save-dev eslint-loader

In webpack Add the following code to .config.js:

{
  test: /\.js$/,
  loader: 'eslint-loader',
  enforce: "pre",
  include: [path.resolve(__dirname, 'src')], // 指定检查的目录
  options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine 
    formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范
  }
}

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

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

npm install --save-dev eslint

Finally, if the project wants to use those eslin rules, 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 introduction to eslint has been completed.

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

eslint configuration items

1. root limits the usage scope of the configuration file

2. parser specifies the eslint parser

3. parserOptions sets parsing Device options

4. extends specifies the eslint specification

5. plugins refers to third-party plug-ins

6. env specifies The host environment in which the code runs

7. rules Enable additional rules or override the default rules

8. globals Custom global variables declared in the code

When we use eslint, are the rules configuration items in the configuration file indispensable?

The answer is yes. However, we don’t need to customize reules. We can use third-party ones. Here we will use the extends configuration item.

extends

We can use the ones officially recommended by eslint, or we can use those provided by some big companies, such as: aribnb, google, standard.

We generally use third parties in development.

Official recommendation

Just add the following code in .eslintrc.js:

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

For details, please refer to the official rule table

Third-party sharing

To use third-party sharing, we generally need to install the relevant plug-in code as follows:

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

Add the following code in .eslintrc.js:

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

Use these third parties extension, sometimes we need to update some plug-ins, such as standard: eslint-plugin-import

Don’t panic, we just need to install these plug-ins step by step according to the error prompts.

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

Configuration rules

Add rules in 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 be one of the following:

1. "off" or 0 - turns off the rule

2. "warn " or 1 - treat the rule as a warning (will not affect the exit code)

3. "error" or 2 - treat the rule as an error (exit code is 1)

These rules are generally divided into two categories:

1. Add those not found in the default or third libraries

2. Override the default or third library

There may be some other files in our project that also need to be formatted, such as: html, vue, react, etc. For the processing of these files , we need to introduce third-party plug-ins.

plugins (html)

Install eslint-plugin-html, the command is as follows:

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

This plug-in will prompt simulated browsing between module scripts This does not apply to module scripts as this does not apply to module scripts.

This plug-in can also extend files, such as: .vue, .jsx

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

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

For this kind of use eslint We can use eslint --ext .html,.vue src to detect files with -pulgin-html extension. If we want to detect while writing during development, we can use the loader of the corresponding file to process it. Then execute npm run dev to achieve the function. The function of checking while writing.

Sometimes 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.

Limit the scope of use (root: true)

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

{
  "root": true
}

If we do not set it, it will continue to search until the directory is updated. If there is a configuration file in the updated directory, it will use the root directory, which will cause the current configuration directory configuration to fail. function problem.

In development, we need to use different parsers for different situations, and the one we commonly use is babel-eslint.

parser (specify parser)

babel-eslint 解析器是一种使用频率很高的解析器，因为现在很多公司的很多项目目前都使用了es6，为了兼容性考虑基本都使用babel插件对代码进行编译。而用babel编译后的代码使用 babel-eslint 这款解析器可以避免不必要的麻烦。

babel-eslint 安装命令：

npm install --save-dev babel-eslint

在 .eslintrc.js 配置文件中添加如下配置项代码：

parser: 'babel-eslint',

如果你使用的默认解析器的话，且在代码中使用了浏览器有兼容性的问题的js新特性，使用webpack编译就会出现问题，这时我们一般装最新的eslint或者安装是使用 babel-eslint 来解决问题。

env（环境）

在 .eslintrc.js 中添加如下代码：

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

指定了环境，你就可以放心的使用它们的全局变量和属性。

global

指定全局变量。

在 .eslintrc.js 中添加如下代码：

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在JS中如何改变单物体透明度

在JS中如何实现通过拖拽改变物体大小

在vue中使用cli如何实现重构多页面脚手架

The above is the detailed content of Using eslint configuration in webpack (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!