配置啥的真的挺烦的, 写篇文章供大家参考

ESLint

很有名的一款 JS 代码规范检查用的插件

安装

首先需要 npm, 这个没有外部·executable program·的结合是无法使用的

安装 eslint, 这里全局安装, 因为后期 Sublime 会用绝对 Path, 可以省去一些不必要的麻烦:

npm install -g eslint

安装完成后测试一下:

eslint -v

Linter 的使用必须要配置文件, 我们可以在根目录创建一个新的配置文件, 跟着指导一步一步操作即可

eslint --init

然后可以对某 JS 文件进行测试, 看到正确输出的错误信息, 基本上就可以了。

eslint posts.js

G:\Dev\GitRepos\Coding\szhshp-subsites\source\src\templates\posts.js
   1:8   error  'React' is defined but never used              no-unused-vars
   4:1   error  Expected indentation of 4 spaces but found 2   indent
   4:35  error  Missing semicolon                              semi
   6:1   error  Expected indentation of 4 spaces but found 2   indent
   7:1   error  Expected indentation of 8 spaces but found 4   indent
   8:1   error  Expected indentation of 12 spaces but found 6  indent
   9:1   error  Expected indentation of 16 spaces but found 8  indent
  10:1   error  Expected indentation of 12 spaces but found 6  indent
  11:1   error  Expected indentation of 12 spaces but found 6  indent
  12:1   error  Expected indentation of 16 spaces but found 8  indent
  13:1   error  Expected indentation of 12 spaces but found 6  indent
  14:1   error  Expected indentation of 8 spaces but found 4   indent
  15:1   error  Expected indentation of 4 spaces but found 2   indent
  15:4   error  Missing semicolon                              semi
  16:2   error  Missing semicolon                              semi
  18:22  error  'graphql' is not defined                       no-undef
  27:2   error  Missing semicolon                              semi

✖ 17 problems (17 errors, 0 warnings)
  15 errors, 0 warnings potentially fixable with the `--fix` option.

SublimeLinter

比较烦的是 Sublime Text 方面的配置

这里用的是 ST 3.0 版本

首先下载两个 Package:

  • SublimeLinter
  • SublimeLinter-eslint

Sublime 端配置

// SublimeLinter Settings - User
{
    "debug": false,
    "paths": {
        "linux": [],
        "osx": [],
        "windows": "D:\\Tools_For_Work\\NodeJS\\node_global\\node_modules\\eslint"
    },
    "syntax_map": {
        "html (django)": "html",
        "html (rails)": "html",
        "html 5": "html",
        "javascript (babel)": "javascript",
        "magicpython": "python",
        "php": "html",
        "python django": "python",
        "pythonimproved": "python"
    }
}

最重要的是paths这个参数, 需要设置到全局的eslint的 module 的路径, 而且注意斜杠要进行转义

另外有一些格式可以进行配置, 即使用syntax_map参数进行配置, 这个非必须用默认的, 已经有很多功能了

03 月 12 日 更新: 关于 Airbnb 的 Linter 规则的使用

默认的配置会检查 linebreak, 有一些项目可能达到平台开发, 检查不同平台上的普通换行符, 就没有太大意义。当然如果不使用默认配置的话, 就可以用一些主流配置, 比如 Airbnb 的配置:

首先先完成上面所有工作后, 将配置文件改成这个样子:

{
    "extends": "airbnb"
}

然后全局安装几个缺少的包:

  1. eslint-config-airbnb
  2. eslint-plugin-jsx-a11y

配置文件放到项目根目录就可以, 另外不同的项目要不同的配置文件

03 月 22 日 更新: 关于如何重载预设规则

如果你有一个规则不想使用，比如 Airbnb 里面必须要求函数有名字, 不允许使用匿名函数

首先你会看到报错信息得知这个规则的名称叫做func-names)

然后谷歌搜索一下就可以得知这个规则的设置

在然后在我们的规则文件里面添加对这个规则的自定义, 比如下面rules里面我将这个规则给关闭了

{
    "parserOptions": {
        "ecmaVersion": 8
    },
  "env": {
        "es6": true
    },
    "extends": "eslint:recommended",
    "globals": {
    },
    "plugins": [
    ],
    "rules": {
        "func-names": "off"
    }
}