解析ESLint配置规则、插件和个性化设置

wakaka378
3,947 阅读13分钟

引言

什么是Eslint

ESLint是一个流行的开源JavaScript代码检查工具，用于帮助识别和报告JavaScript代码中潜在的问题和不一致之处。它分析你的代码，检查常见的错误、编码风格违规和潜在的bug，并提供警告和错误消息，帮助你编写更干净、更可靠的代码。

ESLint具有高度可配置性，允许你定义自己的编码风格规则，或者选择各种预配置的规则集（如Airbnb、Google、Standard）。你可以根据项目的具体需求自定义ESLint，强制执行一致的代码风格，及早捕捉错误。

为啥用它

在企业级项目开发中，项目都会使用ESLint来规范团队开发。而在项目工程化中，ESLint更是不可缺少的一部分，很多自动化流程中也会使用它来校验代码，那为啥都喜欢用ESLint呢？我觉得有以下几点：

  1. 代码质量提升：ESLint可以检测出代码中的潜在问题和错误，如未定义的变量、无法访问的代码、重复的代码块等。它可以帮助你提前发现这些问题并进行修复，从而提高代码的质量和可靠性。
  2. 编码风格统一：ESLint可以根据定义的规则来强制执行一致的编码风格。这有助于整个团队在编写代码时遵循相同的规范，使代码更具可读性，并减少由于不一致的编码风格而引发的问题。
  3. 早期错误检测：ESLint可以在代码编写的早期捕捉到一些常见的错误和潜在问题。通过在开发过程中及时发现这些问题，你可以更快地进行修复，避免将错误传递到后续阶段，从而减少调试和修复错误所需的时间和精力。
  4. 提高开发效率：ESLint可以自动检测和报告问题，而无需手动检查代码。这样可以节省开发人员的时间和精力，特别是在大型项目或团队合作中。此外，ESLint还可以与其他工具和编辑器集成，提供实时的代码检查和提示，帮助快速发现并解决问题。

安装使用

安装ESLint

在项目里安装

npm i eslint -D  
or
cnpm i eslint -D
or
yarn add eslint -D

Node版本^12.22.0、^14.17.0 或 >=16.0.0

Eslint扩展安装

在vscode的扩展面板中直接搜索eslint，然后安装第一个即可。

自动保存修复

每次修改完代码，可以在保存的时候对代码进行修复，依次点击 文件 > 首选项 > 设置，打开settings.json文件

然后将下面代码添加进去，保存完后重启编辑器

"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
}

生成配置文件

这一步可以手动创建配置文件，但更推荐使用init命令初始化配置，免去了很多手动配置操作。

npx eslint --init

按照提示 生成.eslintrc.json配置文件

? How would you like to use ESLint? … 		// 怎样使用ESLint
  To check syntax only	// 只检查语法
❯ To check syntax and find problems		// 检查语法并查找错误
  To check syntax, find problems, and enforce code style		// 检查语法 找到错误并且强制执行

? What type of modules does your project use? …   // 项目使用类型的模块
❯ JavaScript modules (import/export)		// es6模块
  CommonJS (require/exports)  	// commonJS模块
  None of these		// 都不使用
  
  
? Which framework does your project use? … 		// 项目使用哪种框架
❯ React
  Vue.js
  None of these
  
? Does your project use TypeScript? › No / Yes		// 是否在项目中使用Typescript
  
? Where does your code run? … 		// 项目运行环境
✔ Browser
✔ Node
  
? What format do you want your config file to be in? … 		// 你希望使用哪种格式？
❯ JavaScript
  YAML
  JSON
  
? How would you like to define a style for your project? … 		// 喜欢什么风格的代码
  Use a popular style guide		// 流行的代码风格
❯ Answer questions about your style			// 回答问题生成		这一项会让你选择ESLint相对应的规则
  
eslint-plugin-vue@latest
✔ Would you like to install them now with npm? · No / Yes		// 现在使用用npm安装他们  这里会根据你选择的框架

也可以直接在本地创建一个.eslintrc.json文件，将配置复制粘贴进去。或者直接在package.json文件中增加eslintConfig字段进行配置。

{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "plugins": ["example"],
        "env": {
            "example/custom": true
        },
      	"rules": {
    		}
    }
}

配置文件格式可以不同，但ESLint只会使用一个配置文件，优先级如下

.eslintrc.js
.eslintrc.cjs
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
package.json

忽略指定文件和目录

如果项目中有些文件或者目录不希望让ESLint去做校验，可以在根目录下创建.eslintignore文件，来告诉ESLint跳过校验，例如忽略dist文件中的代码

dist/*

public/*.js

除了上面这种方式，还可以通过在代码文件中写入注释来告诉ESLint是否需要校验代码

/* eslint-disable */		// 文件最顶部  整个文件都不校验
console.log('Hello Word')

/* eslint-disable */		
console.log('Hello Word')
/* eslint-enable */		// 忽略被注释包起来的代码

  

/* eslint-disable no-console */
console.log('Hello Word')		// 全局针对指定规则进行禁用



// 只针对当前行  eslint-disable-next-line 后跟规则

console.log('Hello Word')	 // eslint-disable-next-line no-console

// eslint-disable-next-line no-console 
console.log('Hello Word')

ESLint基础配置

环境配置（env）

指定代码运行的宿主环境，可以同时定义多个，如启用NodeJs环境、浏览器环境、ES6环境，直接将环境设置为true。

  • browser - 浏览器环境中的全局变量。
  • node - Node.js 全局变量和 Node.js 作用域。
  • commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
  • shared-node-browser - Node.js 和 Browser 通用全局变量。
  • es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
  • worker - Web Workers 全局变量。
  • amd - 将 require() 和 define() 定义为像 amd 一样的全局变量。
  • mocha - 添加所有的 Mocha 测试全局变量。
  • jasmine - 添加所有的 Jasmine 版本 1.3 和 2.0 的测试全局变量。
  • jest - Jest 全局变量。
  • phantomjs - PhantomJS 全局变量。
  • protractor - Protractor 全局变量。
  • qunit - QUnit 全局变量。
  • jquery - jQuery 全局变量。
  • prototypejs - Prototype.js 全局变量。
  • shelljs - ShellJS 全局变量。
  • meteor - Meteor 全局变量。
  • mongo - MongoDB 全局变量。
  • applescript - AppleScript 全局变量。
  • nashorn - Java 8 Nashorn 全局变量。
  • serviceworker - Service Worker 全局变量。
  • atomtest - Atom 测试全局变量。
  • embertest - Ember 测试全局变量。
  • webextensions - WebExtensions 全局变量。
  • greasemonkey - GreaseMonkey 全局变量。
{
  "env": {
    "browser": true,
    "es6": true
	}
}

在插件中开启使用某种特定环境，并且只希望在插件下生效不影响全局，先要确保plugins中有插件，然后在配置env时，变量名前通过/添加插件名

{
    "plugins": ["example"],
    "env": {
        "example/node": true
    }
}

全局变量（globals）

在ESLint中，可以使用globals配置项来定义全局变量。这些全局变量是在代码中声明但未明确定义的变量，ESLint可以通过配置全局变量来避免将其视为未定义的变量。

  • 可读不可写 : readonly| false
  • 可读可写: writable | true
// 在js文件中
/* global var1:writable, var2:writable */

// 在eslint配置文件中
"globals": {
    "var1": "writable",
    "var2": "readonly"
}

// 也可以使用字符串'off'禁用全局变量

"globals": {
  "Promise": "offf"
}

解析器（parser）

在ESLint中，解析器（parser）是用于分析和理解你的代码的工具。解析器将代码转换为抽象语法树（Abstract Syntax Tree，AST），以便ESLint能够在其上执行静态分析和规则检查。

ESLint支持多个解析器，每个解析器都有自己的特点和适用范围。以下是一些常见的解析器：

  • Espree：Espree是一个轻量级的、快速的解析器，由ESLint团队开发。它基于Esprima，并与ESLint紧密集成。Espree支持ES5、ES6和ES7等多个ECMAScript版本。
  • Babel-ESLint：Babel-ESLint使用Babel进行代码转换，以支持更新的JavaScript语法特性。它可以处理ES6+的代码，并将其转换为ES5语法，然后交由ESLint进行检查。
  • @typescript-eslint/parser：如果项目使用TypeScript，@typescript-eslint/parser是一个用于解析TypeScript代码的解析器。它可以处理TypeScript的语法和类型注解，并与@typescript-eslint插件集成。
  • vue-eslint-parser：vue-eslint-parser是专门用于解析Vue.js单文件组件的解析器。它能够解析Vue模板、JavaScript和样式块，并提供对Vue特定语法的支持。
{
  "parser": "@typescript-eslint/parser",
}

解析器选项（parserOptions）

解析器选项（parserOptions）用于配置解析器的行为和语法选项。这些选项可以帮助解析器正确地解析代码，并提供更准确的静态分析和规则检查。

  • ecmaVersion：指定所使用的ECMAScript版本。可以设置为一个数字，表示要使用的ECMAScript版本号。
  • sourceType：指定代码的模块类型。可以设置为 script（默认）或 module，表示代码是一个独立的脚本文件还是一个ECMAScript模块。
  • ecmaFeatures：启用一些特定的语言功能。这是一个对象，其中的属性用于启用或禁用特定的语言功能。
   "parserOptions": {
     "ecmaVersion": "6",	// 默认设置为 3，5（默认）， 你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）或 2019 (same as 10)
     "sourceType": "module", // 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
     "ecmaFeatures": {  // 使用的额外的语言特性  如jsx、tsx
       "jsx": true,
       "tsx": true
     }
  },

共享配置（extends）& 插件（plugins）

extedns

用来继承别人写好的eslint配置规范，它是一个数组可以接受多个规范，继承下来的规则配置，可以在rules属性厦门进行扩或者覆盖规则

extends 属性值可以是：

  • 指定配置的字符串(配置文件的路径、可共享配置的名称）
  • 字符串数组：每个配置继承它前面的配置

recommended

表示引入ESLint的核心功能，并且报告一些常见的共同错误

"extends": "eslint:recommended",

all

引入当前版本的所有核心规则，这些规则会随着ESLint版本进行改变

"extends": "eslint:all"

共享配置

可共享的配置 是一个 npm 包，它输出一个配置对象，是别人已经整理好的规范配置，在使用前需要确保你本地已经安装这个包。如eslint-config-alloy，包含了一组规则集合，在使用的时候可以忽略掉前缀eslint-config-，

"extends": ["eslint:recommended", "alloy"],

plugin插件配置

plugin是一个 npm 包，通常输出规则。一些插件也可以输出一个或多个命名的 配置。在使用前确认这个包已经在本地安装。如插件@typescript-eslint

此时的extends属性由下组成

  • plugin:
  • 包名（可以省略前缀）
  • /
  • 配置名recommended
"plugins": ["@typescript-eslint"],
"extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],

file文件

属性值可以是到基本配置文件的绝对路径，也可以是相对路径。ESLint 解析一个相对于使用它的配置文件的基本配置文件的相对路径。

 "extends": [
     "./node_modules/coding-standard/eslintDefaults.js",
     "./node_modules/coding-standard/.eslintrc-es6",
     "./node_modules/coding-standard/.eslintrc-jsx"
 ],

plugins

ESLint 支持使用第三方插件，许扩展ESLint的功能，添加额外的规则、解析器、预处理器等在使用插件之前，你必须使用 npm 安装它，在使用时插件名称可以省略eslint-plugin- 前缀。

"plugins": [
  "vue",
  "@typescript-eslint"
]

插件的解析是相对于配置文件的。换句话说，ESLint 将按照用户在配置文件中运行 require('eslint-plugin-vue') 获得的方式加载插件。

extends和plugins的区别

  • 命名不一样，extends中可以是以eslint-config-为前缀，plugins都是以eslint-plugin开头
  • 插件和配置的区别，当eslint提供当选项配置中没有，就可以通过plugin自定义一套规则。如eslint-plugin-vue。而extend提供的是eslint现有的一套配置，extend中集成的配置规范，都是基于eslint基础之上。

覆盖overrides

覆盖一组文件的配置文件中的规则，可以通过overrides和files来实现

"overrides": [
    {
      "files": ["*-test.js","*.spec.js"],
      "rules": {
        "no-unused-expressions": "off"
      }
    }
  ]

规则（rules）

ESLint 附带有大量的规则，用于定义代码的规范和风格约定。规则告诉ESLint应该对代码中的哪些模式发出警告或错误。可以根据项目需求自定义规则，也可以使用预定义的规则集。

  • off | 0 :表示关闭规则。
  • warn | 1 :表示将该规则转换为警告。
  • error | 2 :表示将该规则转换为错误。

更多规则

在文件中通过注释来配置忽略

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

命令行使用

eslint命令参数，其中options可选，后面跟文件或者目录。

eslint [options] [file|dir|glob]*
// 比如
eslint file1.js file2.js
eslint app/**

具体options可以去官网查看，这里就举一些常用到的

// 单独校验一个文件
npx eslint index.js

// 多个文件
npx eslint file1.js  file2.js

// 目录
npx eslint src

// 多目录
npx eslint src script

// 多种类型文件 中间用,分割 后面跟文件类型 最后可以写目录 默认为.js文件类型
npx eslint --ext .js,.vue src

// 只针对error级别错误
npx eslint --quiet src

// 修复问题 使用该命令会自动对代码进行修复 
npx eslint --fix src

// 缓存  只对有改变的文件进行操作
npx eslint --cache src


// 启用/禁用彩色输出
npx eslint --no-color/--color index.js

// 设定检查报告输出的格式为html  也可以为json

// 这个选项指定了控制台的输出格式  需要安装插件 npm install -D eslint-formatter-codeframe
// https://eslint.bootcss.com/docs/user-guide/formatters/
npx eslint -f html index.js

// 通过交互式命令行界面创建一个新的ESLint配置文件
npx eslint --init

// 该选项将调试信息输出到控制台。在 ESLint 的命令行中加入这个标志，以便在命令运行时获得额外的调试信息。
npx eslint --debug test.js

通常会在package.json文件中的script下配置一个lint校验的命令，运行命令就可以对项目代码进行校验。比如在git提交代码时，运行lint命令校验代码没问题后在进行提交。

"scripts": {
  	"lint": "npx eslint --fix --cache --ext .js,.vue src"
},

总结

ESLint是一个强大的工具，可以帮助你提高代码质量、维持一致的代码风格，并发现潜在的问题和错误。使用ESLint可以提高代码的可读性、可维护性，并促进团队间的协作和一致性。

它的作用不单单是在开发阶段帮助你检查、修复项目中的代码错误，在整个项目工程化里，很多地方会用到它来更好的规范团队项目，如使用husky在commit前校验代码规范，不允许💩代码提交。配合prettier，可以自动化修复代码风格等等。

后续会有更多基于ESLint的工程化文章分享，和大家分享我是如何在团队里推动并落地实行这一套企业级的项目工程化开发规范。

avatar
文章
阅读
粉丝