安装
安装eslint
yarn add eslint --dev
初始化配置文件
yarn create @eslint/config
选择你喜欢的使用模式
How would you like to use ESLint?
To check syntax only 仅仅检查语法
> To check syntax and find problems 检查语法并找到问题
To check syntax, find problems, and enforce code style 检查语法&找到问题,并格式化
这里我们选择地2个,默认的
你项目的module类型
What type of modules does your project use?
> JavaScript modules (import/export)
CommonJS (require/exports)
None of these
选择你用的框架
Which framework does your project use?
React
Vue.js
> None of these
完成选择后,就会生成如下配置,如果不是改为如下即可
基本配置
module.exports = {
env: {
node: true, // eslint的工作环境,一般都是node
},
extends: "eslint:recommended", // 启用最基本的内置预设规则集
parserOptions: { // 解析器选项。指定你想支持的语言,默认支持es5。指定啥语言,eslint就按照啥语法检查。
ecmaVersion: "latest"
},
rules: { // 自定义规则
indent: ["warn", "tab"] // 首行缩进
},
};
扩展配置(extends)
该属性可以是eslint命令,也可以是继承文件的路径。
eslint:all。 表示引入当前版本eslint的所有核心规则。
eslint:recommended。 表示引入eslint的核心功能,并且报告一些常见的共同错误。
如果值为绝对或相对路径则相当于导入路径对应的规则配置。
module.exports = {
extends: 'eslint:recommended'
};
module.exports = {
extends: './public-eslintrc.js'
};
代码检查并修正 的命令
"scripts": {
"lint": "eslint **/*.js",
"lint:fix": "eslint --fix **/*.js"
},
eslint 并不能修正所有代码,查看 eslint 文档就可以看到了,--fix 只能修正那些 fixable 的规则。
比如缩进可以自动修复,但是let误用为const就无法自动修复。
排除规则
overrides,如下意思是说 遇到vue文件,全局规则indent被重置为无效。
对于匹配 overrides.files 且不匹配 overrides.excludedFiles 的 文件, overrides.rules 中的规则会覆盖 rules 中的同名规则。
overrides: [{
"files": ["*.vue"],
"rules": {
"indent": "off",
}
}]
参考
ESLint配置详解:https://blog.csdn.net/mafan121/article/details/77965252
官方API:https://eslint.org/docs/user-guide/configuring/configuration-files#using-eslintrecommended
eslint --fix失败:https://segmentfault.com/q/1010000014288785/a-1020000014296366