eslint入门

现在很多框架已经集成了eslint。但是如果不懂，写几行代码就是各种警告或者错误。这就造成了很多一部分小伙伴觉得eslint不好，然后就取把eslint给禁止了。

那eslint到底有什么用呢？

看官网解释： ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。
首先如果团队多人的情况下，团队有一套默认的规则，那对于后期维护等会减少很多沟通成功。
然后避免错误这个也很重要。比如代码里面定义了一个变量 var test=1;
然后在一定的条件下再触发获取test.但是代码写错了。写成获取 tset。那这个时候，eslint的报错就很重要了。

开始

创建一个项目

mkdir test // 创建test 文件夹
cd test // 进入文件夹
yarn init -y // 初始化项目
yarn add -D eslint // 安装eslint
mkdir src // 创建我们需要用eslint坚持的文件夹

打开 package.json 文件，增加 scripts 属性如下：

  "scripts": {
    "lint": "eslint src --fix", // fix会根据配置规格修改部分错误
    "lint:create": "eslint --init"
  }

初始eslint。运行命令

yarn lint:create

出现一堆选项

// 你想怎么用eslint
1、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 // 检查并查找错误 并且强制代码风格
// 然后问我们项目用什么模块开发
What type of modules does your project use? … 
> JavaScript modules (import/export) // es6的import/exports
  CommonJS (require/exports) // node使用的require/exports
  None of these // 不要
// 项目使用的什么框架。由于我们是test，所有选择none of  thest
Which framework does your project use? … 
 React
  Vue.js
>  None of these
// 是否使用typscript
Does your project use TypeScript? › No / Yes
// 你的代码是在客户端还是node环境运行，可以多选。都选吧
Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node
// 用什么方式来做配置，这里其实都差不多，我们就需要js吧
What format do you want your config file to be in? … 
❯ JavaScript
  YAML
  JSON

这时就生成了配置文件.eslintrc.js了

.eslintrc.js 文件中我添加了两条规则以便于测试，console警告，引号必须用单引号

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
        "no-console": 'warn', 
        "quotes": ['error', 'single']
    }
};

现在我们进入src文件创建一个a.js文件。

a.js

var a = "345";
b = 4;
console.log('sdf');

然后运行yarn lint;
这个时候控制台就提示了一个错误了

  1:5  error    'a' is assigned a value but never used  no-unused-vars
  2:1  error    'b' is not defined                      no-undef
  3:1  warning  Unexpected console statement            no-console

此时证明我们的eslint生效了。
然后a.js由于有--fix所有双引号也改为了单引号

var a = '345';
b = 4;
console.log('sdf');

eslint可以配置的方式

ESLint 支持几种格式的配置文件：
JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
JSON - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
(弃用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML。
package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置

如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下：

.eslintrc.js
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
.eslintrc
package.json

部分配置讲解

Environments（env） - 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。

(比如配置文件中 browser:true。这时我们写window对象才不会报错，node:true才能用node中的全局变量global)

Globals - 脚本在执行期间访问的额外的全局变量。

(这里我们可以定义一些全局变量，这样eslint就不会报错了)
"globals": {
"var1": "writable",
"var2": "readonly"
}
//var1 允许被重写，var2 不允许被重写。

Rules - 启用的规则及其各自的错误级别。（我们可以对于某些规则修改配置）这个就是我们一般需要修改的重要配置https://eslint.bootcss.com/docs/rules/建议去大概看一下这些规则

"off" 或 0 - 关闭规则
"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

可以使用 rules 连同错误级别和任何你想使用的选项
数组的第一项总是规则的严重程度（数字或字符串）
比如： "quotes": ["error", "double"] 必须使用双引号

extends 一个配置文件可以被基础配置中的已启用的规则继承，其中eslint:recommended是默认规则。然后我们在rules里面修改规则，会扩展或者覆盖掉。
parserOptions - 指定你想要支持的 JavaScript 语言选项
比如 ecmaVersion 指定 ECMAScript 版本;我们也可以改为支持的es6.目前是最新版本支持；
sourceType - 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)
ecmaFeatures- 这是个对象，表示你想使用的额外的语言特性比如使用jsx等。
plugins 插件]是一个 npm 包，通常输出规则。一些插件也可以输出一个或多个命名的配置。要确保这个包安装在 ESLint 能请求到的目录下。

plugins 属性值可以省略包名的前缀 eslint-plugin-。
extends 属性值可以由以下组成：

plugin:

包名 (省略了前缀，比如，react)

/

配置名称 (比如 recommended)

JSON 格式的一个配置文件的例子：

{
    "plugins": [
        "react"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "rules": {
       "no-set-state": "off"
    }
}

项目中不使用根规则

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

我们运行eslint检测的test.js文件时，会找最近的 .eslintrc文件作为最高优先级，然后才是父目录里的配置文件；这时就寻找的tests文件夹下的.eslintrc规则。
为了将 ESLint 限制到一个特定的项目，在你项目根目录下的 package.json 文件eslintConfig 或者 .eslintrc.* 文件里设置 "root": true。ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找

Glob 模式

有时候需要更精细的配置，比如，如果同一个目录下的文件需要有不同的配置,但是又不想创建多个.eslintrc.js。因此，你可以在配置中使用 overrides 键，它只适用于匹配特定的 glob 模式的文件，使用你在命令行上传递的格式 (e.g., app//.test.js)。
Glob 模式覆盖只能在配置文件 (.eslintrc. 或 package.json) 中进行配置
比如：

{
  "rules": {
    // 校验使用双引号
    "quotes": ["error", "double"]
  },
// bin文件夹下和lib文件夹下的js文件使用单引号，但是要排除以.test.js结尾的我那件
  "overrides": [
    {
      "files": ["bin/*.js", "lib/*.js"],
      "excludedFiles": "*.test.js",
      "rules": {
        "quotes": ["error", "single"]
      }
    }
  ]
}

git 提交前检查

我们使用pre-commit;
在刚才的基础上

git init; 初始化项目
yarn add -D pre-commit;

package.json 中增加pre-commit

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "eslint": "^7.20.0"
  },
  "pre-commit": ["lint"], // 把eslint 加入数组中，提交前会先运行这个命令
  "scripts": {
    "lint": "eslint src --fix",
    "lint:create": "eslint --init"
  }
}

这样在我们git commit 的时候就会检查是否符合eslint了。如果不符合就会终止，修改符合之后才能提交。或者在commit 后面添加 --no-verify

题外

如果我们的项目中有套eslint规则，但是我们vscode需要格式化就自动修复。那我们需要安装eslint插件，然后进入文件 > 首选项 > 设置- setting.json中配置

//配置eslint
  "eslint.autoFixOnSave": true, //  启用保存时自动修复,默认只支持.js文件
  "eslint.runtime": "",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
  ],