search
HomeWeb Front-endJS TutorialUsing 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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Python vs. JavaScript: Performance and Efficiency ConsiderationsPython vs. JavaScript: Performance and Efficiency ConsiderationsApr 30, 2025 am 12:08 AM

The differences in performance and efficiency between Python and JavaScript are mainly reflected in: 1) As an interpreted language, Python runs slowly but has high development efficiency and is suitable for rapid prototype development; 2) JavaScript is limited to single thread in the browser, but multi-threading and asynchronous I/O can be used to improve performance in Node.js, and both have advantages in actual projects.

The Origins of JavaScript: Exploring Its Implementation LanguageThe Origins of JavaScript: Exploring Its Implementation LanguageApr 29, 2025 am 12:51 AM

JavaScript originated in 1995 and was created by Brandon Ike, and realized the language into C. 1.C language provides high performance and system-level programming capabilities for JavaScript. 2. JavaScript's memory management and performance optimization rely on C language. 3. The cross-platform feature of C language helps JavaScript run efficiently on different operating systems.

Behind the Scenes: What Language Powers JavaScript?Behind the Scenes: What Language Powers JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript runs in browsers and Node.js environments and relies on the JavaScript engine to parse and execute code. 1) Generate abstract syntax tree (AST) in the parsing stage; 2) convert AST into bytecode or machine code in the compilation stage; 3) execute the compiled code in the execution stage.

The Future of Python and JavaScript: Trends and PredictionsThe Future of Python and JavaScript: Trends and PredictionsApr 27, 2025 am 12:21 AM

The future trends of Python and JavaScript include: 1. Python will consolidate its position in the fields of scientific computing and AI, 2. JavaScript will promote the development of web technology, 3. Cross-platform development will become a hot topic, and 4. Performance optimization will be the focus. Both will continue to expand application scenarios in their respective fields and make more breakthroughs in performance.

Python vs. JavaScript: Development Environments and ToolsPython vs. JavaScript: Development Environments and ToolsApr 26, 2025 am 12:09 AM

Both Python and JavaScript's choices in development environments are important. 1) Python's development environment includes PyCharm, JupyterNotebook and Anaconda, which are suitable for data science and rapid prototyping. 2) The development environment of JavaScript includes Node.js, VSCode and Webpack, which are suitable for front-end and back-end development. Choosing the right tools according to project needs can improve development efficiency and project success rate.

Is JavaScript Written in C? Examining the EvidenceIs JavaScript Written in C? Examining the EvidenceApr 25, 2025 am 12:15 AM

Yes, the engine core of JavaScript is written in C. 1) The C language provides efficient performance and underlying control, which is suitable for the development of JavaScript engine. 2) Taking the V8 engine as an example, its core is written in C, combining the efficiency and object-oriented characteristics of C. 3) The working principle of the JavaScript engine includes parsing, compiling and execution, and the C language plays a key role in these processes.

JavaScript's Role: Making the Web Interactive and DynamicJavaScript's Role: Making the Web Interactive and DynamicApr 24, 2025 am 12:12 AM

JavaScript is at the heart of modern websites because it enhances the interactivity and dynamicity of web pages. 1) It allows to change content without refreshing the page, 2) manipulate web pages through DOMAPI, 3) support complex interactive effects such as animation and drag-and-drop, 4) optimize performance and best practices to improve user experience.

C   and JavaScript: The Connection ExplainedC and JavaScript: The Connection ExplainedApr 23, 2025 am 12:07 AM

C and JavaScript achieve interoperability through WebAssembly. 1) C code is compiled into WebAssembly module and introduced into JavaScript environment to enhance computing power. 2) In game development, C handles physics engines and graphics rendering, and JavaScript is responsible for game logic and user interface.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor