前言
js是一门动态弱类型语言,程序中的错误要在代码运行时才能发现。而ESLint就是能在编译中发现代码错误的工具,在团队协作中,避免低级 Bug,产出风格统一的代码。
工具需要的是合适
ESLint是最新的工具,支持配置,自定义规则,报告错误,文档详尽,支持ES6语法最广,支持JSX语法。那Airbnb ESLint又是什么呢,为什么这么多人推荐?这是我一开始的疑惑,其实这是Airbnb公司自身定制的标准。ESLint默认有一套规则eslint:recommended
,每个团队可以根据自身需求,进行部分配置修改。如果你很喜欢大厂那一套,可以自己安装配置进ESLint工具中使用,但这里建议不要迷信权威,Airbnb的标准是高度定制的,不一定适合你的项目,所以学好怎么配置自己的标准才是重要的。
安装
ESLint是一个运行在node环境的工具,使用npm进行安装
- 全局安装
npm install -g eslint
- 本地安装
npm install eslint --save-dev
我喜欢都安装,因为全局安装能多个工程直接使用命令,本地安装能为后续提供灵活配置。
生成配置文件
工具基本都有配置文件,告诉工具该做什么,怎么做。如npm的就是package.json文件,而ESLint的配置文件就是.eslintrc。
进入项目根目录,终端执行
eslint --init
之后程序会询问你一些问题,以创建符合你风格的配置文件,最终生成配置文件,其格式会有JavaScript、YAML、JSON、package.json等等。这里我们把生成的文件重命名一下为.eslintrc,为后续在IDE中进行配置。
配置文件
打开配置文件,可以看到以下内容,我使用的是JSON格式
{
"env": {
"browser": true
},
"extends": "eslint:recommended",
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
},
Globals: {
}
}
解析以下参数的意思
- env:指定你的js代码在哪个运行环境中检测(每个运行环境都有一组预定义的全局变量);
- extends:扩展配置规则,我这里扩展的是eslint的推荐规则,可以使用Airbnb的规则;
- rules:指定检测规则。这是最重要的部分,也是你的自定义js代码监测规则的地方,格式为:规则名: 规则。比如:
"indent": ["error","tab"]
这里indent
就是规则名,它定义了缩进应该使用tab,规则内的第一个值error
指的是错误等级,它有三个等级,分别是
error level | 对应数值 | 含义 |
---|---|---|
error | 2 | 错误 |
warn | 1 | 提醒 |
off | 0 | 关闭该规则 |
具体请参考eslint官网。
- Globals:指定脚本执行过程中访问的附加全局变量(比如jquery)
运行工具
到上面为止,已经完成基本配置了,在终端运行
eslint yourfile.js
便可以对该文件进行检测,如果有问题,终端会提示相关错误的代码和错误类型,可以运行
eslint yourfile.js --fix
进行自动修复,但这只是局限于部分规则。
更多项目中的应用请查看《如何在WebStorm中配置ESLint》和《利用 git 钩子做代码提交前的检查》,谢谢支持!