EsLint入門學習整理

介紹

  ESLint 是一個插件化的 javascript 代碼檢測工具，它能夠用於檢查常見的 JavaScript 代碼錯誤，也能夠進行代碼風格檢查，這樣咱們就能夠根據本身的喜愛指定一套 ESLint 配置，而後應用到所編寫的項目上，從而實現輔助編碼規範的執行，有效控制項目代碼的質量。

安裝

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

一、本地安裝

$ npm install eslint --save-dev

生成配置文件

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

以後,您能夠運行ESLint在任何文件或目錄以下:

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

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

二、全局安裝

若是你想讓ESLint可用到全部的項目,建議全局安裝ESLint。

$ npm install -g eslint

生成配置文件

$ eslint --init

以後,您能夠在任何文件或目錄運行ESLint

$ eslint index.js

PS：eslint --init是用於每個項目設置和配置eslint,並將執行本地安裝的ESLint及其插件的目錄。若是你喜歡使用全局安裝的ESLint，在你配置中使用的任何插件都必須是全局安裝的。

使用

一、在項目根目錄生成package.json文件（配置ESLint的項目中必須有 package.json 文件，若是沒有的話可使用 npm init -y來生成）

$ npm init -y

二、安裝eslint（安裝方式根據我的項目須要安裝，這裏使用全局安裝）

$ npm install -g eslint

三、建立index.js文件，裏面寫一個函數。

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}));

執行node index.js，輸出結果爲{ 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:\website\demo5\js 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

執行結果是失敗，由於沒有找到相應的配置文件，我的認爲這個eslint最重要的就是配置問題。

新建配置文件

$ eslint --init

生成的過程當中，須要選擇生成規則、支持環境等內容，下面說明一些本人的生成選項

? 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

生成的內容在.eslintrc.js文件中，文件內容以下

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"
        ]
    }
};

  不過這個生成的額文件裏面已經有一些配置了，把裏面的內容大部分刪除。留下個extends，剩下的本身填就能夠了

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

eslint:recommended配置，它包含了一系列核心規則，能報告一些常見的問題。

從新執行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',
    },
};

  配置規則寫在rules對象裏面，key表示規則名稱，value表示規則的配置。
  而後就是解決no-undef:出錯的緣由是由於JavaScript有不少種運行環境，好比常見的有瀏覽器和Node.js，另外還有不少軟件系統使用JavaScript做爲其腳本引擎，好比PostgreSQL就支持使用JavaScript來編寫存儲引擎，而這些運行環境可能並不存在console這個對象。另外在瀏覽器環境下會有window對象，而Node.js下沒有；在Node.js下會有process對象，而瀏覽器環境下沒有。
因此在配置文件中咱們還須要指定程序的目標環境：

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

再從新執行檢查時，就沒有任何提示輸出了，說明index.js已經徹底經過了檢查。

配置

配置方式有兩種：文件配置方式、代碼註釋配置方式（建議使用文件配置的形式，比較獨立，便於維護）。
使用文件配置的方式：在項目的根目錄下，新建一個名爲 .eslintrc 的文件，在此文件中添加一些檢查規則。

文件配置方式

env：你的腳本將要運行在什麼環境中
Environment能夠預設好的其餘環境的全局變量，如brower、node環境變量、es6環境變量、mocha環境變量等

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

globals：額外的全局變量

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

rules：開啓規則和發生錯誤時報告的等級
規則的錯誤等級有三種：

0或’off’：關閉規則。 
1或’warn’：打開規則，而且做爲一個警告（並不會致使檢查不經過）。 
2或’error’：打開規則，而且做爲一個錯誤 (退出碼爲1，檢查不經過)。

參數說明： 
參數1 ： 錯誤等級 
參數2 ： 處理方式

配置代碼註釋方式

使用 JavaScript 註釋把配置信息直接嵌入到一個文件
示例：

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

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

設置檢查 
/*eslint eqeqeq: off*/ 
/*eslint eqeqeq: 0*/

配置和規則的內容有很多，有興趣的同窗能夠參考這裏：rules

使用共享的配置文件

  咱們使用配置js文件是以extends: 'eslint:recommended'爲基礎配置，可是大多數時候咱們須要制定不少規則，在一個文件中寫入會變得很臃腫，管理起來會很麻煩。

  新建一個文件好比eslint-config-public.js，在文件內容添加一兩個規則。

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

而後原來的.eslintrc.js文件內容稍微變化下，刪掉全部的配置，留下一個extends。

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

  這個要測試的是啥呢，就是看看限定縮進是4個空格和使用單引號的字符串等，而後測試下，運行eslint index.js，獲得的結果是沒有問題的，可是若是在index.js中的var ret = {};前面加個空格啥的，結果就立馬不同了。

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.

  這時候提示第2行的是縮進應該是4個空格，而文件的第2行卻發現了5個空格，說明公共配置文件eslint-config-public.js已經生效了。

  除了這些基本的配置之外，在npm上有不少已經發布的ESLint配置，也能夠經過安裝使用。配置名字通常都是eslint-config-爲前綴，通常咱們用的eslint是全局安裝的，那用的eslint-config-模塊也必須是全局安裝，否則無法載入。

在執行eslint檢查的時候，咱們會常常看到提示「--flx」選項，在執行eslint檢查的時候添加該選項會自動修復部分報錯部分（注意這裏只是部分，並非所有）

好比咱們在規則中添加一條no-extra-semi: 禁止沒必要要的分號。

'no-extra-semi':'error'

而後，咱們在index.js最後多添加一個分號

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}));

執行eslint index.js，獲得結果以下：

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.

而後咱們在執行eslint index.js --fix就會自動修復，index.js那個多餘的分號也就被修復消失不見了。

總結

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