总结使用ESlint及其插件遇到的坑

发布于 2017-12-29

需求：

**1、单个js文件限制行数最大800行；**
**2、一个方法限制行数最大100行；**
**3、强制使用ES6部分语法；**
**4、代码缩进检查；**
**5、文件中的单词拼写检查；**

先放最终写好的配置文件： .eslintrc

{
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "impliedStrict ": true
    }
  },
  "plugins": [
    "spellcheck"
  ],
  "env":{
    "node":true,
    "es6":true
  },
  "rules": {
    "semi": ["error", "always"],
    "max-lines": ["error",800],
    "max-statements": ["error",100],
    "no-duplicate-imports": ["error"],
    "no-var": ["error"],
    "object-shorthand": ["error"],
    "prefer-arrow-callback": ["error"],
    "prefer-const": ["error"],
    "prefer-rest-params": ["error"],
    "prefer-spread": ["error"],
    "prefer-template": ["error"],
    "no-console": 0,
    "spellcheck/spell-checker": [1,
      {
        "comments": true,
        "strings": true,
        "identifiers": true,
        "lang": "en_US",
        "skipWords": [
          "utils",
          "mongoDB"
        ],
        "skipIfMatch": [
          "http://[^s]*",
          "mongodb://[^s]*",
          "^[-\\w]+\/[-\\w\\.]+$" //For MIME Types
        ]
      }
    ]
  }
}

具体每个参数的含义可以在ESlint官网查阅。
[中文翻译官网][1]
[英文官网][2]

接下来说我遇到的第一个坑。就是第5条需求：“文件中的单词拼写检查；”
翻遍了ESlint的rules都没发现有这个参数可以直接配置，于是发现了ESlint是支持插件扩展、自定义规则的！（就是可以用别人开发好的插件或者自己按它官方文档的规范开发插件自用，还可以提交到NPM上供别人下载使用）。
[关于ESlint插件相关介绍][3]

于是我跑到[NPM官网][4]去搜索插件啦。关键字就是：eslint、spell、check。
找到了唯一一个插件：[eslint-plugin-spellcheck][5]
然后按网页文档的示例下载安装后，写好配置文件就可以了。

现在关键是第二个坑：
如果你的ESlint是全局安装的，那么你使用的插件也必须全局安装才能被识别并使用。
同理，如果是在项目本地安装的，那么插件也需要是在项目本地安装。

我的情况是，ESlint首先是全局安装的：npm install -g ESlint
然后偏偏eslint-plugin-spellcheck是在项目内安装的：npm install --save-dev eslint-plugin-spellcheck
于是会报错：说找不到eslint-plugin-spellcheck模块。
于是我在项目内重新本地安装了ESlint，还是不起效，可能因为全局安装优先级更高（？）
最后我全局安装了该插件，终于可以使用了。检测到的文件都显示出了拼写错误提示。
[1]: http://eslint.cn/docs/user-guide/configuring
[2]: https://eslint.org/docs/user-guide/getting-started
[3]: http://eslint.cn/docs/developer-guide/working-with-plugins
[4]: https://www.npmjs.com/
[5]: https://www.npmjs.com/package/eslint-plugin-spellcheck

上一篇: 2019年濑户内海艺术祭下一篇: 关于数组去重的多种方法

Artist Unknown

佚名艺术家

需求：