第n次认真研读eslint官网

楠楠酱
1,074 阅读6分钟

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

反正是不可能更到7篇了😭

eslint

参考文件

  1. 官网我个人感觉eslint的官网规划的有点儿乱呀，到处都是引用，有些东西又不知道去在哪个菜单里，只能靠搜索了。（希望不是我不会用）
  2. rswanderer/.eslintrc-parameter-instruction.js

1. 前置问题

1. ESLint 支持几种格式的配置文件，如果同一个目录下有多个配置文件，ESLint 只会使用一个。（执行命令eslint --init之后生成的是js文件）优先级顺序如下

  • JavaScript -使用.eslintrc.js然后输出一个配置对象。modules.exports = {}
  • JavaScript (ESM) 使用.eslintrc.cjs配置文件，但是要在package.json文件中指定type: module。⚠️目前eslint不支持esm配置
  • YAML - 使用.eslintrc.yaml或.eslintrc.yml去定义配置的结构。
  • JSON -使用.eslintrc.json去定义配置的结构，ESLint的JSON文件允许JavaScript风格的注释。
  • Deprecated -使用 .eslintrc，可以使 JSON 也可以是 YAML。
  • package.json - 在package.json里创建一个 eslintConfig属性，在那里定义你的配置。

当然了，我们还可以直接在命令行使用，并且命令行命令可以设置override(--config该命令指定的文件优先级最高)或者disabled(--no-eslintrc)或者merge.eslintrc.*文件

2. .eslintignore文件（类似gitignore）

  • 你可以通过在项目根目录创建一个.eslintignore文件告诉ESLint去忽略特定的文件和目录

  • .eslintignore文件是一个纯文本文件，其中的每一行都是一个glob模式表明哪些路径应该忽略检测

3. 配置规则格式

规则格式是<规则名称>: <告警级别>，告警级别分为三种:

  • "0" | "off", 表示忽略问题
  • "1" | "warn"表示给出警告
  • "2" | "error"表示直接报错(影响页面的正常运行，建议除非一些特别严重的，尽量设置为warn)
indent: ["error", 4] // 缩进为4个空格，如果不是就会报错

2. 配置文件

1. extends--使用预设的eslint包

  • 预设lint的包一般命名以eslint-config-xxx这样的格式，常见的预设包有standard，Airbnb等。一般可以省略eslint-config-，比如eslint-config-standard可以简写为standard
  • 如果选用了多个配置文件，是从右至左读取的，也就是前面的如果和后面的配置文件有重合，是会覆盖后面的。
// extends属性值可以是一个字符串或字符串数组
// 数组中每个配置项继承它前面的配置
// 可选的配置项如下
// 1.字符串eslint：recommended，该配置项启用一系列核心规则，这些规则报告一些常见问题，即在(规则页面)中打勾的规则
// 2.一个可以输出配置对象的可共享配置包，如eslint-config-standard
// 可共享配置包是一个导出配置对象的简单的npm包，包名称以eslint-config-开头，使用前要安装
// extends属性值可以省略包名的前缀eslint-config-
// 3.一个输出配置规则的插件包，如eslint-plugin-react
// 一些插件也可以输出一个或多个命名的配置
// extends属性值为，plugin：包名/配置名称
// 4.一个指向配置文件的相对路径或绝对路径
// 5.字符串eslint：all，启用当前安装的ESLint中所有的核心规则
// 该配置不推荐在产品中使用，因为它随着ESLint版本进行更改。使用的话，请自己承担风险
// 一般需要配合--fix命令进行修复
"extends": [
    "eslint:recommended",
    "standard",
    "plugin:react/recommended",
    "./node_modules/coding-standard/.eslintrc-es6",
    "eslint:all"
]

2. rules 简单来说，rules的规则是为extends而生的，如果我们没有写extends，那么其实也是没有必要写rules的。rules的作用就是用来扩展或者直接override我们的extends文件中的配置。

extends中的配置 + rules中的配置 -> 最终配置结果 以下为摘自官网的几个例子：

module.exports = {
    "extends": "eslint:recommended",
    "rules": {
        // enable additional rules
        "indent": ["error", 4],
        "linebreak-style": ["error", "unix"],
        "quotes": ["error", "double"],
        "semi": ["error", "always"],

        // override configuration set by extending "eslint:recommended"
        "no-empty": "warn",
        "no-cond-assign": ["error", "always"],

        // disable rules from base configurations
         "for-direction": "off",
    }
}

3. plugins

由于eslint本身主要是对js代码进行语法检查以及少量代码格式化的操作，对于一些eslint没有定义的规则或其他格式文件的内容就无法识别进行lint校验。此时，若需要对这些文件内容进行lint规则，就需要使用eslint提供的plugins插件配置对lint规则进行新增

// ESLint支持使用第三方插件
// 在使用插件之前，你必须使用npm安装它
// 全局安装的ESLint只能使用全局安装的插件
// 本地安装的ESLint不仅可以使用本地安装的插件还可以使用全局安装的插件
// plugin与extend的区别：extend提供的是eslint现有规则的一系列预设
// 而plugin则提供了除预设之外的自定义规则，当你在eslint的规则里找不到合适的的时候
// 就可以借用插件来实现了
"plugins": [
    "eslint-plugin-airbnb",
    //插件名称可以省略eslint-plugin-前缀
    "react"
]

4. root

ESLint will automatically look for .eslintrc.* or package.json files in all parent folders up to the root directory. This can be useful if you want all of your projects to follow a certain convention, but can sometimes lead to unexpected results.

一般在项目中，我们经常将lint文件放在根目录，因此为了没必要的向上遍历，一般我们会配置"root": true

// Eslint检测配置文件步骤：
// 1.在要检测的文件同一目录里寻找.eslintrc.*和package.json
// 2.紧接着在父级目录里寻找，一直到文件系统的根目录
// 3.如果在前两步发现有root：true的配置，停止在父级目录中寻找.eslintrc
// 4.如果以上步骤都没有找到，则回退到用户主目录~/.eslintrc中自定义的默认配置
"root": true,

5. env 指定环境，每个环境都有自己预定义的全局变量，可以同时指定多个环境。

These environments are not mutually exclusive, so you can define more than one at a time.

// .eslintrc.*文件
"env": {
    "node": true,
    "browser": true
}
// 文件内部注释
/* eslint-env node, mocha */

// 命令行
--env node

// 使用插件中的环境(需要使用/)
{
    "plugins": ["example"],
    "env": {
        "example/custom": true
    }
}

6. globals 可以定义全局变量的使用方式，比如window，browser等等

false和readable和readonly都表示只读

true和writeable和writable都是可写
// 示例
{
    "env": {
        "es6": true
    },
    "globals": {
        "Promise": "off"
    }
}

7. parse和parseOptions

{
  //ESLint默认使用Espree作为其解析器
  //同时babel-eslint也是用得最多的解析器
  "parser": "espree",

  //parser解析代码时的参数
  "parserOption": {
    //指定要使用的ECMAScript版本，3,5(default),6（2015）,7（2016）,8（2017）,9（2018）,10（2019）,11（2020）,12（2021）,13（2022），如果我们想不修改代码就一直想在本地使用新特性，设置为latest
    "ecmaVersion": lastest,
    //设置为script(默认)或module（如果你的代码是ECMAScript模块)
    "sourceType": "script",
    //这是个对象，表示你想使用的额外的语言特性,所有选项默认都是false
    "ecmafeatures": {
      //允许在全局作用域下使用return语句
      "globalReturn": false,
      //启用全局strict模式（严格模式）(如果 ecmaVersion是5或者greater)
      "impliedStrict": false,
      //启用JSX
      "jsx": false,
      //启用对实验性的objectRest/spreadProperties的支持
      "experimentalObjectRestSpread": false
    }
},

8. setttings

avatar
文章
阅读
粉丝