eslint介绍

eslint 是代码检查工具

安装及初始化eslint

npm install eslint --save-dev
npx eslint --init
npx eslint yourfile.js

配置文件查找规则

1. 优先使用离被检测文件最近的.eslintrc , 没有就依次查找上级目录里的配置文件，等等。
2. 如果同一目录下 .eslintrc 和 package.json 同时存在，.eslintrc 优先级高会被使用。
3. 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
4. 如果不是以上任何一种情况，退回到 ~/.eslintrc 中自定义的默认配置。

Eslint基本配置

module.exports = {
  // 指定运行环境，预定义全局变量
  "env": {
    "browser": true, // node,commonjs,jquery,jest...
  },
  // 扩展
  "extends": [
    "eslint:recommended",  // 使用内置推荐
    // "airbnb-base", // 使用别人创建好的配置
    // "plugin:vue/recommended", // 使用插件中的配置
    // "./some-local-config.js", // 使用本地配置
  ],
  // 支持的JavaScript 语言选项
  "parserOptions": {
      "parser": "babel-eslint", // 指定解析器
      // "ecmaVersion": 2021, // 表示支持解析es2021语法
      // "sourceType": "module" // 表示解析es模块
      // "ecmaFeatures": { // 表示解析其他特性
      //   "jsx": true, // 启用 JSX
      // }
  },
  // 自定义规则
  "rules": {
    "indent": [ "error", 2 ], // [错误级别，可用选项 ]
    "vue/no-v-html": "off" // off | 0； warn | 1；error | 2；
  }
};

通过注释禁用规则

/* eslint-disable */
/* eslint-disable no-alert, no-console */
// eslint-disable-next-line
// eslint-disable-next-line no-alert, quotes

eslint-config 和 eslint-plugin 的区别

eslint-plugin-* 是一套规则的集合，增强了eslint的校验范围，比如eslint-plugin-vue可以用来校验vue文件。

eslint-config-* 是一个配置说明，可以决定开启和禁用哪些规则，比如eslint-config-standard就制定了一套标准。

整合到git流程

提交代码的时候自动检查并修复 - 使用husky来设置git hooks。

配合vscode自动格式化代码

安装vscode插件eslint

配置 .vscode/settings.json文件

{
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
    }
}