摘要：使用文件配置的方式在項(xiàng)目的根目錄下，新建一個(gè)名為的文件，在此文件中添加一些檢查規(guī)則?；虼蜷_規(guī)則，并且作為一個(gè)警告并不會(huì)導(dǎo)致檢查不通過?？偨Y(jié)以上是我在學(xué)習(xí)整理的一些資料，不算太全面，對于像我這樣的新手入門足夠了

??ESLint 是一個(gè)插件化的 javascript 代碼檢測工具，它可以用于檢查常見的 JavaScript 代碼錯(cuò)誤，也可以進(jìn)行代碼風(fēng)格檢查，這樣我們就可以根據(jù)自己的喜好指定一套 ESLint 配置，然后應(yīng)用到所編寫的項(xiàng)目上，從而實(shí)現(xiàn)輔助編碼規(guī)范的執(zhí)行，有效控制項(xiàng)目代碼的質(zhì)量。

ESLint的安裝:本地安裝、全局安裝

$ npm install eslint --save-dev

生成配置文件

$ ./node_modules/.bin/eslint --init

之后,您可以運(yùn)行ESLint在任何文件或目錄如下:

$ ./node_modules/.bin/eslint index.js

index.js是你需要測試的js文件。你使用的任何插件或共享配置（必須安裝在本地來與安裝在本地的ESLint一起工作）。

如果你想讓ESLint可用到所有的項(xiàng)目,建議全局安裝ESLint。

$ npm install -g eslint

生成配置文件

$ eslint --init

之后,您可以在任何文件或目錄運(yùn)行ESLint

$ eslint index.js

PS：eslint --init是用于每一個(gè)項(xiàng)目設(shè)置和配置eslint,并將執(zhí)行本地安裝的ESLint及其插件的目錄。如果你喜歡使用全局安裝的ESLint，在你配置中使用的任何插件都必須是全局安裝的。

1、在項(xiàng)目根目錄生成package.json文件（配置ESLint的項(xiàng)目中必須有 package.json 文件，如果沒有的話可以使用 npm init -y來生成）

$ npm init -y

2、安裝eslint（安裝方式根據(jù)個(gè)人項(xiàng)目需要安裝，這里使用全局安裝）

$ npm install -g eslint

3、創(chuàng)建index.js文件，里面寫一個(gè)函數(shù)。

function merge () {
    var ret = {};
    for (var i in arguments) {
        var m = arguments[i];
        for (var j in m) ret[j] = m[j];
    }
    return ret;
}

console.log(merge({a: 123}, {b: 456}));

執(zhí)行node index.js，輸出結(jié)果為{ a: 123, b: 456 }

$ node index.js
{ a: 123, b: 456 }

使用eslint檢查

$ eslint index.js

Oops! Something went wrong! :(

ESLint: 4.19.1.
ESLint couldn"t find a configuration file. To set up a configuration file for this project, please run:

    eslint --init

ESLint looked for configuration files in E:websitedemo5js and its ancestors. If it found none, it then looked in your home directory.

If you think you already have a configuration file or if you need more help, please stop by the ESLint chat room: https://gitter.im/eslint/eslint

執(zhí)行結(jié)果是失敗，因?yàn)闆]有找到相應(yīng)的配置文件，個(gè)人認(rèn)為這個(gè)eslint最重要的就是配置問題。

新建配置文件

  $ eslint --init

生成的過程中，需要選擇生成規(guī)則、支持環(huán)境等內(nèi)容，下面說明一些本人的生成選項(xiàng)

? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? Yes
? Do you use JSX? No
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Single
? What line endings do you use? Windows
? Do you require semicolons? No
? What format do you want your config file to be in? JavaScript

生成的內(nèi)容在.eslintrc.js文件中，文件內(nèi)容如下

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
};

??不過這個(gè)生成的額文件里面已經(jīng)有一些配置了，把里面的內(nèi)容大部分刪除。留下個(gè)extends，剩下的自己填就可以了

 module.exports = {
      "extends": "eslint:recommended"
  };

eslint:recommended配置，它包含了一系列核心規(guī)則，能報(bào)告一些常見的問題。

重新執(zhí)行eslint index.js，輸出如下

  10:1  error  Unexpected console statement  no-console
  10:1  error  "console" is not defined      no-undef

? 2 problems (2 errors, 0 warnings)

Unexpected console statement no-console --- 不能使用console
"console" is not defined no-undef --- console變量未定義，不能使用未定義的變量
一條一條解決，不能使用console的提示，那我們就禁用no-console就好了，在配置文件中添加rules

module.exports = {
    extends: "eslint:recommended",
    rules: {
        "no-console": "off",
    },
};

??配置規(guī)則寫在rules對象里面，key表示規(guī)則名稱，value表示規(guī)則的配置。
??然后就是解決no-undef:出錯(cuò)的原因是因?yàn)镴avaScript有很多種運(yùn)行環(huán)境，比如常見的有瀏覽器和Node.js，另外還有很多軟件系統(tǒng)使用JavaScript作為其腳本引擎，比如PostgreSQL就支持使用JavaScript來編寫存儲(chǔ)引擎，而這些運(yùn)行環(huán)境可能并不存在console這個(gè)對象。另外在瀏覽器環(huán)境下會(huì)有window對象，而Node.js下沒有；在Node.js下會(huì)有process對象，而瀏覽器環(huán)境下沒有。
所以在配置文件中我們還需要指定程序的目標(biāo)環(huán)境：

module.exports = {
    extends: "eslint:recommended",
    env: {
        node: true,
    },
    rules: {
        "no-console": "off",
    }
};

再重新執(zhí)行檢查時(shí)，就沒有任何提示輸出了，說明index.js已經(jīng)完全通過了檢查。

配置方式有兩種：文件配置方式、代碼注釋配置方式（建議使用文件配置的形式，比較獨(dú)立，便于維護(hù)）。
使用文件配置的方式：在項(xiàng)目的根目錄下，新建一個(gè)名為 .eslintrc 的文件，在此文件中添加一些檢查規(guī)則。

env：你的腳本將要運(yùn)行在什么環(huán)境中
Environment可以預(yù)設(shè)好的其他環(huán)境的全局變量，如brower、node環(huán)境變量、es6環(huán)境變量、mocha環(huán)境變量等

"env": {
    "browser": true,
    "commonjs": true,
    "es6": true
},

globals：額外的全局變量

globals: {
    vue: true,
    wx: true
},

rules：開啟規(guī)則和發(fā)生錯(cuò)誤時(shí)報(bào)告的等級(jí)
規(guī)則的錯(cuò)誤等級(jí)有三種：

0或’off’：關(guān)閉規(guī)則。 
1或’warn’：打開規(guī)則，并且作為一個(gè)警告（并不會(huì)導(dǎo)致檢查不通過）。 
2或’error’：打開規(guī)則，并且作為一個(gè)錯(cuò)誤 (退出碼為1，檢查不通過)。

參數(shù)說明： 
參數(shù)1 ： 錯(cuò)誤等級(jí) 
參數(shù)2 ： 處理方式

使用 JavaScript 注釋把配置信息直接嵌入到一個(gè)文件
示例：

忽略 no-undef 檢查 
/* eslint-disable no-undef */

忽略 no-new 檢查 
/* eslint-disable no-new */

設(shè)置檢查 
/*eslint eqeqeq: off*/ 
/*eslint eqeqeq: 0*/

配置和規(guī)則的內(nèi)容有不少，有興趣的同學(xué)可以參考這里：rules

??我們使用配置js文件是以extends: "eslint:recommended"為基礎(chǔ)配置，但是大多數(shù)時(shí)候我們需要制定很多規(guī)則，在一個(gè)文件中寫入會(huì)變得很臃腫，管理起來會(huì)很麻煩。

??新建一個(gè)文件比如eslint-config-public.js，在文件內(nèi)容添加一兩個(gè)規(guī)則。

module.exports = {
    extends: "eslint:recommended",
    env: {
        node: true,
    },
    rules: {
        "no-console": "off",
        "indent": [ "error", 4 ],
        "quotes": [ "error", "single" ],
    },
};

然后原來的.eslintrc.js文件內(nèi)容稍微變化下，刪掉所有的配置，留下一個(gè)extends。

module.exports = {
    extends: "./eslint-config-public.js",
};

??這個(gè)要測試的是啥呢，就是看看限定縮進(jìn)是4個(gè)空格和使用單引號(hào)的字符串等，然后測試下，運(yùn)行eslint index.js，得到的結(jié)果是沒有問題的，但是如果在index.js中的var ret = {};前面加個(gè)空格啥的，結(jié)果就立馬不一樣了。

2:1  error  Expected indentation of 4 spaces but found 5  indent

? 1 problem (1 error, 0 warnings)
  1 error, 0 warnings potentially fixable with the `--fix` option.

??這時(shí)候提示第2行的是縮進(jìn)應(yīng)該是4個(gè)空格，而文件的第2行卻發(fā)現(xiàn)了5個(gè)空格，說明公共配置文件eslint-config-public.js已經(jīng)生效了。

??除了這些基本的配置以外，在npm上有很多已經(jīng)發(fā)布的ESLint配置，也可以通過安裝使用。配置名字一般都是eslint-config-為前綴，一般我們用的eslint是全局安裝的，那用的eslint-config-模塊也必須是全局安裝，不然沒法載入。

在執(zhí)行eslint檢查的時(shí)候，我們會(huì)經(jīng)常看到提示“--flx”選項(xiàng)，在執(zhí)行eslint檢查的時(shí)候添加該選項(xiàng)會(huì)自動(dòng)修復(fù)部分報(bào)錯(cuò)部分（注意這里只是部分，并不是全部）

比如我們在規(guī)則中添加一條no-extra-semi: 禁止不必要的分號(hào)。

"no-extra-semi":"error"

然后，我們在index.js最后多添加一個(gè)分號(hào)

function merge () {
    var ret = {};
    for (var i in arguments) {
        var m = arguments[i];
        for (var j in m) ret[j] = m[j];
    }
    return ret;;
}

console.log(merge({a: 123}, {b: 456}));

執(zhí)行eslint index.js，得到結(jié)果如下：

  7:16  error  Unnecessary semicolon  no-extra-semi
  7:16  error  Unreachable code       no-unreachable

? 2 problems (2 errors, 0 warnings)
  1 error, 0 warnings potentially fixable with the `--fix` option.

然后我們在執(zhí)行eslint index.js --fix就會(huì)自動(dòng)修復(fù)，index.js那個(gè)多余的分號(hào)也就被修復(fù)消失不見了。

以上是我在學(xué)習(xí)eslint整理的一些資料，不算太全面，對于像我這樣的新手入門足夠了