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

安裝

全局安裝 eslint

$ npm install -g eslint

將下面的測試代碼保存在eslintTest/test.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}));

在執(zhí)行eslint檢查命令：

eslint test.js

然后會出現(xiàn)以下錯誤：

image

這是因為我們沒有指定任何的配置，除非這個文件是有語法錯誤，否則應(yīng)該是不會有任何提示的。所以我們根據(jù)提示，執(zhí)行eslint --init,根據(jù)自己的需求選擇相應(yīng)的配置。

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

結(jié)束后，你就會發(fā)現(xiàn)在在文件夾下會出現(xiàn)一個.eslintrc.js文件，這個就是根據(jù)你的選擇生成的eslint的配置文件。

使用

重新執(zhí)行elsint test.js,會出現(xiàn)以下錯誤：

image

• Unexpected console statement no-console - 不能使用console

針對這條提示，我們可以禁用no-console規(guī)則。在配置文件.eslintrc.js中添加以下內(nèi)容：

rules: {
    'no-console': 'off',
}

說明：配置規(guī)則寫在rules對象里面，key表示規(guī)則名稱，value表示規(guī)則的配置，具體說明見下文。

然后再執(zhí)行eslint test.js,就啥也不出現(xiàn)的，說明驗證通過。

配置文件

module.exports = {
   
    "extends": "eslint:recommended",
    //使用內(nèi)置的eslint:recommended配置，它包含了一系列核心規(guī)則，能報告一些常見的問題。
    "env": {
        "browser": true
    },
    //指定程序的目標(biāo)運行環(huán)境
    "rules": {
        'no-console': 'off',
        "indent": ["error", 2],//縮進(jìn)為 2 個空格
        "linebreak-style": 'off',//強制使用一致的換行符風(fēng)格
        "quotes": ["error", "single"],//使用單引號
        "semi": ["error", "always"]//結(jié)束添加分號
    }
};

說明：

1. 因為 JavaScript 有很多種運行環(huán)境，比如常見的有瀏覽器和 Node.js，另外還有很多軟件系統(tǒng)使用 JavaScript 作為其腳本引擎，比如 PostgreSQL 就支持使用 JavaScript 來編寫存儲引擎，而這些運行環(huán)境可能并不存在console這個對象。另外在瀏覽器環(huán)境下會有window對象，而 Node.js 下沒有；在 Node.js 下會有process對象，而瀏覽器環(huán)境下沒有。
2. 每條規(guī)則有 3 個等級：off、warn和error。off表示禁用這條規(guī)則，warn表示僅給出警告，并不會導(dǎo)致檢查不通過，而error則會導(dǎo)致檢查不通過。
3. 強制使用一致的換行符風(fēng)格L："unix" (默認(rèn)) 強制使用 Unix 換行符： \n。"windows" 強制使用 Windows 換行符： \r\n。如果你不關(guān)心你的代碼中是否以不同的換行符結(jié)尾，你可以關(guān)閉此規(guī)則。

以上是通過配置生成的配置文件，詳細(xì)文檔可以參考這里：Configuring ESLint - 配置，規(guī)則的詳細(xì)說明文檔可以參考這里：Rules - 規(guī)則

代碼格式化

在[ESLint 規(guī)則列表](http://eslint.cn/docs/rules/)頁面，我們發(fā)現(xiàn)有些規(guī)則的旁邊會帶有一個橙色扳手圖標(biāo)，表示在執(zhí)行eslint命令時指定--fix參數(shù)可以自動修復(fù)該問題。即：

eslint test.js --fix

則你的代碼就會根據(jù)你配置好的配置文件自動格式化成你想要的樣子。

禁用檢查

盡管我們在編碼時懷著嚴(yán)格遵守規(guī)則的美好愿景，而凡事總有例外。定立 ESLint 規(guī)則的初衷是為了避免自己犯錯，但是我們也要避免不顧實際情況而將其搞得太過于形式化，本末倒置。

ESLint 提供了多種臨時禁用規(guī)則的方式，比如我們可以通過一條eslint-disable-next-line備注來使得下一行可以跳過檢查：

// eslint-disable-next-line
var a = 123;
var b = 456;

在上面的示例代碼中，var a = 123不會受到檢查，而var b = 456則右恢復(fù)檢查，在上文我們使用的eslint-config-lei的配置規(guī)則下，由于不允許使用var聲明變量，則var b這一行會報告一個error。

我們還可以通過成對的eslint-enable和eslint-disable備注來禁用對某一段代碼的檢查，但是稍不小心少寫了一個eslint-disable就可能會導(dǎo)致后面所有文件的檢查都被禁用，所以我并不推薦使用。

詳細(xì)使用方法可以參考文檔：Disabling Rules with Inline Comments - 使用行內(nèi)注釋禁用規(guī)則

共享配置文件

上文我們以eslint:recommended為基礎(chǔ)配置，然后在此之上修改no-console這條規(guī)則。而在大多數(shù)時候，我們可能會根據(jù)自己個人或團隊的習(xí)慣，定制更多的規(guī)則，比如限定縮進(jìn)是 2 個空格和使用單引號的字符串等。而如果每一個項目都要這樣寫到.eslintrc.js文件上，管理起來會比較麻煩。

我們可以將定義好規(guī)則的.eslintrc.js文件存儲到一個公共的位置，比如public-eslintrc.js：

然后將原來的.eslintrc.js文件改成這樣：

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

還可以使用已經(jīng)發(fā)布到 NPM 上的 ESLint 配置，這些配置的模塊名一般以eslint-config-為前綴，要使用這個配置，先執(zhí)行以下命令安裝它：

npm install -g eslint-config-*

注意：由于我們的eslint命令是全局安裝的，所有用到的eslint-config-*模塊也必須全局安裝，否則將無法正確載入。

然后將.eslintrc.js文件改成這樣：

module.exports = {
  extends: '*',
};

Using the configuration from a plugin - 使用插件

發(fā)布配置

在extends中指定一個文件名，或者一個eslint-config-開頭的模塊名。為了便于共享，一般推薦將其發(fā)布成一個 NPM 模塊。其原理就是在載入模塊時輸出原來.eslintrc.js的數(shù)據(jù)。

比如我們可以創(chuàng)建一個模塊eslint-config-my用于測試。新建文件eslint-config-my/index.js：

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

再新建文件eslint-config-my/package.json：

{
  "name": "eslint-config-my",
  "version": "0.0.1",
  "main": "index.js"
}

為了能讓eslint正確載入這個模塊，我們需要執(zhí)行npm link將這個模塊鏈接到本地全局位置：

$ npm link eslint-config-my

然后將測試文件中的.eslintrc.js改成這樣：

module.exports = {
  extends: 'my',
};

說明：在extends中，eslint-config-my可簡寫為my。

在執(zhí)行eslint merge.js檢查，可看到?jīng)]有任何錯誤提示信息，說明eslint已經(jīng)成功載入了eslint-config-my的配置。如果我們使用npm publish將其發(fā)布到 NPM 上，那么其他人通過npm install eslint-config-my即可使用我們共享的這個配置。

關(guān)于共享 ESLint 配置的詳細(xì)文檔可參考：Shareable Configs - 可共享的配置

轉(zhuǎn)載請標(biāo)注原文地址

http://lion1ou.win/2017/01/11/

(end)