目录
一、简介
Eslint是一个 ECMAScript/JavaScript 语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
- 规范相关代码,保证团队开发过程中代码格式统一
- 语法正确,避免没必要的低级bug
- 提示删除多余的代码,包括已声明变量未使用,已声明方法未调用过,包括没必要的return ,或者说return 后边有代码这些等。
- 另外一个好处是培养自己养成良好代码书写
- 方便代码阅读
二、安装
先决条件:Node.js (>=6.14), npm version 3+。
1. 单独使用
你可以使用 npm 安装 ESLint:
$ npm install eslint --save-dev
紧接着你应该设置一个配置文件eslintrc.js:
$ ./node_modules/.bin/eslint --init
之后,你可以在任何文件或目录上运行ESLint如下:
$ ./node_modules/.bin/eslint yourfile.js
2. vue-cli使用
在创建项目阶段使用eslint 它会帮你全部配置好 ,如果不懂vue-cli 可以查看文档。非常简单。
三.配置ESLint
1. 配置文件
有两种主要的方法来配置ESLint:
- 配置注释 - 使用JavaScript注释将配置信息直接嵌入到文件中。
- 配置文件 - 使用JavaScript,JSON或YAML文件指定整个目录(不是主目录)及其所有子目录的配置信息。这可以采用.eslintrc。*文件或文件中的
eslintConfig
字段的形式package.json,ESLint将自动查找和读取,也可以在命令行上指定配置文件。如果您的主目录中(通常~/
)有配置文件,则ESLint 仅在ESLint找不到任何其他配置文件时才使用它。
我们肯定是选择配置文件方式了。
配置文件写很多个。会按照从内层向外找知道顶层,除非遇到 root : true 停止向上查找,一层层覆盖。出现冲突,以最外层位置优先级最高。
所以在你需要的目录下,不希望它向上继续查找。
本文都是配置写在 .eslintrc.js里(与package.json有一点点小区别,区别不大。需要时查文档即可)
module.exports = {
root: true
}
2. 指定解析器选项
ESLint允许你指定你想要支持的JavaScript语言选项,默认情况下,ESLint需要ECMAScript 5语法。您可以覆盖该设置,以使用解析器选项启用对其他ECMAScript版本以及JSX的支持。
通过使用parserOptions
属性在您的文件中设置
选项:
ecmaVersion
- 设置为3,5(默认),6,7或8以指定要使用的ECMAScript语法的版本。您也可以设置为2015年(与6)相同,2016年(与7相同)或2017(与8相同)使用年份命名。sourceType
- 设置为"script"
(默认)或者"module"
您的代码位于ECMAScript模块中。
ecmaFeatures
- 一个对象,指示您想要使用哪些其他语言功能:
指定解析器
默认情况下,ESLint使用Espree作为其解析器,流行方案使用Babel-Eslint
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
ecmaVersion: 11,
sourceType: 'module',
ecmaFeatures: {
"jsx": true
}
}
}
3. 指定环境
环境定义了预定义的全局变量。可用的环境是:
browser
- 浏览器全局变量。node
- Node.js全局变量和Node.js范围。commonjs
- CommonJS全局变量和CommonJS范围(使用Browserify / WebPack的浏览器代码)。shared-node-browser
- Node.js和Browser的通用全局。es6
- 启用除模块外的所有ECMAScript 6功能(这会自动将ecmaVersion
解析器选项设置为6)。worker
- 网络工作者全局变量。amd
- 根据amd规范定义require()
和define()
作为全局变量。mocha
- 增加了所有的Mocha测试全局变量。jasmine
- 为版本1.3和2.0添加了所有Jasmine测试全局变量。jest
- 是全局变量。phantomjs
- PhantomJS全局变量。protractor
- 量角器全局变量。qunit
- QUnit全局变量。jquery
- jQuery全局变量。prototypejs
- Prototype.js全局变量。shelljs
- ShellJS全局变量。meteor
- 流星全球变量。mongo
- MongoDB全局变量。applescript
- AppleScript全局变量。nashorn
- Java 8 Nashorn全局变量。serviceworker
- 服务工作者全局变量。atomtest
- Atom测试助手全局变量。embertest
- 灰烬测试帮手全局。webextensions
- 全球网络扩展。greasemonkey
- GreaseMonkey全局变量。
这些环境并不相互排斥,因此您可以一次定义多个环境。
可以在文件内部,配置文件中或使用--env
命令行标志指定环境。
module.exports = {
env: {
browser: true,
node: true
}
}