ESLint - rules自定义规则配置详细方法

前言

在项目中安装了ESLint后，有些规则非常恶心，这时我们既想用其他的ESLint规则功能，又想禁用这些恶心的规则，听起来有些矛盾，但ESLint允许我们自定义规则。

配置语法

把自定义规则加入到 rules 配置项中即可：

// 配置参数
rules: {
    "规则名1": [规则值, 规则配置],
    "规则名2": [规则值, 规则配置]
}

规则值（决定了是否开启/关闭）：

"off"或者0    //关闭规则
"warn"或者1    //在打开的规则作为警告（不影响退出代码）
"error"或者2    //把规则作为一个错误（退出代码触发时为1）

规则名（每个规则对应一个规则名，就像前言提到的空格缩进规则对应 indent 一样）：

这里列出了规则名大全，分别是博主汇总与官网阐述： 官网(推荐)：https://cn.eslint.org/docs/rules/ 博主汇总：https://blog.csdn.net/weixin_44198965/article/details/99839604

详细操作步骤

例如：在 Nuxt.js 项目中，我们对 ESLint 的空格与缩进规则(indent)非常厌恶，想要禁用该规则。

一、在项目文件中找到 .eslintrc.js 配置文件，编辑器打开 二、在 .eslintrc.js → rules 中添加该规则

// add your custom rules here
rules: {
    "indent": ["off", 2] // off:禁用空格缩进规则
}

完整的禁用空格缩进规则 .eslintrc.js 源代码：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended'
  ],
  // add your custom rules here
  rules: {
    "indent": ["off", 2] // off:禁用空格缩进规则
  }
}

三、终止服务 → 关闭编辑器 → 重新编译运行 注意：一定要终止服务并重新开启，否则配置无效。

总结

如果你还想禁用其他烦人的ESLint规则，请查阅规则对应的规则名（配置语法中给出了查阅链接），然后打开.eslintrc.js文件，在rules配置项中依次写入相关规则名与规则值即可。

注意：配置文件可能有所不同，本文用Nuxt.js项目做演示。

If there are problems in this article, or you have better ideas, please leave a message!