react+webpack 下使用eslint以及eslint插件在sublime下的安装使用

1、eslint环境的搭建

1）在已有react+webpack+babel的环境下，进入到项目的package.json文件所在的目录，安装eslint、eslint-load相关包。如下：

"devDependencies": {
    "babel-core": "^6.7.0",
    "babel-eslint": "^5.0.0",
    "babel-loader": "^6.2.0",
    "eslint": "^1.10.3",
    "eslint-config-standard": "^4.4.0",
    "eslint-config-standard-react": "^1.2.1",
    "eslint-loader": "^1.1.1",
    "eslint-plugin-promise": "^1.1.0",
    "eslint-plugin-react": "^3.14.0",
    "eslint-plugin-standard": "^1.3.1"
}

2）.eslintrc 文件的配置以及说明
eslint的配置文件格式可以有多种，以下是eslint官网罗列的多种格式：

这边我将以本人项目中用到的.eslintrc 来讲解。.eslintrc文件配置如下：

{
  "parser"  : "babel-eslint",
  "env": {
    "browser" : true,
    "node": true,
    "es6": true
  },
  "extends" : [
    "standard",
    "standard-react"
  ],
  "plugins" : [
    "flow-vars"
  ],
  "globals" : {
    "Action"       : false,
    "__DEV__"      : false,
    "__PROD__"     : false,
    "__DEBUG__"    : false,
    "__DEBUG_NEW_WINDOW__" : false,
    "__BASENAME__" : false
  },
  "rules": {
    "arrow-parens": 0,
    "jsx-quotes": [2, "prefer-double"],
    "space-before-function-paren": [2, { "anonymous": "always", "named": "never" }],
    "flow-vars/define-flow-type": 1,
    "flow-vars/use-flow-type": 1,
    "react/jsx-no-bind": 0,
    "react/prop-types": 0,
    "spaced-comment": 0
  }
}

现在将对上面的配置文件一一说明：

（A） `parser` 解析器的配置（Specifying Parser）
ESLint默认是采用的Espree解析器，你也可以自己指定其他的解析器被配置文件所用，但是自己指定的解析器需要满足如下要求：
（1）Parser 必须通过npm 安装到本地，不需要全局安装。
（2）Parser必须带有Esprima兼容的接口，也就是说该Parser需要暴露一个parse() 方法。
（3）It must produce Esprima-compatible AST and token objects.
指定Parser就是在.eslintrc文件中parser项进行配置，举个栗子：

{
   "parser": "esprima",
   "rules": {
       "semi": 2
   }
}

下面列举一些ESLint兼容的Parsers。

Esprima

Esprima-FB - Facebook's fork of Esprima that includes their proprietary syntax additions.

Babel-ESLint - A wrapper around the Babel parser that makes it compatible with ESLint.

**如果在项目中使用了Babel来对ES6代码进行编译，个人建议使用Babel-ESLint Parser。
**当我们使用一个特定的Parser的时候，ecmaFeatures仍然是需要在配置文件中指定的，但是我们指定的Parser不一定需要使用到ecmaFeatures中定义使用的特性。

（B） `env`  ESLint运行环境的配置（Specifying Environments）
browser - browser global variables.
node - Node.js global variables and Node.js scoping.
commonjs - CommonJS global variables and CommonJS scoping (use this for browser-only code that uses Browserify/WebPack).
worker - web workers global variables.
amd - defines require() and define() as global variables as per the amd spec.
mocha - adds all of the Mocha testing global variables.
jasmine - adds all of the Jasmine testing global variables for version 1.3 and 2.0.
jest - Jest global variables.
phantomjs - PhantomJS global variables.
protractor - Protractor global variables.
qunit - QUnit global variables.
jquery - jQuery global variables.
prototypejs - Prototype.js global variables.
shelljs - ShellJS global variables.
meteor - Meteor global variables.
mongo - MongoDB global variables.
applescript - AppleScript global variables.
nashorn - Java 8 Nashorn global variables.
serviceworker - Service Worker global variables.
embertest - Ember test helper globals.
webextensions - WebExtensions globals.
es6 - enable all ECMAScript 6 features except for modules.

上面枚举了JavaScript可能运行到的一些环境，当然我们的项目不可能运行在每个环境中，因此不需要全部都写上，同时，JavaScript也不可能同时在多个环境中运行，因此，配置环境的时候可以配置多个使用环境，ESLint会更具具体代码运行环境来决定使用的哪种环境。

（C） `extends` 配置文件的扩展（Extending Configuration Files）

 如果需要扩展一个特定的配置文件，只需要在配置文件中增加extends项就可以了，引用的路径既可以是相对路径也可以是绝对路径。如上图列举的说明extends 可以用来引用一些在github上面共享的配置包，首先需要通过npm安装配置包文件。在扩展shareable的配置时，eslint-config- 也可以去掉，ESLint会自己帮我们加上的。上图可以转换成这样。

  "extends" : [
    "eslint-config-standard",
    "eslint-config-standard-react"
  ]

eslint-config-standard和eslint-config-standard-react 分别是以eslint-plugin-standard和eslint-plugin-react为插件进行配置的，eslint官网中推荐eslint-plugin-react使用

如果想了解插件和Shareable Configs具体工作原理，请点击 Shareable Configs
extends 也可以接受一个数组，数组后面的文件会重写数组前面文件中的rule，举个栗子：

{
       "extends": [
           "./node_modules/coding-standard/eslintDefaults.js",
           "./node_modules/coding-standard/.eslintrc-es6",
           "./node_modules/coding-standard/.eslintrc-jsx",
       ],

       "rules": {
           "eqeqeq": 1
       }
   }

（D） `plugins`  引入插件（Specifying Plugins）
 ESLint一个优越的地方就是可以使用第三方插件，在使用插件之前，首先需要通过npm安装需要使用的插件。通过`plugins` 键名来指定插件，插件名前面的前缀`eslint-plugin-` 可以省略。 注意：全局安装的ESLint，插件也需要全局安装，本地安装的ESLint，插件既可以本地安装也可以全局安装。

如下图：

"plugins" : [
    "eslint-plugin-flow-vars" 或  "flow-vars"
  ]

（E） `globals`  指定额外全局变量（Specifying Globals）
`no-undef`规则在我们使用没有在同一文件中定义的变量的时候会报错，当我们使用了全局变量的时候，我们就有必要对额外的全局变量进行配置，避免`no-undef`误会。我们可以通过代码注释或者配置文件来进行此项配置。

（F）`rules` 配置Rules （Configuring Rules）

**重要的东西往往放在最后，配置Rules也就是整个配置文件的核心部分。
   在ESLint中拥有大量的rules（后面将不再对rules进行翻译），你可以通过在javascript文件中注释或者特定的配置文件来指定和修改项目中需要rules。在进行一条rule配置时，我们需要设置rule ID为如下值：
   0 - turn the rule off //关掉此条规则
   1 - turn the rule on as a warning (doesn't affect exit code) // 把这条规则指定为warning
   2 - turn the rule on as an error (exit code is 1 when triggered) //把这条rule指定为error
   同时对于某些rule，在制定上面警告级别的时候，还可以指定其他的选项。举个栗子：

 rules:
   eqeqeq: 0
   curly: 2
   quotes:
     - 2
     - "double"

如果一条rule是通过plugin引入的，那么在配置此条rule的时候需要在rule ID前面加plugin 名和 `/` 举个栗子：

"plugins" : [
    "flow-vars"
],
"rules": {
    "flow-vars/define-flow-type": 1,
    "flow-vars/use-flow-type": 1
  }

    **注意：在制定plugin中的rule时，我们需要把plugin的前缀`aslant-plugin-` 去掉。
   **所有的rules，其默认值设置为2.可以通过设置rule为1或者0来对其进行警告降级。
（G）怎么制定ESLint忽略检测的文件或路径
我们可以通过生成一个.eslintignore文件来告诉ESLint我们需要忽略检测哪些文件或者文件夹中的所有文件。在.eslintignore文件中，每一行就是表示需要ESLint忽略文件的路径，举个栗子：

**/*.js

当ESLint运行的时候，它会执行代码规范检测之前查找当前工作文件夹中的.eslintignore文件，当该文件找到后，ESLint运行时就会忽略该文件中的制定文件或文件夹，一个文件夹下只能够有一个.eslintignore文件。
在.eslintignore文件中是使用minimatch来进行匹配的，因此一些如下特性可以使用：
（1）以# 开始的一行会被视为注释，不会对忽略匹配产生影响。
（2）以 ! 开始的一行是negated patterns。也就是说在我们首先忽略了某个文件夹中的所有文件后，我们又想ESLint检测该文件夹中的某些文件时就可以使用该特性。举个栗子：

 # Ignore built files except build/index.js
   build/
   !build/index.js

在上面的栗子中，我们依然会对build/index.js文件进行ESLint检测。
（3）大括号语法可以在一个匹配中制定多个文件。举个栗子：

   # Ignore files compiled from TypeScript and CoffeeScript
   **/*.{ts,coffee}.js

3）webpack配置eslint-loader

在webpack.config.js文件中配置

module: {
    preLoaders: [{
      test: /\.(js|jsx)$/,
      loader: 'eslint',
      exclude: /node_modules/
 }],
},
eslint: {
    configFile: paths.base('.eslintrc')
}

配置中的loader可以省略-loader
eslint-plugin-pre-commit钩子
如果项目使用了git,可以通过使用pre-commit钩子在每次提交前检测，如果检测失败则禁止提交。可以在很大一定程度上保证代码质量。
这里我们使用了pre-commitgit包来帮助我们实现这一目标。
首先在package.json中添加script命令：

"scripts": {
  "eslint": "eslint --ext .js src"
}

其次，安装pre-commit

npm install pre-commit --save-dev

最后，在package.json中配置pre-commit需要运行的命令：

"pre-commit": [
  "eslint"
]

完成之后，在每次提交之前，都会运行eslint命令进行检测，如果检测到有违反代码规则的情况，则会返回1，导致git commit失败。
2、sublime 集成 ESLint

sublime集成ESlint需要安装两个插件SublimeLinter才能正常使用。

装完SublimeLinter，打开如下图：

添加如下的文件配置：

{
    "user": {
        "debug": false,
        "delay": 0.25,
        "error_color": "D02000",
        "gutter_theme": "Packages/SublimeLinter/gutter-themes/Blueberry/round/Blueberry - round.gutter-theme",// 可以指定错误提示的样式主题
        "gutter_theme_excludes": [],
        "lint_mode": "background",
        "linters": {
            "eslint": {// 新增加的
                "@disable": false,
                "args": [],
                "excludes": [
                    "**/node_modules/**"
                ]
            }
        },
        "mark_style": "outline",
        "no_column_highlights_line": false,
        "passive_warnings": false,
        "paths": {
            "linux": [],
            "osx": [],
            "windows": [
                "**/nodejs/eslint.cmd"
            ]
        },
        "python_paths": {
            "linux": [],
            "osx": [],
            "windows": []
        },
        "rc_search_limit": 3,
        "shell_timeout": 10,
        "show_errors_on_save": false,
        "show_marks_in_minimap": true,
        "syntax_map": {
            "html (django)": "html",
            "html (rails)": "html",
            "html 5": "html",
            "javascript (babel)": "javascript",
            "magicpython": "python",
            "php": "html",
            "python django": "python"
        },
        "warning_color": "DDB700",
        "wrap_find": true
    }
}