eslint

安装

安装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

posted @ 2022-04-07 13:59  丁少华  阅读(206)  评论(0)    收藏  举报