Eslint配置详解（一）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

团队刚引入eslint，目的是用程序去约束成员，远比让人自觉规范好用的多，但也因此踩了许多坑，一步步进行配置，以可以适应的程度逐渐去约束，其中先了解要安装哪些插件以及更方便的去配置

先看看package.json中安装过了哪些依赖

"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-config-standard": "^14.1.1",
"eslint-plugin-html": "^6.2.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-standard": "^5.0.0",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^2.2.1",
"eslint-plugin-vue": "^6.2.2",

以上是目前项目中涉及ESLINT相关的依赖以及版本，其中当有版本报错的时候可以参考一下我目前的版本

root

默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。如果发现配置文件中有 “root”: true，它就会停止在父级目录中寻找

因此这里是一个开启的状态 "root": true

parser

解析器，默认使用Espree

这里因为安装了eslint-plugin-vue，vue-eslint-parser

所以可以指定 parser: 'vue-eslint-parser',

目的是为了支持Vue

parserOptions

用于指定javaScript语言类型和风格

parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
  }

通过安装 babel-eslint来指定parser

再指定js导入的方式设置sourceType

globals

顾名思义设置一些全局配置

比如：

  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
    process: true,
    common: true,
    module: true,
    require: true
  },

这里是对require，module等进行避免检测，不然引入的一些文件会疯狂报错

rules

包含ESLINT的规则代码

module.exports = {
    rules: { "规则名": [规则值, 规则配置] } 
}

具体规则包含过多，并且可能会涉及更新的问题，所以建议是去文档里查看

其中规则值这个位置，主要是这几个参数

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

prettier

这是拿来格式化用的，很方便

在package.json中配置scripts，然后 npm run format，可以对src里的js以及vue进行一个整体的格式化，能自动化的东西就不要手动去搞了

  "scripts": {
    "format": "prettier --write \"src/**/*.js\" \"src/**/*.vue\""
  },