什么是eslint
eslint是可组装的javascript和jsx检查工具,它的目标是提供一个插件化的javascript代码检测工具。
大家都知道,javascript是一门动态类型的语言,书写起来非常的方便,但是方便的同时,带来的就是团队合作的灾难, 八个人的js代码有八种风格,甚至连最基础的代码缩进都不同,这对于有代码洁癖的程序员来说是不能容忍的,要是有一 款工具可以强制团队成员都可以按照同一种规范编写代码,不按照规范编写就编译不通过,那么,大家的代码风格就都是 相同的了,提交到仓库中的代码都是一种风格,也方便大家去修改彼此的代码。
正式因为有这种需求,所以,eslint工具就诞生了。
安装
1、新建项目
mkdir eslint-demo && cd eslint-demo
2、初始化我们的项目
npm init
3、安装eslint
npm i eslint -D
4、我们需要一个配置文件来告诉eslint按照什么样的规范检查我们书写的代码。eslint提供
eslint --init
来交互式的创建配置文件,但是这里我们为了讲解各个配置参数的含义,
所以我们采用手动书写配置文件的方式。在文件夹的根目录下创建.eslintrc.js
文件。
此配置文件遵循nodejs的模块规范,所以我们需要在配置文件中导出一个配置对象,项下面这样:
module.exports = {};
接下来,让我们一点点的剖析其配置项。
eslint的配置文件有json、yaml、js三种文件形式(文件名称为.eslintrc.json,.eslintrc.js,.eslintrc.yaml,.eslintrc.yml)以及在
package.json
文件的eslintConfig字段内配置,.eslintrc类型的文件已经被废弃。这里我们采用的是js类型的文件形式,因为js类型的文件可以书写逻辑,面对复杂的eslint配置时会比较灵活。
命令行
--ext
--ext
用于指定检测的文件范围。以下命令表示检测src文件夹下的js和vue结尾的文件。
npx eslint --ext .js,.vue src/
为了执行方便,我们在pachkage.json
的scripts
配置项下添加命令:
{
"scripts": {
"lint": "npx eslint --ext .js,.vue src/"
}
}
以后我们检测代码只需要运行npm run lint
就可以了。
配置项
root
默认情况下,ESLint会在所有父级目录里寻找配置文件,一直到根目录,如果你需要你的项目代码都遵循一个代码规范,那么在配置文件中指定root: true
,可以告诉ESLint,这已经是最高级配置,停止向父级目录查找配置文件。
module.exports = {
root: true
}
env
该选项告诉ESLint当前的开发环境是什么,例如,我们一般都是在浏览器环境中开发项目,所以我们需要指定env.browser=true
来明确当前的开发环境为浏览器,这样我们在使用浏览器的一些全局变量时就不会报错了。
module.exports = {
env: {
browser: true, // 浏览器环境中的全局变量
node: true, // Node.js 全局变量和 Node.js 作用域
commonjs: true, // CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)
es6: true // 启用除了 modules 以外的所有 ECMAScript 6 特性(该选项会自动设置 ecmaVersion 解析器选项为 6)
}
}
parserOptions
该选项允许你设置需要支持的语法的。
同样的,支持 ES6 语法并不意味着同时支持新的 ES6 全局变量或类型(比如 Set
等新类型)。对于 ES6 语法,使用 { "parserOptions": { "ecmaVersion": 6 } }
;
对于新的 ES6 全局变量,使用 { "env":{ "es6": true } }
. { "env": { "es6": true } }
自动启用es6语法,但 { "parserOptions": { "ecmaVersion": 6 } }
不自动启用es6全局变量。
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 模块)。parser
- 执行解析文件的解析工具- Espree - 默认解析工具
- Esprima -
- babel-eslint - babel解析工具
- @typescript-eslint/parser - 将 TypeScript 转换成与 estree 兼容的形式,以便在ESLint中使用。
ecmaFeatures
- 这是个对象,表示你想使用的额外的语言特性:globalReturn
- 允许在全局作用域下使用return
语句impliedStrict
- 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)jsx
- 启用 JSX
module.exports = {
ecmaVersion: 6,
sourceType: "module",
ecmaFeatures: {
jsx: true
}
}
globals
globals允许你指定全局变量,在应用一些插件时,可能插件会暴露在window上一个全局变量,此时,如果我们直接使用该全局变量,eslint会立即报告一个错误,因为ESLint并不知道,它是一个全局变量。 所以,此时我们就需要在globals下配置该全局变量,让ESLint知道。
module.exports = {
globals: {
$: 'writable'
}
}
以上配置告诉ESLint,$
是一个可写的全局变量。
全局变量的规范有三总,分别为:
'writable'
:可写'readonly'
:可读'off'
:不可使用
plugins
前面就已经说过,ESLint是一个插件化的代码检查工具,所以,插件对于ESLint来说是非常重要的,我们可以利用插件来解析各种文件,例如,使用eslint-plugin-vue来检测vue文件,使用
eslint-plugin-react来检测jsx文件。ESLint使用插件非常简单,只需要安装该插件后再plugins
字段中配置该插件即可。
module.exports = {
plugins: [
'vue',
'react'
]
}
配置插件时,插件名称前面的eslint-plugin-
可以省略。例如:eslint-plugin-vue
可以写作'vue'。
rules
ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置,你必须将规则 ID 设置为下列值之一:
- "off" 或 0 - 关闭规则
- "warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
- "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
module.exports = {
rules: {
eqeqeq: "off",
curly: 2,
quotes: ["error", "double"],
}
}
extends
extends
表示继承一组规范,应用于当前项目。
就像babel的preset
配置项一样,ESLint为了避免我们手动配置庞杂的规范,为我们提供了一组几乎是必须遵守的开发规范,我们只需要继承该规范,然后该规范就可以用于我们的项目,
让我们专注于代码的开发,而不是繁琐的配置。
module.exports = {
extends: ['eslint:recommended']
}
上面这样配置即开启了eslint为我们设计的默认遵守的开发规范。
目前社区中有很多已经定义好的代码检查规范,像standard、airbnb等,同时也有插件级别的规范,像eslint-plugin-vue插件中提供的检测template和script内代码的规范,jsx规范,等等。 我们可以根据项目的需要寻找适合自己的规范,并严格遵守。
parser
parser
- 执行解析文件的解析工具
- Espree - 默认解析工具
- Esprima -
- babel-eslint - babel解析工具
- @typescript-eslint/parser - 将 TypeScript 转换成与 estree 兼容的形式,以便在ESLint中使用。
module.exports = {
parser: 'babel-eslint'
}
settings
ESLint 支持在配置文件添加共享设置。你可以添加 settings
对象到配置文件,
它将提供给每一个将被执行的规则。如果你想添加的自定义规则而且使它们可以访问到相同的信息,这将会很有用,并且很容易配置。
module.exports = {
settings: {
}
}
添加忽略文件
在项目开发中,我们并不希望ESLint检查全部的文件,这就需要添加ESLint需要忽略的文件。
为了达到忽略文件的目的,我们需要在根目录添加.eslintignore
文件,例如,我们需要忽略根文件static文件夹下的文件,我们可以在
.eslintignore
文件中这样配置
/static/
忽略规则
有时,我们在某些文件中确实需要一些代码,但是这些代码违反了ESLint的代码规范,这时,我们又不能修改这些代码,而且,我们也不能修改那条规范, 因为别的文件中确实需要遵守这条规范,这时,我们就需要使用内联的忽略语句。
- 1、忽略整个文件,在文件开头添加
/* eslint-disable */
注释
/* eslint-disable */
alert('foo');
- 2、忽略部分代码,需要如下代码注释
alert('1')
/* eslint-disable */
alert('foo');
...
/* eslint-enable */
包裹在/* eslint-disable */
和/* eslint-enable */
之间的代码块会被ESLint忽略。
- 3、忽略某一行。
alert('foo'); // eslint-disable-line
// eslint-disable-next-line
alert('foo');
/* eslint-disable-next-line */
alert('foo');
alert('foo'); /* eslint-disable-line */
如果你可以准确的知道需要忽略的规则的名称,可以这样写:
alert('foo'); // eslint-disable-line no-alert, quotes, semi
// eslint-disable-next-line no-alert, quotes, semi
alert('foo');
alert('foo'); /* eslint-disable-line no-alert, quotes, semi */
/* eslint-disable-next-line no-alert, quotes, semi */
alert('foo');
配置vue项目的eslint
在webpack的教程中,我们对于eslint这部分的配置只是给出了配置,单并没有讲解为什么这么配置,下面就让我们一步步的 配置出适合vue项目的eslint。
- 1、首先为了让表示当前文件为最终配置我们需要配置
root
选项。
module.exports = {
root: true
}
- 2、指明当前项目运行的环境,所以我们需要配置
env
选项
module.exports = {
root: true,
env: {
browser: true
}
}
- 3、配置eslint规范,这里我们选择社区中的standard规范,
首先安装
eslint-config-standard
,为了支持这个规范,我们还需要安装eslint-plugin-node
,eslint-plugin-import
,eslint-plugin-promise
, 三个插件。之后在extends
选项中配置该规范。
module.exports = {
root: true,
env: {
browser: true
},
extends: [
'standard'
]
}
- 4、为了能够支持vue单文件的template和script的内容的检查,我们需要安装
eslint-plugin-vue
插件。 之后,配置启用该插件,同时,使用插件暴露出来的默认规则配置。
module.exports = {
root: true,
env: {
browser: true
},
extends: [
'plugin:vue/essential',
'standard'
],
plugins: [
'vue'
]
}
- 5、添加我们自己的配置,这里standard规范要求不加末尾的分号,我比较喜欢在末尾加上分号,所以我需要在rules中 配置该选项来覆盖standard的默认规范。
module.exports = {
root: true,
env: {
browser: true
},
extends: [
'plugin:vue/essential',
'standard'
],
plugins: [
'vue'
],
rules: [
semi: ['error', 'always']
]
}
- 6、配置解析器,因为vue项目一般会用babel做转码,所以我们这里使用'babel-eslint'来做代码解析器。 同时需要支持es6的模块话。所以,需要如下配置:
module.exports = {
root: true,
env: {
browser: true
},
parserOptions: {
ecmaVersion: 11,
parser: 'babel-eslint',
sourceType: 'module'
},
extends: [
'plugin:vue/essential',
'standard'
],
plugins: [
'vue'
],
rules: [
semi: ['error', 'always']
]
}
这样,就形成了我们自己的配置规范。
附加
以下是作者自己配置的react项目的eslint代码检查,需要的请自取:
支持
-
react语法
-
react-hooks规范
-
standard规范
-
强制结尾添加分号
module.exports = {
root: true,
env: {
browser: true,
es6: true,
node: true
},
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
},
extends: [
'plugin:react/recommended',
// 启用hooks规范检查
'plugin:react-hooks/recommended',
'standard',
'standard-react'
],
plugins: [
'react',
'react-hooks'
],
rules: {
// 必须添加分号
semi: [2, 'always']
}
};
总结
本次ESLint的教程相对基础,因为此次教程旨在帮助初级工程师完善ESLint相关知识。
本次ESLint的教程到这里就结束了,这次教程虽然篇幅很短,但是干活满满,认真看完此次教程,我相信你会对ESLint的配置有进一步的认识,至少不会再一头雾水。