ESLint中的插件

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/09/25/ESLint%E4%B8%AD%E7%9A%84%E6%8F%92%E4%BB%B6/

摘要

本文主要讲述了：

插件命名规则
规则
环境
处理器
配置

正文

插件命名规则

每个 ESLint 插件都使用eslint-plugin-作为前缀。

例如：eslint-plugin-demo

规则

插件可以实现自己的规则，并暴露给 ESLint 使用。

示例：

eslint-plugin-demo/index.js

module.exports = {
  rules: {
    foo: {
      create: function (context) {
        // 规则实现
      },
    },
    bar: {
      create: function (context) {
        // 规则实现
      },
    },
  },
};

使用：

learn_eslint/.eslintrc.yaml

plugins:
  - demo
rules:
  demo/foo: error

环境

插件中的环境可以定义globals和parserOptions，并暴露给 ESLint 使用。

示例：

eslint-plugin-demo/index.js

module.exports = {
  environments: {
    foo: {
      globals: {
        $: 'readonly',
      },
      parserOptions: {
        es6: true,
      },
    },
  },
};

使用：

learn_eslint/.eslintrc.yaml

plugins:
  - demo
env:
  demo/foo: true

处理器

插件可以通过实现自定义处理器来帮助 ESLint 处理非 JavaScript 文件中的 JavaScript

示例：eslint-plugin-markdown实现了 markdown 处理器。使得 ESLint 具备处理 Markdown 中的 JavaScript 的能力

安装：

1
2
3

#!/usr/bin/env bash

npm install eslint-plugin-markdown --save-dev

使用：

learn_eslint/.eslintrc.yaml

root: true
env:
  browser: true
  es6: true
extends:
  - eslint:recommended
  - plugin:markdown/recommended

运行：

1
2
3

#!/usr/bin/env bash

npx eslint README.md

配置

插件可以在configs字段中定义若干组可供用户选择的具名配置。

示例：

eslint-plugin-demo/index.js

module.exports = {
  configs: {
    foo: {
      env: {
        browser: true,
      },
      rules: {
        'no-undef': 'warn',
      },
    },
    bar: {
      env: {
        browser: true,
      },
      rules: {
        'no-undef': 'error',
      },
    },
  },
};