前言

ESLint是一款代码开发工具,能够协调和统一团队的编码风格.刚开始接触ESLint的开发者,使用时会感觉处处受挫.ESLint的本质就是提供规范,制定条条框框去限制开发者的编码.比如ESLint里定义的这样的规则,代码缩进只能用2个空格,如果你用4个空格就会报错.

作为开发者而言,不能随心所欲的写代码固然会很不舒服,但一旦过了适应期,以后书写出来的代码将会变的更加的美观和便于阅读.

多人协作的团队里,共同完成一个大型的项目,ESLint是必不可少的开发工具.本文接下来将从三个方向去解读ESLint.

从ESLint的基础配置中理解各个属性的含义
如何借助vscode编辑器自动识别并修复ESLint错误,提升开发效率
ESLint其他应用场景

基础配置

搭建一个最简单的ESLint项目

1.新建一个文件夹进入目录内执行npm init -y创建一个新项目.

2.执行npm i eslint -D安装ESLint依赖.

3.在项目根目录下创建.eslintignore文件,设置需要被ESLint忽略的文件,文件中填入下面代码.以下标注目录下的文件,ESLint不会对其做语法检查.

build
dist
src/assets
public
node_modules

4.在项目根目录下创建.eslintrc.js文件,此文件就是ESLint的核心配置文件,所有的代码约束规则都可以在该文件中编写.

module.exports = {root: true,env: {node: true,browser: true,es6: true},parser:"Espree",parserOptions:{"ecmaVersion": 6,"sourceType": "module","ecmaFeatures": {"jsx": true}},globals:{"data1":"writable","data2":"readonly"  },extends: ['eslint:recommended'],rules: {"indent": ["error", 2], //代码缩进2个空格'quotes': ['error', 'single'], // 字符串强制使用单引号'eqeqeq': ['error', 'always', { null: 'ignore' }], //比较时强制使用 === 或者 !==,但对null作比较时可以不用全等}
}

上述几个配置属性是最常用的配置项,下面一一解读.

root

ESLint 默认会一直往上寻找配置文件直到根目录,一旦在某一级发现配置文件配置了root参数并且为true,ESLint就会停止再往上一级寻找,它的作用域范围就会确定.

env

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

指定脚本允许运行的环境.比如上面配置es6为false,如果代码中出现let,const关键字,ESLint检测到就会报错.再例如设置browser为true,代表该脚本允许运行在浏览器环境下,代码中出现全局变量window就不会报错.如果设置browser为false,代码中出现全局变量window就会报错.

parser和parserOptions

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

ESLint是一个做语法校验的程序,如果把代码交给它校验,前提是它能正确识别代码.例如不做任何配置写一段jsx的代码交给ESLint校验是肯定会报错的,因为这些代码它发现没办法运行属于非法代码.

parser指定一个代码解析器的引擎,让它去检测代码是不是正规合法的.默认的选项是Espree,如果你想换一个解析器比如babel-eslint,那需要先使用npm i babel-eslint -D安装,再填入上述配置文件parser:"babel-eslint".

parserOptions通常是配合parser一起使用,它用来指定具体如何解析代码的策略.分别有以下几个属性:

ecmaVersion:指定允许书写的js代码的版本,比如ecmaVersion设置为5.如果你的代码中出现大量es6的语法,解析器就会报错不识别.
sourceType: 它的选项有两个,分别是"module" 和 “script”,如果你这里不设置成module,那么代码中就不能出现类似于export default 或者 module.exports 模块导出导出的语法.
ecmaFeatures: 它下面设定 jsx 选项为 true 时,代码中就可以书写jsx代码了.在这里需要指出,支持jsx不代表支持react,如何让react代码也能顺利通过 ESLint 的校验,后续会讲.另外它下面还可以添加一个属性 impliedStrict:true 是否在全局开启严格模式.

extends

 extends: ['eslint:recommended']

继承别人写好的配置规则.比如'eslint:recommended'就是官方推荐的默认规则,在这个规则里,如果定义了变量不使用就会报错,详细的配置细节可去ESLint官网查询.

除了官方推荐的规则,我们还可以使用别人发布到npm上的规则,比如使用airbnb公司发布的规则.

npm install -D eslint-config-airbnb-base eslint-plugin-import 安装依赖包
在.eslintrc.js的extends字段的数组加上一项

 extends: ['eslint:recommended','airbnb-base'],

以上配置方式都在eslint-config-airbnb-base的githup主页有详细说明.如果想使用其他的配置规则,也可以在githup上面去搜索.

rules

rules是我们自定义的规则,它的优先级是最高的.比如上述我们在extends里面继承了第三方的规则,但是对某些规则不满意,就可以在rules重新定义覆盖原规则

 rules: {"indent": ["error", 2], //代码缩进2个空格'quotes': ['error', 'single'], // 字符串强制使用单引号'eqeqeq': ['error', 'always', { null: 'ignore' }], //比较时强制使用 === 或者 !==,但对null作比较时可以不用全等}

rules对象下的属性名代表哪些规则.数组的第一个值对应违背该规则的处理方式,可填的值如下:

off或者0: 不验证规则(如果想直接关闭 ESLint 对某条规则的校验,可以填写off)
warn或者1: 验证规则但只发出警告
error或者2: 验证规则发现不符合报错

上面rules里面定义一个规则 "indent": ["error", 2].indent规定代码缩进的空格数.数组的第一个值填error表示如果违反直接报错.数组的其他值(可能有多个值)是传递参数.比如上面的indent只允许代码缩进两个空格,否则ESLint就会报错.

ESLint的规则有成千上万个,碰到不认识的可去官网查询,但常用的如下:

indent： 代码缩进
no-mixed-spaces-and-tabs： 代码缩进不能混用空格和tab。
no-mixed-spaces-and-tabs： 代码缩进不能混用空格和tab。
camelcase： 变量和函数名必须遵循驼峰命名法。
quotes： 字符串使用什么类型的引号
curly： 在 if，else if，else或 while 的代码块中，即使只有一行代码，也要用写在{} 中。
eqeqeq： 比较用 === 或 !==。
no-cond-assign： 不允许在 if 中使用赋值操作。
no-undef： 变量和函数在使用前必须先声明。全局变量或函数除外。
no-unused-vars：变量定义后一定要使用。
no-alert： 禁止使用 alert,confirm 和 prompt。
max-params： 函数允许最多有几个参数。默认是3个。
max-statements： 函数允许最多有几条语句。
max-depth：代码块中默认嵌套深度

plugins

plugins里面配置的是插件,插件都是需要通过npm来安装的.插件的作用就是对规则进行补充,例如 'eslint:recommended' 里面就没有包含与 react 相关的规则,接下来就配置一下让 ESLint 兼容react的语法.

npm install eslint-plugin-react --save-dev安装依赖
在extends中加入 "plugin:react/recommended"

"extends": ["eslint:recommended","plugin:react/recommended"
]

在plugin字段加入"react"

"plugins": ["react"]

开启规则

 "rules": {"react/jsx-uses-react": "error","react/jsx-uses-vars": "error",}

如此一来ESLint就能正确识别react代码并且依据eslint-plugin-react提供的规则去校验语法错误了.以上的配置方法都在 eslint-plugin-react 的githup主页上写的十分详细.

再举个例子,配置ESLint对ts语法的支持

npm i -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin安装依赖
为什么要安装 @typescript-eslint/parser ,因为ESLint默认是使用 Espree 进行语法解析,它是无法识别 ts 的某些语法,故我们需要安装 typescript-eslint-parser,替代掉默认的解析器,同时还要安装 typescript.
配置文件加上下面的配置

{"parser": "@typescript-eslint/parser","extends": ["eslint:recommended","plugin:@typescript-eslint/recommended"],"plugins": ["@typescript-eslint"],"rules": {"@typescript-eslint/rule-name": "error"}
}

以上配置方法都在@typescript-eslint/eslint-plugin插件的主页上有详细的描述.

如果想配置vue,可以直接搜索 eslint-plugin-vue ,官网也有相应的配置方法.

globals

globals用来定义全局变量的,使用下述方法配置后,各个文件内就可以不用定义data1和data2直接使用了.如果不配置直接使用,ESLint检测到变量没有定义就会报错.

globals:{"data1":"writable","data2":"readonly"
}

writable设置该变量可以赋值,而readonly设置该变量只能读取不能修改.

至此为止配置的内容就讲完了.

利用注释忽略ESLint检查

如果想对单个 js 文件禁用 ESLint 语法校验,但整个项目依然保留校验规则,可以文件的头部加上一行注释.ESLint碰到此条注释就会跳过后面的注释.

/* eslint-disable */

如果想在某块代码处避开某条检验规则,可以在代码上方加一行注释.no-console指的是禁止使用console.log语句.想避开某条检验就把no-console换成对应的规则名.

/* eslint-disable no-console */function test(){console.log(123);}

执行ESLint检测

上述配置的内容讲了那么多,最终还是要执行ESLint,让它去检测我们写的代码到底符不符合上面配置的那些规则.

例如在当前项目下创建src/main.js文件,在里面写一段js代码.

打开项目根目录,启动命令行工具执行npx eslint ./src/**/*.js.ESLint就会去src根目录下找到所有以js结尾的文件,随后依据上面配置的规则一一检测代码的语法.

vscode协助

上面使用命令行的工具检测ESLint错误实在是效率太低,我们可以借助vscode编辑器通过一些配置在写代码的时候实时爆出ESLint错误,并且按下 ctrl+s 保存代码时还能自动修复错误,这样就大大提升了开发效率.

vscode本身只是一个编辑器,默认是不能做ESLint语法检测的.通过给它增加插件扩展,vscode就有能力读取项目中的 .eslintrc.js 的配置,并且按照配置的规则来对书写的代码进行语法校验.具体配置步骤如下.

vscode中搜索ESLint安装插件
找到setting.json文件.键盘输入快捷键 ctrl +shift + p (适用于windows用户),输入open settings.
添加画红框的代码

笔者当前安装的ESLint版本v2.1.13,配置方法只需要加上述一段画红框的代码即可.红框代码是直接在ESLint插件文档上copy过来的,往上第三个图右下角部分可以看到.

如果发现配置不生效很可能是ESLint版本不一致,需要在vscode打开ESLint插件的文档,里面会包含详细的配置说明.

完成上述配置后,键盘按下ctrl+s,安装的vscode的ESLint扩展插件会自动格式化代码以符合 .eslintrc.js文件下定义的规则,不用自己再去一一的修复代码格式.

但这里需要额外指出,vscode它只能帮我们自动修复格式类的错误,比如多写了几个空格,缩进,单双引号之类的.如果是逻辑性的错误,比如定义了变量却没使用vscode按保存是修复不了的,需要手动修改.

其他场景

webpack中如何集成ESLint

npm i eslint eslint-loader -D 安装依赖
在 webpack.config.js加入下面配置

module: {rules: [{test: /\.js$/,exclude: /node_modules/, loader: 'eslint-loader',options: {fix: true // 自动修复某些eslint问题}}]
}

在项目根目录下创建 .eslintrc.js 和 .eslintignore配置文件,并填写好自己的配置

如果webpack集成了babel,eslint-loader的配置写在 babel-loader之后,它的执行顺序是从下往上的.

module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: [{loader: 'babel-loader',options: {presets: ['@babel/preset-env'],},}, {loader: 'eslint-loader',options: {fix: true,},},],},],
},

git集成ESLint

git自身有一种钩子机制,我们可以通过下述配置在git提交之前触发ESLint语法检查.

npm install eslint -D安装依赖
在项目根目录下创建 .eslintrc.js 和 .eslintignore配置文件,并填写好自己的配置
npm install pre-commit -D
安装完毕后在.git/hooks里面会多出一个pre-commit的文件.它里面会存储git提交之前将会执行的命令行代码.
注册命令行代码.在package.json文件里加下面代码.

{"scripts": {"eslint": "npx eslint ./src/**/*.js ./src/**/*.ts ./src/**/*.vue"},"pre-commit": ["eslint"]
}

上述配置后,git提交之前会执行npm run eslint命令,随后ESLint会检测src下面的所有js、ts和vue文件的语法.如果发现错误会阻止提交.

ESLint全方位解析相关推荐

【笔记-vue】《imooc-vue.js高仿饿了么》、《imooc-vue 音乐app》、《imooc-vue.js源码全方位解析》
20170709 - 20171128:<imooc-vue.js高仿饿了么> 一.第一章课程简介 1-1课程简介 1.需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译 ...
什么是无线网桥？全方位解析无线网桥及应用场景
什么是无线网桥?全方位解析无线网桥及应用场景无线网桥是什么?无线网桥只能做无线监控系统吗?除了无线监控系统还能做什么?如何选择无线网桥?以上的疑问你是否都能解答?如果不能,说明你对无线网桥的认识还不 ...
360度全方位解析死链接
相信业内人士都知道什么叫做死链接,在这里我再赘述一下, 死链接指的就是失效的链接.错误链接,它原本是正常的,但是后来就变成无效的链接,使得网页中打开这个死链接地址,服务器回应的就是打不开的页面或友好的 ...
用python全方位解析2019新冠疫情词云图
用python全方位解析2019新冠疫情词云图 wordcloud模块 jieba分词器模块 PyCharm创建工程生成词云的方法 wordcloud.WordCloud()的参数介绍影响词云图像 ...
全方位解析俄语系勒索软件的生态系统
本文讲的是全方位解析俄语系勒索软件的生态系统, 勒索软件的发家史毫无疑问,近两年,以敲诈勒索为目的的文件加密恶意软件逐渐成为恶意软件中的主力军,勒索软件是当今网络攻击中一种最主要的攻击工具,对政府组 ...
ots在线考计算机的word,全方位解析弘成OTS在线考试系统
原标题:全方位解析弘成OTS在线考试系统弘成·OTS在线考试系统覆盖在线考试全过程满足多种业务场景的智慧考试系统 10年品质,让考试更智慧! 6大优势,轻松解决考试痛点 01智能题库支持多种试 ...
Android基础——JSON数据的全方位解析
Android基础--JSON数据的全方位解析本篇文章包括以下内容: JSON是什么 JSONObject的解析和存储 JSONObject的解析和存储(抽象) JSONArray的解析和存储模拟 ...
微信小程序全方位解析
九个月之前,应用号首次被提出.近日,应用号以"小程序"的名称,正式向200人发出公测邀请."无需下载,用完即走",微信小程序提供了一种新的开放能力,使其在IT圈 ...
51CTO技术沙龙之：窥斑见豹全方位解析虚拟化（视频、图文、PPT）
2009年3月29日,当寒流再次肆无忌惮的袭过首都北京,人们还是在本应阳光明媚的季节里打起寒颤.然而,这样的天气丝毫没能挡住51CTO开展的线下技术沙龙活动,没能打消虚拟化方面专家们的激情,更没能湮灭 ...

ESLint全方位解析

前言