eslint从入门到放弃（六）eslint 配置之plugins（插件）

上文说了eslint配置之extends（共享配置），今天说下ESLint配置中的plugins（插件），前文传送门，

eslint从入门到放弃（一）eslint入门

eslint从入门到放弃（二）esLint配置之globals

eslint从入门到放弃（三）ESLint配置之env（三）

eslint从入门到放弃（四）eslint配置之规则

eslint从入门到放弃（五）eslint配置之extends（共享配置）

大家好我是【小枫学幽默】，这是我eslint从入门到放弃系列教程的第六篇，欢迎关注后续更新。接下来步入正题：

ESLint配置之plugins（插件）

ESLint 的插件是个啥？这玩意儿有啥用？

ESLint 自己有提供非常丰富的的 rules，也可以通过 extends 来引入更多的规则，但是说到底只是检查 JS 语法。如果需要检查 promise的语法是否符合预期，或Vue 中的 template 或者 React中的 jsx，就束手无策了。所以引入插件的目的就是为了增强 ESLint 的检查能力和范围。

如何配置插件（我们以eslint-plugin-promise为例）

让我们先新建一个demo目录，文件结构如下

demo
├── .eslintrc.js
├── package.json
└── rules.js

安装eslint-plugin-promise插件

npm install eslint eslint-plugin-promise --save-dev

# 当前demo 使用的 eslint 版本为 3.14.1
# 当前demo 使用的 eslint-plugin-promise 版本为 3.8.0

在 .eslintrc.js中使用eslint-plugin-promise

module.exports = {
    "plugins": [
        // 简写，跟下面是一样的，插件命名为eslint-plugin-*时，可以省略eslint-plugin-前缀
        'promise',
        // 跟下面是一样的，插件命名为eslint-plugin-*时，可以省略eslint-plugin-前缀
        // 'eslint-plugin-promise', // 全插件名
    ]
}

在 .eslintrc.js中使用eslint-plugin-promise的规则

module.exports = {
    "plugins": [
        'promise',
    ],
    "rules": {
        // 禁止使用未定义的变量
        "no-undef": "error",
        // 禁止在Promise的finally回调中返回值
        "promise/no-return-in-finally": "error",
        // 禁止使用new Promise.resolve()
        "promise/no-new-statics": "error",
    },
    // 我这里认为 Promise 是全局变量，告诉 ESLint，Promise 是全局变量，不需要检查
    globals: {
        Promise: 'readonly',
    }
}

创建 rules.js文件，使用eslint来校验它

rules.js

Promise.resolve().then(function (data) {
    //这里使用了上下问未定义的变量 doSomethingWithCb 会触发no-undef规则
    doSomethingWithCb(data, function () {});
});

// 在Promise的finally回调中返回了值，会触发no-return-in-finally规则
Promise.resolve().finally(function () {
    return 'finally'
});
// 使用了new Promise.resolve()，会触发no-new-statics规则
var promise = new Promise.resolve('value');

用eslint校验下rules.js

npx eslint rules.js -c .eslintrc.js

demo/rules.js
  2:5   error  'doSomethingWithCb' is not defined          no-undef
  4:19  error  No return in finally                        promise/no-return-in-finally
  7:15  error  Avoid calling 'new' on 'Promise.resolve()'  promise/no-new-statics

一个一个规则配置太麻烦，怎么能使用这个插件最佳实践（推荐）的规则呢？

还记得我们第四课讲的extends吗？extends可以继承插件的最佳实践，我们只需要在extends中引入plugin:promise/recommended即可

module.exports = {
    "extends": ["plugin:promise/recommended"],
    "plugins": [
        'promise',
    ],
    "rules": {
        // 禁止使用未定义的变量
        "no-undef": "error",
    },
    // 我这里认为 Promise 是全局变量，告诉 ESLint，Promise 是全局变量，不需要检查
    globals: {
        Promise: 'readonly',
    }
}

用eslint校验下rules.js

npx eslint rules.js -c .eslintrc.js

demo/rules.js
  1:1   error    Expected catch() or return                  promise/catch-or-return
  1:24  error    Each then() should return a value or throw  promise/always-return
  2:5   error    'doSomethingWithCb' is not defined          no-undef
  4:1   error    Expected catch() or return                  promise/catch-or-return
  4:19  warning  No return in finally                        promise/no-return-in-finally
  7:15  error    Avoid calling 'new' on 'Promise.resolve()'  promise/no-new-statics

eslint-plugin-promise插件有哪些规则呢？

点我查看eslint-plugin-promise的文档

或者查看 /demo/node_modules/eslint-plugin-promise/index.js

module.exports = {
  // 所有的规则
  rules: {
    'param-names': require('./rules/param-names'),
    'no-return-wrap': require('./rules/no-return-wrap'),
    'always-return': require('./rules/always-return'),
    'catch-or-return': require('./rules/catch-or-return'),
    'prefer-await-to-callbacks': require('./rules/prefer-await-to-callbacks'),
    'prefer-await-to-then': require('./rules/prefer-await-to-then'),
    'no-native': require('./rules/no-native'),
    'no-callback-in-promise': require('./rules/no-callback-in-promise'),
    'no-promise-in-callback': require('./rules/no-promise-in-callback'),
    'no-nesting': require('./rules/no-nesting'),
    'avoid-new': require('./rules/avoid-new'),
    'no-new-statics': require('./rules/no-new-statics'),
    'no-return-in-finally': require('./rules/no-return-in-finally'),
    'valid-params': require('./rules/valid-params')
  },
  rulesConfig: {
    'param-names': 1,
    'always-return': 1,
    'no-return-wrap': 1,
    'no-native': 0,
    'catch-or-return': 1
  },
  configs: {
    // 最佳实践 推荐的规则
    recommended: {
      rules: {
        'promise/always-return': 'error',
        'promise/no-return-wrap': 'error',
        'promise/param-names': 'error',
        'promise/catch-or-return': 'error',
        'promise/no-native': 'off',
        'promise/no-nesting': 'warn',
        'promise/no-promise-in-callback': 'warn',
        'promise/no-callback-in-promise': 'warn',
        'promise/avoid-new': 'off',
        'promise/no-new-statics': 'error',
        'promise/no-return-in-finally': 'warn',
        'promise/valid-params': 'warn'
      }
    }
  }
}

常用的规则有哪些呢？

{
  "rules": {
    "promise/always-return": "error",
    "promise/no-return-wrap": "error",
    "promise/param-names": "error",
    "promise/catch-or-return": "error",
    "promise/no-native": "off",
    "promise/no-nesting": "warn",
    "promise/no-promise-in-callback": "warn",
    "promise/no-callback-in-promise": "warn",
    "promise/avoid-new": "warn",
    "promise/no-new-statics": "error",
    "promise/no-return-in-finally": "warn",
    "promise/valid-params": "warn",
    "promise/no-multiple-resolved": "error"
  }
}

欢迎关注我的个人公众号「「小枫学幽默」」一起成长，一起分享生活！！