欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

手模手配置Eslint,看懂脚手架中的Eslint

程序员文章站 2022-04-17 22:11:54
使用ESLint前:eslint是干嘛的,我这样写有什么问题,怎么还报错了,太麻烦想去掉这个插件,脚手架中关于eslint文件里的配置是什么意思?怎么设置配置项和规则达到自己想要的检测效果呢?怎么集成到VSCODE实现自动修复呢? 所以本片博文介绍ESLint是什么,配置项的意思,启用elsint推 ......

使用eslint前:
eslint是干嘛的,我这样写有什么问题,怎么还报错了,太麻烦想去掉这个插件,脚手架中关于eslint文件里的配置是什么意思?
怎么设置配置项和规则达到自己想要的检测效果呢?怎么集成到vscode实现自动修复呢?

所以本片博文介绍eslint是什么,配置项的意思,启用elsint推荐的规则及eslint-plugin-vue推荐规则检测项目,集成到vscode修复可自动修复的选项。
希望这篇文章可以让你看得懂elsint文件里的配置项及开启/关闭规范规则保持代码规范。

一.eslint是什么:

  • eslint 是在 ecmascript/javascript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。
  • eslint 可以让程序员在编码的过程中发现问题而不是在执行的过程中。
  • eslint 的初衷是为了让程序员可以创建自己的检测规则,所以的所有规则都被设计成可插入的。每条规则各自独立,可以开启或关闭,配置项实现细粒度的控制。

 二.配置项:

1.配置方式:
1.1.javascript注释:

作用:临时禁止某些lint 规则出现的警告。

使用 javascript 注释把配置信息直接嵌入到一个代码源文件中

/* eslint-disable */
alert('/* eslint-disable */ 块注释放在文件顶部,整个文件范围内禁止规则出现警告');

/* eslint-disable-next-line */
alert('/* eslint-disable-next-line */块放在上行,本行禁止出现警告');

alert('/* eslint-disable-next-line */块放在本行后行,本行禁止出现警告'); /* eslint-disable-line */

/* eslint-disable no-alert, no-console */
/* eslint-enable no-alert, no-console */

alert('对指定的一个或者多个规则启用或禁用警告');
console.log('对指定的一个或者多个规则启用或禁用警告');

上面的所有方法同样适用于插件规则:
例如,禁止 eslint-plugin-example 的 rule-name 规则,把插件名(example)和规则名(rule-name)结合为 example/rule-name:

foo(); /* eslint-disable-line example/rule-name */

2.配置文件:

作用:一般用配置文件配置eslint

2.1eslint 支持几种格式的配置文件:

  • javascript - 使用 .eslintrc.js 然后输出一个配置对象。
  • yaml - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
  • json - 使用 .eslintrc.json 去定义配置的结构,eslint 的 json 文件允许 javascript 风格的注释。
  • (弃用) - 使用 .eslintrc,可以使 json 也可以是 yaml。
  • package.json - 在 package.json 里创建一个 eslintconfig属性,在那里定义你的配置。

2.2 同一个目录下有多个配置文件的优先级:
同一个目录下有多个配置文件,eslint 只会 使用 一个。优先级顺序如下:
.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json >.eslintrc(已经弃用) >package.json

2.3 层叠配置:
如下结构:
your-project
├── .eslintrc.js
├── lib
│ └── source.js
└─┬ tests
├── .eslintrc.js
└── test.js

1.层叠配置使用离要检测的文件最近的 .eslintrc文件作为最高优先级,然后才是父目录里的配置文件:
eslint检测时,lib/ 下面的所有文件将使用项目根目录里的 .eslintrc 文件作为它的配置文件。---对应使用父目录里的配置文件(如有node_modules,node_modules文件夹内依赖的不会被使用,因为不是父目录)

当 eslint 遍历到 test/ 目录,your-project/.eslintrc 之外,它还会用到 your-project/tests/.eslintrc。
所以 your-project/tests/test.js 是基于它的目录层次结构中的两个.eslintrc 文件的组合,并且离的最近的一个优先。

2.将 eslint 限制到一个特定的项目:
默认情况下,eslint 会在所有父级目录里寻找配置文件,一直到文件系统的根目录。
为了将 eslint 限制到一个特定的项目,在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件里的 eslintconfig 字段下设置 "root": true。
eslint 一旦发现配置文件中有 "root": true,它就会停止在父级目录中寻找。

2.4 解析器及解析器选项:

2.4.1 parser配置项:

作用:指定解析javascript的解析器。

eslint 默认使用espree作为其解析器,解析javascript。

{
  "parser": "espree",
  "parseroptions":{}
}

你可以在配置文件中指定一个不同的解析器,只要该解析器符合下列要求:
它必须是一个 node 模块,可以从它出现的配置文件中加载。通常,这意味着应该使用 npm 单独安装解析器包。
它必须符合 parser interface。

以下解析器与 eslint 兼容:
esprima
babel-eslint - 一个对babel解析器的包装,使其能够与 eslint 兼容。
@typescript-eslint/parser - 将 typescript 转换成与 estree 兼容的形式,以便在eslint中使用。

在使用自定义解析器时,为了让 eslint 在处理非 ecmascript 5 特性时正常工作,配置属性 parseroptions 仍然是必须的。
解析器会被传入 parseroptions。(使用第三方插件会涉)

2.4.2 parseroptions 配置项:

作用:解析器选项,配置es版本,sourcetype,额外的语言特性。

parseroptions 属性可用的选项有:

1.ecmaversion - 默认设置为 3,5(默认), 你可以使用 6(或者年份同 2015)、7、8、9 或 10 来指定你想要使用的 ecmascript 版本。

2.sourcetype - 设置为 "script" (默认) 或 "module"(如果你的代码是 ecmascript 模块)。

3.ecmafeatures - 这是个对象,表示你想使用的额外的语言特性:
globalreturn - 允许在全局作用域下使用 return 语句
impliedstrict - 启用全局 strict mode (如果 ecmaversion 是 5 或更高)
jsx - 启用 jsx

设置解析器选项能帮助 eslint 确定什么是解析错误,所有语言选项默认都是 false。

eslint支持 es6 语法并不意味着同时支持 新的 es6 全局变量或类型(比如 set 等新类型)。
对于 es6 语法,使用 { "parseroptions": { "ecmaversion": 6 } },但{ "parseroptions": { "ecmaversion": 6 } }不自动启用es6全局变量,对于新的 es6 全局变量,使用 { "env":{ "es6": true } }。
{ "env": { "es6": true } } 自动启用es6语法和启用es6全局变量。

2.5 globals:

作用:提前声明全局变量,以免eslint 发出警告,有些变量是我们引入的库声明的,需要提前在配置中声明,例如jquery的$。

当访问当前源文件内未定义的变量时,no-undef 规则将发出警告。
如果你想在一个源文件里使用全局变量,推荐你在 eslint 中定义这些全局变量,这样 eslint 就不会发出警告了。
要在配置文件中配置全局变量,请将 globals 配置属性设置为一个对象,该对象包含以你希望使用的每个全局变量。
对于每个全局变量键,将对应的值设置为 "writable" 以允许重写变量,或 "readonly" 不允许重写变量。例如:

{
    "globals": {
        "$": false,
        "var1": "writable",
        "var2": "readonly"
    }
}

2.6 env 关键字指定你想启用的环境

作用:在 globals 中一个个的进行声明太过繁琐,使用到 env就能避免这种繁琐 ,env配置是对一个环境定义了一组预定义的全局变量。

可用的环境包括:

  • browser - 浏览器环境中的全局变量。
  • node - node.js 全局变量和 node.js 作用域。
  • es6 - 启用除了 modules 以外的所有 ecmascript 6 特性(该选项会自动设置 ecmaversion 解析器选项为 6)。jquery - jquery 全局变量。等等。。。
  • 这些环境并不是互斥的,所以你可以同时定义多个。
{
  "env": {
  "browser": true,
  "node": true
 }
}

2.7 plugins:

作用:使用他人写好的规则插件。

使用第三方(规则)插件。在使用插件之前,你必须使用 npm 安装它,是一个 npm 包,通常输出规则,规则默认关闭

使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。

{
  "plugins": [
  "plugin1",
  "eslint-plugin-plugin2"
 ]
}

2.8 extends:

作用:启用规则继承。

启用的规则继承,属性值可以是:

1.指定配置的字符串(配置文件的路径、可共享配置的名称、eslint:recommended 或 eslint:all)
2.字符串数组:每个配置继承它前面的配置

extends 属性值可以由以下组成:
包名 (省略了前缀,比如,react)
/
配置名称 (比如 recommended)

"plugins": [
  "vue"
],
"extends": [
  "eslint:recommended",//启用elsint推荐的规则
  "plugin:vue/recommended" //启用eslint-plugin-vue推荐的规则
],

2.9 rules:

作用:检测的规则。

eslint 附带有大量的规则,所有的规则默认都是禁用的。
在配置文件中,使用 "extends": "eslint:recommended" 来启用推荐的规则,报告一些常见的问题,
在eslint中文文档中这些都带有一个标记。

要改变一个规则设置,你必须将规则 id 设置为下列值之一:

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

使用数组连同错误级别和任何你想使用的选项
配置定义在插件中的一个规则的时候,你必须使用 插件名/规则id 的形式。

{
  "plugins": [
    "plugin1"
 ],
"rules": {
  "eqeqeq": "off",
  "curly": "error",
  "quotes": ["error", "double"],
  "plugin1/rule1": "error"
 }
}

规则 plugin1/rule1 表示来自插件 plugin1 的 rule1 规则。

rules 属性可以做下面的任何事情以扩展(或覆盖)规则:

  1. 启用额外的规则
  2. 改变继承的规则级别而不改变它的选项:
  3. 基础配置:"eqeqeq": ["error", "allow-null"]
  4. 派生的配置:"eqeqeq": "warn"
  5. 最后生成的配置:"eqeqeq": ["warn", "allow-null"]
  6. 覆盖基础配置中的规则的选项
  7. 基础配置:"quotes": ["error", "single", "avoid-escape"]
  8. 派生的配置:"quotes": ["error", "single"]
  9. 最后生成的配置:"quotes": ["error", "single"]

如:

module.exports = {
//值为 "eslint:recommended" 的 extends 属性启用一系列核心 
规则,这些规则报告一些常见问题,在 规则页面 中被标记为打勾。
"extends": "eslint:recommended",
"rules": { 
  // enable additional rules
  "indent": ["error", 4],
  "linebreak-style": ["error", "unix"],
  "quotes": ["error", "double"],
  "semi": ["error", "always"],

  // override default options for rules from base configurations
  "comma-dangle": ["error", "always"],
  "no-cond-assign": ["error", "always"],

  // disable rules from base configurations
  "no-console": "off",
 }
}

 

三.使用eslint-plugin-vue插件规则:

3.1. eslint-plugin-vue:

vue.js官方eslint插件,检查.vue文件中的<template> and <script>,查找语法,vue指令,vue风格指南错误。

3.2.用法:

example .eslintrc.js:

module.exports = {
  extends: [
    // 在这里添加通用的规则, 例如:
    'eslint:recommended',
    'plugin:vue/recommended'//extends里面有这选项相当于多设置了,"parser": "vue-eslint-parser"
  ],
  rules: {
    // 在这里覆盖/添加 rules, 例如:
    // 'vue/no-unused-vars': 'error'
  }
}

3.3.parser问题:
如果使用其他通用parsers,如babel-eslint,需要把他写在parseroptions.parser里面而不是parser选项里
因为eslint-plugin-vue需要vue-eslint-parser解析器.vue文件。重写parser选项会导致eslint-plugin-vue不能使用。

- "parser": "babel-eslint",
+ "parser": "vue-eslint-parser", //extends里面有'plugin:vue/recommended'相当于多设置了"parser": "vue-eslint-parser"。
  "parseroptions": {
+     "parser": "babel-eslint",
      "sourcetype": "module"
  }

3.4.plugin:vue/xxx的取值:

  • base
  • essential
  • strongly-recommended
  • recommended

取值对应启用的规则,访问。

四.  .eslintrc.js实例及集成到vscode自动修复

4.1.启用eslint推荐规则和eslint-plugin-vue规则示例:

module.exports = {
  "root": true,
  "env": {
      "browser": true,
      "node": true,
      "es6": true,
  },
  "parseroptions": {
     "parser": "babel-eslint",
     "sourcetype": "module"
  }
  "extends": [
    'eslint:recommended',
    'plugin:vue/recommended'
  ],
  "rules": {
    // 在这里覆盖/添加 rules, 例如:
    'vue/no-unused-vars': 'error'
  }
}

 4.2.集成到vscode

需在vscode拓展中安装eslint插件,在vscode设置->settings.json

{
    "prettier.semi": false,//设置语句结尾不加分号
    "prettier.singlequote": true,//设置单引号
    "eslint.autofixonsave": true,//设置eslint自动处理可修复的规则
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {"language": "vue","autofix": true}//处理可修复的vue检测规则
    ],
    "vetur.validation.template": false,//使用vetur插件要关闭这项
}