ESLint配置快速上手【无废话版】

🐶在前端开发的日常工作中，ESLint无疑是我们经常使用的工具之一。但很多时候，我们可能只是匆匆安装，然后让它默默地为我们检查代码质量，而没有去细究它的具体配置。之前花时间简单研究了一下总结了学习笔记，在这里分享一下。

简介

ESLint是一个针对JS的代码风格检查工具，当不满足其要求的风格时，会给予警告或错误

官网：https://eslint.org/

搜了一个中文网：https://eslint.nodejs.cn/

使用

ESLint通常配合编辑器使用

1. 在vscode中安装ESLint

![image.png](https://img-blog.csdnimg.cn/img_convert/77e23b36490178932ec48c31277fc821.png

该工具会自动检查工程中的JS文件

检查的工作交给eslint库，如果当前工程没有，则会去全局库中查找，如果都没有，则无法完成检查

另外，检查的依据是eslint的配置文件.eslintrc，如果找不到工程中的配置文件，也无法完成检查

2. 安装eslint

npm init @eslint/config@latest

3. 配置文件

eslint会识别工程中的.eslintrc.*文件，也能够识别package.json中的eslintConfig字段

一些常用配置项

env

配置代码的运行环境
Configuring ESLint - ESLint中文

• browser：代码是否在浏览器环境中运行

• es6：是否启用ES6的全局API，例如Promise等

{
  "env": {
    "browser": true,
    "es6": true
  },
}

parserOptions

该配置指定eslint对哪些语法的支持

• ecmaVersion: 支持的ES语法版本
• sourceType
  • script：传统脚本
  • module：模块化脚本

parser

eslint的工作原理是先将代码进行解析，然后按照规则进行分析

eslint 默认使用Espree作为其解析器，你可以在配置文件中指定一个不同的解析器。

globals

配置可以使用的额外的全局变量

{
  "globals": {
    "var1": "readonly",
    "var2": "writable"
  }
}

配置好的全局变量能通过检查，但检查和运行是两个概念！没什么关系！

eslint支持注释形式的配置，在代码中使用下面的注释也可以完成配置，对整个配置没影响

/* global var1, var2 */
/* global var3:writable, var4:writable */

extends

该配置继承自哪里

它的值可以是字符串或者数组

比如：

{
  "extends": "eslint:recommended"
}

表示没有指定的配置，使用eslint推荐的规则

ignoreFiles

排除掉某些不需要验证的文件

注意要放到根目录！

.eslintignore

dist/**/*.js
node_modules

rules

eslint规则集

每条规则影响某个方面的代码风格

每条规则都有下面几个取值：

• off 或 0 或 false: 关闭该规则的检查

• warn 或 1 或 true：警告，不会导致程序退出

• error 或 2：错误，当被触发的时候，程序会退出

*推荐使用off/warn/error, 0/1/2，因为true/false在某些规则不支持

示例

{
  "rules": {
    "eqeqeq": false 
  }
}

除了在配置文件中使用规则外，还可以在注释中使用：

/* eslint eqeqeq: "off", curly: "error" */

小技巧：

可以看规则参考：https://eslint.nodejs.cn/docs/latest/rules/

表示推荐使用

表示可通过 --fix 命令行选项自动修复

ESLint插件就可以配置自动修复

首选项-设置-eslint，在settings.json文件中添加配置即可