前端工程化-ESLint-API篇

简介

在上面文章介绍了怎么安装eslint ，在本篇文章中介绍eslint的配置文件

ESLint的API

1、env 决定了当前环境下可使用的全局变量

browser -浏览器环境中的全局变量。

node - Node.js 全局变量和Node. js作用域。

commonjs - CommonJS 全局变量和CommonJS 作用域(用于Browserify/WebPack 打包的只在浏览器中运行的代码)。

shared-node -browserNode.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 全局变量。

phantomjsPhantomJS全局变量。

protractor - Protractor全局变量。

qunit - QUnit 全局变量。

jquery - jQuery 全局变量。

prototypejs - Prototype.js 全局变量。

shelljs - ShelLlJS 全局变量。

meteor - Meteor全局变量。

mongo - MongoDB 全局变量。

applescript - AppLeScript 全局变量。

nashornJava 8 Nashorn全局变量。

serviceworker - Service Worker全局变量。

atomtest - Atom 测试全局变量。

embertest - Ember测试全局变量。

webextensions - WebExtensions 全局变量。

greasemonkey - GreaseMonkey 全局变量

这些环境并不是互斥的，你可以一次定义多个，比如：

env: {
		        browser: true,//表示运行在浏览器环境 可以在代码中使用document和window对象
		        es2020: true
},

2、extends 继承共享配置

在项目当中需要共享一个eslint配置，你就可以配置一个公共的配置文件或者是公共模块，然后在这个属性值里面使用
extends: [
   'standard'
],

3、parserOptions

用来设置语法解析器，是否允许使用某个ECMAScript版本的语法
parserOptions 支持ECMAScript最新语法 它影响的只是语法检测并不是代表某个成员是否可用 如下
	parserOptions: {
	        ecmaVersion: 11//支持ES11语法
	 }

4、rules 这个属性决定 配置某个校验规则的开启或者是关闭

具体使用方法设置内置的属性名,具体的属性可以去eslint官方看文档 属性值有3个 分别是 off,warn,error
	"off"或者0，不启用这个规则
	"warn"或者1，出现问题会有警告
	"error"或者2，出现问题会报错

5、globals 在最新的版本中已经没有体现了 用处就是额外的声明

具体用处就是额外的声明，在代码中可以使用的全局成员 例如在项目中全局使用jQuery
	globals: {
	        jquery: 'readonly'//这样设置可以直接在代码中使用jQuery也不会报错
	}
依据具体的需求完成相应的配置

ESLint配置注释

这里呢我们来看一下ESLint配置注释什么的内容，简单说一下，其实就可以理解为，

直接通过注释的方式将校验规则写在我们的脚本文件当中。然后呢再去执行代码的校验，

那为什么要这么做呢？原因也很简单。我们在实际的开发过程中，如果使用ESLint，

难免呢就会遇到一两个必须要违反配置规则的情况。那这种情况下我们肯定不能因为这一两个点呢就去推翻校验规则的配置。

所以在这个时候呢我们就可以去使用，也是ESLint配置注释去解决这样一些问题。

1、可以在你的文件中使用以下格式的块注释来临时禁止规则出现警告

/* eslint-disable */

alert('foo');

/* eslint-enable */

2、也可以对指定的规则启用或禁用警告:

/* eslint-disable no-alert, no-console */

alert('foo');
console.log('bar');

/* eslint-enable no-alert, no-console */

3、如果在整个文件范围内禁止规则出现警告，将 /* eslint-disable */ 块注释放在文件顶部：

/* eslint-disable */

alert('foo');

4、也可以对整个文件启用或禁用警告:

/* eslint-disable no-alert */

// Disables no-alert for the rest of the file
alert('foo');

5、可以在你的文件中使用以下格式的行注释或块注释在某一特定的行上禁用所有规则：

alert('foo'); // eslint-disable-line

// eslint-disable-next-line
alert('foo');

/* eslint-disable-next-line */
alert('foo');

alert('foo'); /* eslint-disable-line */

6、在某一特定的行上禁用某个指定的规则：

alert('foo'); // eslint-disable-line no-alert

// eslint-disable-next-line no-alert
alert('foo');

alert('foo'); /* eslint-disable-line no-alert */

/* eslint-disable-next-line no-alert */
alert('foo');

7、在某个特定的行上禁用多个规则：

alert('foo'); // eslint-disable-line no-alert, quotes, semi

// eslint-disable-next-line no-alert, quotes, semi
alert('foo');

alert('foo'); /* eslint-disable-line no-alert, quotes, semi */

/* eslint-disable-next-line no-alert, quotes, semi */
alert('foo');

8、上面的所有方法同样适用于插件规则。例如，禁止 eslint-plugin-example 的 rule-name 规则，

把插件名（example）和规则名（rule-name）结合为 example/rule-name：

foo(); // eslint-disable-line example/rule-name
foo(); /* eslint-disable-line example/rule-name */

谢谢观看，在下面的文章会介绍ESLint + 自动化构建