Eslint
为什么要使用ESLint?
1. JavaScript 是一个动态的弱类型语言,在开发中比较容易出错。因为没有编译程序,为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。
2.多人参与的项目编码风格不统一
3.主流编译器都可以集成ESLint
如何使用?
# 全局安装 ESLint $ npm install -g eslint
# 进入项目
# 初始化 package.json $ npm init -f
# 初始化 ESLint 配置 $ eslint --init
随后会出现一些简单的一问一答的配置环节
源码:https://github.com/eslint/eslint/blob/v6.0.1/lib/init/config-initializer.js#L432
✔ 您想如何使用ESLint?·
✔ 您的项目使用什么类型的模块?·
✔ 您的项目使用哪个框架?·
✔ 你的项目使用TypeScript吗?·否/是
✔ 你的代码在哪里运行?·浏览器,节点
✔ 你想遵循哪种风格指南?·标准
✔ 您希望配置文件的格式是什么?·JavaScript
✔ 你想现在用npm安装吗?·否/是
你会发现在你文件夹的根目录生成了一个 .eslintrc.js 文件
配置
1.使用注释把 lint 规则直接嵌入到源代码中 (一般是为了临时禁止某些严格的lint规则出现的警告)
/* eslint-disable */ alert('该注释放在文件顶部,整个文件都不会出现 lint 警告')
/* eslint-enable */ alert('重新启用 lint 告警')
/* eslint-disable eqeqeq */ alert('只禁止某一个或多个规则')
/* eslint-disable-next-line */ alert('当前行禁止 lint 警告')
alert('当前行禁止 lint 警告') // eslint-disable-line
2.使用配置文件进行 lint 规则配置
1. javascript:使用.eslintrc.js文件并导出一个包含配置的对象。
2. YAML:.eslintrc.yaml或者.eslintrc.
3. yml JSON:.eslintrc.json,并且此文件允许使用JS形式的注释
4. 废弃的用法:.eslintrc,此文件可以是JSON或者YAML
5. package.json:在package.json文件中创建eslintConfig属性,所有的配置包含在此属性中。
有很多信息可以配置:
* Environments - 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
* Globals - 脚本在执行期间访问的额外的全局变量。
* Rules - 启用的规则及其各自的错误级别。
所有这些选项让你可以细粒度地控制 ESLint 如何对待你的代码
3.解析器选项(parserOptions)
解析器选项可以在 .eslintrc.* 文件使用 parserOptions 属性设置。可用的选项有:
* ecmaVersion - 默认设置为 3,5(默认), 你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015(同 6), 2016(同 7),或 2017(同 8)或 2018(同 9)或 2019 (same as 10)
* sourceType - 设置为 "script" (默认) 或 "module"(如果你的代码是 ECMAScript 模块)。
* ecmaFeatures - 这是个对象,表示你想使用的额外的语言特性:
* globalReturn - 允许在全局作用域下使用 return 语句
* impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
* jsx - 启用 JSX
* experimentalObjectRestSpread - 启用实验性的 object rest/spread properties 支持。(重要:这是一个实验性的功能,在未来可能会有明显改变。 建议你写的规则 不要 依赖该功能,除非当它发生改变时你愿意承担维护成本。)
设置解析器选项能帮助 ESLint 确定什么是解析错误,所有语言选项默认都是 false。
4.解析器(parser)
ESLint 默认使用Espree作为其解析器,你可以在配置文件中指定一个不同的解析器
以下解析器与 ESLint 兼容:
* Esprima
* Babel-ESLint - 一个对Babel解析器的包装,使其能够与 ESLint 兼容。
* @typescript-eslint/parser - 将 TypeScript 转换成与 estree 兼容的形式,以便在ESLint中使用。
注意,在使用自定义解析器时,为了让 ESLint 在处理非 ECMAScript 5 特性时正常工作,配置属性 parserOptions 仍然是必须的。解析器会被传入 parserOptions,但是不一定会使用它们来决 定功能特性的开关。
5.plugins
插件可以提供处理器。处理器可以从另一种文件中提取 JavaScript 代码,然后让 ESLint 检测 JavaScript 代码。或者处理器可以在预处理中转换 JavaScript 代码。
processor:指定处理器
要为特定类型的文件指定处理器,请使用 overrides 键和 processor 键的组合
{
"plugins": ["a-plugin"],
"overrides": [
{
"files": ["*.md"],
"processor": "a-plugin/markdown"
}
]
}
6.Specifying Environments
一个环境定义了一组预定义的全局变量。可用的环境包括:
* node - Node.js 全局变量和 Node.js 作用域。
* browser - 浏览器环境中的全局变量。
* 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 全局变量
可以同时定义多个
7. 拓展
扩展就是直接使用别人已经写好的 lint 规则,方便快捷。扩展一般支持三种类型:
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"eslint-config-standard",
]
}
* eslint: 开头的是 ESLint 官方的扩展,一共有两个:eslint:recommended 、eslint:all。
* plugin: 开头的是扩展是插件类型,也可以直接在 plugins 属性中进行设置,后面一节会详细讲到。
* 最后一种扩展来自 npm 包,官方规定 npm 包的扩展必须以 eslint-config- 开头,使用时可以省略这个头,上面案例中 eslint-config-standard 可以直接简写成 standard。
如果你觉得自己的配置十分满意,也可以将自己的 lint 配置发布到 npm 包,只要将包名命名为 eslint-config-xxx 即可,同时,需要在 package.json 的 peerDependencies 字段中声明你依赖的 ESLint 的版本号。