eslint 从0到1
简介
ESlint 可组装的javaScript和JSX检查工具, 提供一个插件化的javascript代码检测工具。
背景
平常开发中，难免出现笔误，书写不规范，多人开发代码风格迥异等问题。给代码留下难以察觉的问题， 此时就需要 eslint 这类代码检查工具，规范我们的代码。
- eslint 版本7.29.0
DEMO目录
- .eslintrc.js
- .eslintignore
- src
- index.ts
安装
// 全局安装
npm i -g eslint
// 本地安装，本地安装无法使用eslint命令
npm i -D eslint初始化
eslint --init
// or
npx eslint --init
image.png
image.png
image.png
image.png
image.png
image.png
根据命令行提示， 选择适合我们项目的eslint基础配置。将在目录下生成 。.eslintrc.* 配置文件。
设置package.json
{
"script": {
// 指定校验的目录, 如果全局安装eslint，也可直接调用, eslint ./src
"eslint": "eslint ./src"
}
}现在可以调用yarn eslint 查看校验结果。
常用命令行
- -c 指定配置文件
- -- env 指定环境
- --rule 指定规则
- -- fix 是自动否修复错误
.eslintrc.* 配置文件
通过配置文件控制文件校验的规则。
基础配置项
- env 指定包或项目的运行环境
针对不同的允许环境，存在不同的全局变量, 例如 浏览器中的 window， node 中的 process.env 等。 设置准确的环境，便于eslint 正确查询变量来源
{
"env": {
"browser": true, // 支持浏览器环境
"node": true // 支持 node 环境
}
}- parserOptions 编译选项
设置需要支持的语言类型或模式
{
"parserOptions": {
"ecmaVersion": 6, // 需要支持的ECMAScript 版本
"sourceType": "module", // 模块类型
"ecmaFeatures": { // 其他语言特性
"jsx": true, // 支持 jsx
"globalReturn": false, // 全局作用域下使用 return
...
}
},
}- rules 校验规则
通过为规则设置不同的等级或值，控制我们需要校验的语法或代码格式。
{
'semi': 'off', // 关闭分号结尾
'no-unused-vars' 'warn', // 未使用变量，警告提示
'no-undef': 'error', // 未定义或隐式全局变量, 报错提示
'linebreak-style': ['error', 'windows'], // 使用windows 换行符号, 否者报错。 通过数据设置规则详细属性
}rules 等级值设置方式
- 'off' | 0 禁用该规则
- 'warn' | 1 不符合规则时，警告提示
- 'error' | 2 不符合规则时, 报错提示
rules 属性设置 [规则等级值, 规则属性值] 例如:
lines-around-comment: ["error", { "beforeLineComment": true }],
'space-before-blocks': ['error', 'never'],- globals 全局变量
该属性允许我们设置自定义全局变量。
{
globals: {
'version': 'readonly', // 添加全局版本号，且该值为只读
'globalCache': 'writable' // 添加全局缓存，且该值可读写
}
}- extends 规则配置继承
允许我们继承其他eslint 配置规则文件或npm规则包, 例如: eslint-config-airbnb 一般独立eslint 规则包都以eslint-config 为包前缀, 实际配置时可省略
"extends": [
"eslint:recommended", // eslint: 扩展规则设置, 并设置为推荐。
"plugin:@typescript-eslint/recommended", // plugin: 导入插件内的规则文件, 这里表示， 查询插件 @typescript-eslint, 并导入规则文件 recommended
"@vue/airbnb", // 规则包, 等价于 @vue/eslint-config-airbnb， @vue 为包集合目录
"./node_modules/coding-standard/eslintDefaults.js", // 指定具体规则文件目录
]- plugins 插件
插件一般用来扩展新的校验规则，例如： @typescript-eslint 新增 ts 的语法校验规则
"plugins": [
"@typescript-eslint"
],进阶配置项
- parser 指定解析器
如何解析js代码
{
"parser": "esprima"
}- processor 处理器
从其他类型文件中提取或转换 js 代码
{
"processor": "a-plugin/a-processor"
}- settings 共享设置
该设置将作用于所有规则
{
"settings": {
"sharedData": "Hello"
}
}- overrides 针对不同文件的独立配置
某些情况下， 我们需要针对不同类型的文件设置不同的校验规则, 就可以用改该属性
overrides: [
{
files: [
// 为测试文件设置 jest 环境
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)',
],
env: {
jest: true,
},
},
]- root 是否停止向上查询
{
root: true // 停止向父级目录中寻找配置文件
}层叠配置， 配置优先级
- 默认 eslint 将遍历目录内的配置文件直到根目录, 更具目录层级，使用多个配置的合集。 距离目标文件越近的配置，优先级越高。 例如 子目录 > 父目录 > 根目录。
- 如果同级目录下存在 package.json, .eslintrc.* , package.json 内的配置将被忽略
- 可通过配置属性root 修改层叠规则
eslintignore 忽略文件
某些目录或文件不要做校验时，可在在目录下新增.eslintignore 文件 ， 写入需要忽略的目录或文件
// .eslintignore
node_modules/
dist/
lib/
bin/eslint 规则注释
有的情况下， 我们需要针对具体的代码指定规则。例如: 忽略部分为暂时未使用的变量。 这里可以使用规则注释
/* eslint-disable */ 忽略当前文件， 既不对该文件做
/* eslint-disable no-alert, no-console */ 禁用指定规则
// 禁用单行
alert('foo'); // eslint-disable-line
// eslint-disable-next-line
alert('foo');
alert('foo'); // eslint-disable-line no-alert