前言
ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写, 2013 年发布第一个版本。 NCZ 的初衷不是重复造一个轮子,而是在实际需求得不到 JSHint 团队响应 的情况下做出的选择:以可扩展、每条规则独立、不内置编码风格为理念编写一个 lint 工具。
可以去上方网站进行相关资料查阅,长话短说,直接开始入门吧~
安装
建议采用全局安装方式
npm install -g eslint
- 1
初始化
如果你的项目还没有配置文件(.eslintrc)的话,可以通过指定–init参数来生成一个新的配置文件:
eslint --init
- 1
运行eslint –init后,会在当前目录下生成一个.eslintrc文件,你可以在这个文件中配置一些规则。
配置
ESLint被设计为完全可配置的,主要有两种方式来配置ESLint:
- 内嵌配置:将配置信息以注释的形式写在要检验的文件内
- 文件配置:利用javascript、json、yml语言的语法,生成名为.eslintrc.*的配置文件,将配置信息写到文件内
文件配置方式
env:你的脚本将要运行在什么环境中
Environment可以预设好的其他环境的全局变量,如brower、node环境变量、es6环境变量、mocha环境变量等
'env': {
'browser': true,
'commonjs': true,
'es6': true
},
globals:额外的全局变量
示例:
globals: {
vue: true, wx: true },
rules:开启规则和发生错误时报告的等级
示例:
'rules': {
// no-var
'no-var': 'error',
// 要求或禁止 var 声明中的初始化
'init-declarations': 2,
// 强制使用单引号
'quotes': ['error', 'single'],
// 要求或禁止使用分号而不是 ASI
'semi': ['error', 'never'],
// 禁止不必要的分号
'no-extra-semi': 'error',
// 强制使用一致的换行风格
'linebreak-style': ['error', 'unix'],
// 空格2个
'indent': ['error', 2, {'SwitchCase': 1}],
// 指定数组的元素之间要以空格隔开(,后面), never参数:[ 之前和 ] 之后不能带空格,always参数:[ 之前和 ] 之后必须带空格
'array-bracket-spacing': [2, 'never'],
// 在块级作用域外访问块内定义的变量是否报错提示
'block-scoped-var': 0,
// if while function 后面的{必须与if在同一行,java风格。
'brace-style': [2, '1tbs', {'allowSingleLine': true}],
// 双峰驼命名格式
'camelcase': 2,
// 数组和对象键值对最后一个逗号, never参数:不能带末尾的逗号, always参数:必须带末尾的逗号,
'comma-dangle': [2, 'never'],
// 控制逗号前后的空格
'comma-spacing': [2, {'before': false, 'after': true}],
// 控制逗号在行尾出现还是在行首出现
'comma-style': [2, 'last'],
// 圈复杂度
'complexity': [2, 9],
// 以方括号取对象属性时,[ 后面和 ] 前面是否需要空格, 可选参数 never, always
'computed-property-spacing': [2, 'never'],
// TODO 关闭 强制方法必须返回值,TypeScript强类型,不配置
// 'consistent-return': 0
}
规则的错误等级有三种:
0或'off':关闭规则。
1或'warn':打开规则,并且作为一个警告(并不会导致检查不通过)。
2或'error':打开规则,并且作为一个错误 (退出码为1,检查不通过)。
参数说明:
参数1 : 错误等级
参数2 : 处理方式
"comma-dangle": ["error", "never"],
上述配置只是简要将最基本的一些配置罗略出来,如果有需要建议去上方官网中查看。
配置代码注释方式
有时我们可能要在代码中忽略eslint的某种检查,或者加入某种特定检查,此时我们可以用如下的方式:
示例:
- 忽略 no-undef 检查
/* eslint-disable no-undef */
- 忽略 no-new 检查
/* eslint-disable no-new */
- 设置检查
/*eslint eqeqeq: off*/
/*eslint eqeqeq: 0*/
eslint 检查指令
- 检查且修复
eslint * --fix
- 检查指定文件
eslint app.js --fix
开发工具上的使用
WebStorm
Preferences -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> Eslint -> Enable (勾选) -> Apply -> OK
Atom
安装linter-eslint
Sublime
安装SublimeLinter
安装SublimeLinter-contrib-eslint
结语
Eslint 对于每一个开发者而言都是非常值得使用的,这样会强制你写出高质量且整洁的代码,所以建议无论大家是前端开发者、weex开发者、还是小程序开发者都建议大家讲Eslint集成进入,来提高项目的质量。