JS代码检查工具ESLint介绍与使用方法

ESLint不但提供一些默认的规则,也提供用户自定义规则来约束所写的JavaScript代码。

JS代码检查工具ESLint介绍与使用方法

发展历史

Douglas Crockford大神根据自己的理念用JavaScript写了一个JavaScript代码规范检查工具,这就是JSLint。后来非常流行,也的确帮助了广大的JavaScript程序员。但是,大神对于自己的代码规范不做丝毫的妥协,对开源社区的反馈的回应也不礼貌。于是,JSLint从一个帮助程序员规范代码,避免Bug的工具,变成了一个让代码像Crockford的工具。在最不信神的IT界,这当然不能忍了

2011年,一个叫Anton Kovalyov的前端程序员借助开源社区的力量弄出来了JSHint,该工具的思想基本上和JSLint是一致的,但具有以下几点优势:1、可配置规则。2、社区支持度高。3、可定制结果报表

起初几年,JSHint 一直是前端代码检测工具的首选。但在 2013 年,Zakas 大佬发现 JSHint 已经无法满足自己定制化规则的需求,而且和 Anton 讨论后达成共识这根本在不可能在 JSHint 上实现。同时 Zakas 还设想发明一个基于 AST 的 lint,可以动态执行额外的规则,同时可以很方便的扩展规则

2013 年的 6 月份,Zakas 发布了全新的 lint 工具——ESLint。ESLint 的出现并没有撼动 JSHint 的霸主地位。由于前者是利用 AST 处理规则,用 Esprima 解析代码,执行速度要比只需要一步搞定的 JSHint 慢很多;其次当时已经有许多编辑器对 JSHint 支持完善,生态足够强大。真正让 ESLint 逆袭的是 ECMAScript 6 的出现

2015 年 6 月,ES2015 规范正式发布。但是发布后,市面上浏览器对最新标准的支持情况极其有限。如果想要提前体验最新标准的语法,就得靠 Babel 之类的工具将代码编译成 ES5 甚至更低的版本,同时一些实验性的特性也能靠 Babel 转换。这时 JSHint 就略尴尬,ES2015 变化很大,短期内无法完全支持。ESLint 可扩展的优势一下就体现出来了,不仅可以扩展规则,甚至连解析器也能替换。Babel 团队就为 ESLint 开发了 babel-eslint 替换默认解析器,让 ESLint 率先支持 ES2015 语法

也是在 2015 年,React 的应用越来越广泛,诞生不久的 JSX 也愈加流行。ESLint 本身也不支持 JSX 语法。还是因为可扩展性,eslint-plugin-react 的出现让 ESLint 也能支持当时 React 特有的规则

至此,ESLint 完美躺赢,替代 JSHint 成为前端主流工具

ESLint详细配置 注释配置

有两种主要的方式来配置 ESLint,其中一种就是注释配置,使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中

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

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

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

/* eslint-disable no-alert, no-console */ alert('foo'); console.log('bar'); /* eslint-enable no-alert, no-console */

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

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

文件配置

另一种是文件配置,使用 JavaScript、JSON 或者 YAML 文件为整个目录和它的子目录指定配置信息

ESLint 支持几种格式的配置文件

JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。

YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。

JSON - 使用 .eslintrc.json 去定义配置的结构,ESLint 的 JSON 文件允许 JavaScript 风格的注释。

(弃用) - 使用 .eslintrc,可以使 JSON 也可以是 YAML。

package.json - 在 package.json 里创建一个 eslintConfig属性,在那里定义配置。

如果同一个目录下有多个配置文件,ESLint 只会使用一个。优先级顺序如下

1 .eslintrc.js

2 .eslintrc.yaml

3 .eslintrc.yml

4 .eslintrc.json

5 .eslintrc

6  package.json

除了配置一个独立的 .eslintrc.* 文件,也可以直接在 package.json 文件里的 eslintConfig 字段指定配置,ESLint 将自动在要检测的文件目录里寻找它们,紧接着是父级目录,一直到文件系统的根目录

{ "name": "mypackage", "version": "0.0.1", "eslintConfig": { "env": { "browser": true, "node": true } } }

或者使用 -c 选项传递命令行将文件保持到任意地方

eslint -c myconfig.json myfiletotest.js

配置语言

ESLint 允许指定想要支持的 JavaScript 语言选项。默认情况下,ESLint 支持 ECMAScript 5 语法。可以覆盖该设置,以启用对 ECMAScript 其它版本和 JSX 的支持

ecmaVersion - 默认设置为3,5(默认), 可以使用 6、7、8 或 9 来指定想要使用的 ECMAScript 版本。也可以用使用年份命名的版本号指定为 2015(同 6),2016(同 7),或 2017(同 8)或 2018(同 9)

sourceType - 设置为 "script" (默认) 或 "module"(如果代码是 ECMAScript 模块)

ecmaFeatures - 这是个对象,表示想使用的额外的语言特性:

globalReturn - 允许在全局作用域下使用 return 语句

impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)

jsx - 启用 JSX

experimentalObjectRestSpread - 启用实验性的 object rest/spread properties 支持

配置示例

"parserOptions": { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "jsx": true } }

配置环境

一个环境定义了一组预定义的全局变量。这些环境并不是互斥的,可以同时定义多个。可用的环境包括

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

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

commonjs - CommonJS 全局变量和 CommonJS 作用域 

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 全局变量。

可以在JavaScript 文件中使用注释来指定环境

/* eslint-env node, mocha */

也可以在配置文件里指定环境,使用 env 关键字指定想启用的环境,并设置它们为 true

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/65f97a9e84dd9b66f3a13dd33a0b7362.html