阅读 738

浅谈Eslint中的extends和plugins

eslint在我们的项目中应用很广泛,关于rules部分看个人需求可以查阅文档,这里简单阐述一下我自己对extends和plugins的理解

extends

属性值可以是:

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

怎么理解:

它可以是一个eslint配置文件的路径,也可以是我们下载的npm包或者插件的名称,亦或者是eslint推荐的一些风格例如eslint:recommended 或 eslint:all。 当它是数组的时候,相当于是这些配置文件的集合,只不过后面相同名称的配置会覆盖之前的配置

书写规则:

  • 可共享的配置

简单解释就是把我们写的eslint规则抽出来,发布一个npm包供大家下载使用,通常输出的是一个配置对象

module.exports = {
    globals: {
        MyGlobal: true
    },
    rules: {
        semi: [2, "always"]
    }
}
复制代码

eslint-config开头的安装包,例如eslint-config-standard可以省略前面的eslint-config

extends: standard 或者 extends: eslint-config-standard这两种写法都可以

  • 插件

例如我们下载了一个eslint-plugin-vue的插件,本质上都是对rules的包装,那么怎么使用它呢,如下:

{
    "plugins": [
        "vue" // 这个是eslint-plugin-vue的缩写,插件声明
    ],
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended" // 这里是对改插件下的某一类配置对象的引用
    ],
    "rules": {
       "vue/require-v-for-key": "error" // 对具体eslint-plugin-vue插件下的某个规则的使用
    }
}
复制代码
  • 文件路径

extends 属性值可以是到基本配置文件的绝对路径,也可以是相对路径。ESLint 解析一个相对于使用它的配置文件的基本配置文件的相对路径。

{
    "extends": [
        "./node_modules/coding-standard/eslintDefaults.js",
        "./node_modules/coding-standard/.eslintrc-es6",
        "./node_modules/coding-standard/.eslintrc-jsx"
    ],
    "rules": {
        "eqeqeq": "warn"
    }
}
复制代码
  • Using "eslint:all/eslint:recommended"

值为 eslint:recommended 的 extends 属性启用一系列核心规则,这些规则报告一些常见问题,在 规则页面 中被标记为 。这个推荐的子集只能在 ESLint 主要版本进行更新。

值为 eslint:all,启用当前安装的 ESLint 中所有的核心规则。这些规则可以在 ESLint 的任何版本进行更改。不推荐使用

module.exports = {
    "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",
    }
}
复制代码

plugins

ESLint 支持使用第三方插件。在使用插件之前,你必须使用 npm 安装它。在配置文件里配置插件时,可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。

{
    "plugins": [
        "plugin1", // eslint-plugin-plugin1的简写
        "eslint-plugin-plugin2"
    ]
}
复制代码
文章分类
前端
文章标签