[ESLint] 项目中添加eslint及eslint配置

以vue2项目为例，说明如何添加eslint，及如何进行eslint规则的配置

1、安装依赖项
npm install eslint babel-eslint eslint-config-airbnb-base eslint-config-prettier eslint-plugin-vue -D

其中eslint就是主要依赖项
babel-eslint 是解析器
eslint-config-airbnb-base, eslint-config-prettier 这两个是附加规则

eslint-plugin-vue 这个是eslint的插件，可以使用plugin插件的方式放入项目的eslint规则集中；也可以使用extends拓展的方式放入项目eslint规则集中。

2、配置eslint规则集
.yml、.json 和 .js 是ESLint支持三种的配置文件格式，它们用于存储 ESLint 的配置信息。这三种配置文件的优先级关系是： .js > .json > .yml

当同时存在 .eslintrc.js 和 .eslintrc.json 文件时，ESLint 将使用 .eslintrc.js 文件的配置，并忽略 .eslintrc.json 文件的配置。

在项目中新建 .eslintrc.js 填入如下配置
// .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es6: true
  },
  extends: [
    "eslint-config-airbnb-base",
    "eslint:recommended",
    "plugin:vue/recommended",
    "eslint-config-prettier",
    "eslint-config-prettier/vue"
  ],
  parserOptions: {
      parser: "babel-eslint"
  },
  rules: {
      "no-console": "off"
      //...
  }
}

其中rules是自定义配置。

逐条说明配置项的作用：
env: { browser: true, es6: true }：指定代码运行的环境。在这个配置中，browser: true 表示代码运行在浏览器环境中，es6: true 表示代码使用了 ECMAScript 6（ES6）的特性。

extends: [...]：继承其他的 ESLint 配置。在这里，该项目继承了以下配置：

eslint-config-airbnb-base：Airbnb 公司的 JavaScript 代码规范，该配置基于 ECMAScript 5 和 Node.js 环境。
eslint:recommended：ESLint 推荐的一组规则，包括一些常见的代码规范和错误检查。
plugin:vue/recommended：用于 Vue.js 项目的一组推荐规则，包括 Vue.js 相关的代码规范和错误检查。
eslint-config-prettier 和 eslint-config-prettier/vue：用于与 Prettier（代码格式化工具）共享的一组规则，以避免规则之间的冲突。
parserOptions: { parser: "babel-eslint" }：指定解析器选项。在这个配置中，使用了 babel-eslint 解析器来解析 JavaScript 代码，以支持 ECMAScript 6 和 Babel 的语法。

rules: { ... }：自定义规则。在这个配置中，可以定义自定义规则，可以禁用默认规则：
如"no-console": "off"：禁用对 console 调用的检查，不产生警告或错误。

3、命令行调用eslint校验代码
在package.json的scripts中添加下面两条script

"lint": "eslint \"src/**/*.{js,vue,html}\"",
"lint:fix": "eslint \"src/**/*.{js,vue,html}\" --fix",

如果需要进行代码的校验，npm run lint。如果需要eslint进行校验并修复，npm run lint:fix。有些代码问题eslint不能自动修复，还需要手动解决问题。

完结。

同步更新到自己的语雀
https://www.yuque.com/dirackeeko/blog/yo0ztqw6m3dkkaa1