当前位置: 首页 > 工具软件 > eslint-watch > 使用案例 >

eslint - 一篇笔记,让你看懂 eslint 的常用配置

仰翰采
2023-12-01

介绍

阅读前两个章节可以快速应对项目中的eslint规则调整/禁用的场景;

后面的使用示例常用配置推荐刚刚接触eslint的读者使用。

配置eslint语法规则

module.exports = {
  // ...
  "rules": {
    "semi": ["error", "always"],
    "camelcase": "off"
  }
}
错误级别说明
"off" / 0关闭规则
"warn" / 1不满足规则将生成警告
"error" / 2不满足规则将生成错误,会退出程序

 可以参考中文文档查看语法配置项的具体含义;

忽略eslint语法检查

忽略多个文件

[root]/.eslintignore

# 忽略build目录下类型为js的文件
build/*.js
# 忽略src/assets目录下文件
src/assets
# 忽略public目录下文件
public
# 忽略当前目录下为js的文件
*.js
# 忽略当前目录的demo.js文件
demo.js
# 忽略所有文件
*

忽略单个文件

忽略整个文件

/* eslint-disable */
some code
some code
<!--  eslint-disable-->
<template></template>
...

 在 .vue 文件中需要忽略整个文件的eslint校验时,语法如上。

忽略一段代码

/* eslint-disable */
some code
some code
/* eslint-enable */

忽略下一行

// eslint-disable-next-line
some code
// 使用示例
watch: {
  // eslint-disable-next-line
  'a.b': function () {
    this.loadList();
  },
},

忽略当前行

some code // eslint-disable-line
console.log(message); // eslint-disable-line no-console

使用示例

初始化项目

npm init -y

安装eslint依赖

npm install eslint --save-dev

初始化eslint,在项目根目录下生成 .eslintrc.*

npm run ./node_modules/.bin/eslint --init

.eslintrc.js

module.exports = {
  // ...
  "extends": "eslint:recommended"
}

 由于这行,所有在规则页面被标记为 ✔️ 的规则将会默认开启;

 也可以使用其他的配置集,或写成数组形式来使用多个配置集。

编写例子用于测试

demo.js

function dos() {
  console.log(123)
}
function dos() {
  console.log(456)
}

dos()

配置并启用脚本

package.json

"scripts": {
  "test": "node demo.js"
}
npm run test

 使用 vscode 时,还需要额外安装插件 ESLint 才能使校验生效;

常用配置

编写配置文件有以下三种方式,添加的配置将作用于整个目录:

  • 使用 JavaScript/json/yaml,编写对应的 .eslintrc.* 配置;

  • 直接在 package.json 文件里的 eslintConfig 字段配置;

  • 在命令行指定需要运行的配置文件。

    eslint -c test.js
    

配置规则项

配置 rules 可以对细粒度的语法规则进行配置

module.exports = {
  // ...
  "rules": {
    "semi": ["error", "always"],
    "camelcase": "off",
    "plugin1/rule1": "off"
  }
}

 属性名为规则名称,字符串/数组首参为设置的错误级别;

 规则 plugin1/rule1 表示来自插件 plugin1rule1 规则,

 指定来自插件的规则时,需要删除 eslint-plugin- 前缀。

错误级别说明
"off" / 0关闭规则
"warn" / 1不满足规则将生成警告
"error" / 2不满足规则将生成错误,会退出程序

支持ES6

module.exports = {
  // ...
  "parserOptions": {
    "ecmaVersion": 6
  },
  "env": {
    "es6": true
  }
}

指定解析器

module.exports = {
  // ...
  "parser": {
    "ecmaVersion": "esprima"
  }
}
可选值说明
babel-eslint(废弃)保证 babel,以实现与 eslint 兼容
@babel/eslint-parserbabel-selint 的新实现
@typescript-eslint/parser能够实现 ts 与 eslint 的兼容

 使用了自定义解析器后,也需要配置 parserOptions,它会传入解析器,来决定是否启用 es6 等。

指定环境

每个环境都有对应的预定义好的全局变量,让 eslint 知道它们的存在,方便在项目中使用,且不报错。

module.exports = {
  // ...
  "env": {
    "browser": true,
    "node": true
  }
}
可选值说明
browser浏览器环境中的全局变量
nodeNode.js 全局变量和 Node.js 作用域
commonjscommonjs 全局变量和 commonjs 作用域
es6启用除了 modules 以外的所有 ECMAScript 6 特性
es6该选项会自动设置 ecmaVersion: 6,即支持 es6

定义全局变量

需要在源文件中使用未定义变量时,为避免报错需要进行配置:

module.exports = {
  // ...
  "globals": {
    "var1": "writable", // 允许重写
    "var2": "readonly"  // 只读
  }
}

 要启用 no-global-assign 规则来禁止对只读的全局变量进行修改。

使用插件

module.exports = {
  // ...
  "plugins": [
    "eslint-plugin-plugin1",
    "plugin2"
  ]
}

 使用插件前需要先安装插件依赖;

 插件名称可以省略 eslint-plugin- 前缀。

层叠配置

取当前目录与祖先目录配置文件的并集,当前目录规则优先。

your-project
├── package.json
├── lib
│ └── source.js
└─┬ tests
  ├── .eslintrc
  └── test.js

附录

更多资料

eslint配置文档-中文

eslint-命令行文档

eslint-plugin-vue文档

eslint-plugin-vue配置文档

参考资料

补充的话

仓库,还提供了许多前端常见需求及实现的归纳整理,欢迎客官看看~

如果这篇笔记能够帮助到你,

 类似资料: