EsLint入門學(xué)習(xí)整理

EsLint入門學(xué)習(xí)整理

????這兩天因為公司要求，就對ESLint進(jìn)行了初步的了解，網(wǎng)上的內(nèi)容基本上都差不多，但是內(nèi)容有些亂，我這呢，就跟著大部分的文章，以及官方文檔整理出了一篇入門學(xué)習(xí)的文字，技術(shù)點不算特別全，但是對于新手的我來說是夠的，文章的篇幅很長，內(nèi)容可能有些累贅，但是按著步驟一步一步來，基本上看完也就可以對ESLint有個初步的了解了，此外一些相關(guān)文檔網(wǎng)上還是有很多的，一些單個比較重要的技術(shù)點，網(wǎng)上也都會有相關(guān)的文章做了詳細(xì)的描述。
????我這篇文章針對的就是對eslint完全不了解的小伙伴們。比如像我就是一竅不通的，最近算是轉(zhuǎn)型吧，寫了一段時間的移動端，技術(shù)沒咋練好，就被要求做前端的東西，腦子里也是一團(tuán)漿糊，公司又要求研究些東西，剛接觸的時候完全懵逼，現(xiàn)在慢慢地有點喜歡上前端了，最近也在開始補(bǔ)習(xí)web基礎(chǔ)，發(fā)現(xiàn)需要學(xué)習(xí)的東西好多啊。希望大家要是有興趣的話可以跟我做個朋友，一起討論討論技術(shù)的事情，互相學(xué)習(xí)一下下。

介紹

????ESLint 是由 Nicholas C. Zakas 編寫的一個可擴(kuò)展、每條規(guī)則獨(dú)立、不內(nèi)置編碼風(fēng)格為理念的 Lint 工具。

????在團(tuán)隊協(xié)作中，為避免低級 Bug、產(chǎn)出風(fēng)格統(tǒng)一的代碼，會預(yù)先制定編碼規(guī)范。使用 Lint 工具和代碼風(fēng)格檢測工具，則可以輔助編碼規(guī)范執(zhí)行，有效控制代碼質(zhì)量。EsLint幫助我們檢查Javascript編程時的語法錯誤。比如：在Javascript應(yīng)用中，你很難找到你漏泄的變量或者方法。EsLint能夠幫助我們分析JS代碼，找到bug并確保一定程度的JS語法書寫的正確性。

????EsLint是建立在Esprima(ECMAScript解析架構(gòu))的基礎(chǔ)上的。Esprima支持ES5.1,本身也是用ECMAScript編寫的，用于多用途分析。EsLint不但提供一些默認(rèn)的規(guī)則（可擴(kuò)展），也提供用戶自定義規(guī)則來約束我們寫的Javascript代碼。

????ESLint是確定和報告模式的工具中發(fā)現(xiàn)ECMAScript / JavaScript代碼,使代碼更一致的目標(biāo)和避免錯誤。在許多方面,它類似于JSLint和JSHint，但是也有部分不同。

特定：

  • ESLint使用Espree JavaScript解析。
  • ESLint使用AST評估模式的代碼。
  • ESLint完全可插入式的,每一個規(guī)則是一個插件,支持插件擴(kuò)展、自定義規(guī)則。
  • 默認(rèn)規(guī)則包含所有 JSLint、JSHint 中存在的規(guī)則，易遷移；
  • 規(guī)則可配置性高：可設(shè)置「警告」、「錯誤」兩個 error 等級，或者直接禁用；
  • 包含代碼風(fēng)格檢測的規(guī)則（可以丟掉 JSCS 了）；

EsLint提供以下支持：

  • ES6
  • AngularJS
  • JSX
  • Style檢查
  • 自定義錯誤和提示

EsLint提供以下幾種校驗：

  • 語法錯誤校驗
  • 不重要或丟失的標(biāo)點符號，如分號
  • 沒法運(yùn)行到的代碼塊（使用過WebStorm的童鞋應(yīng)該了解）
  • 未被使用的參數(shù)提醒
  • 漏掉的結(jié)束符，如}
  • 確保樣式的統(tǒng)一規(guī)則，如sass或者less
  • 檢查變量的命名

使用

????有兩種方法來安裝ESLint:全局安裝和本地安裝。

1.本地安裝

如果你想包括ESLint作為你的項目構(gòu)建系統(tǒng)的一部分,我們建議在本地安裝。你可以使用npm:

$ npm install eslint --save-dev

你應(yīng)該設(shè)置一個配置文件:

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

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

$ ./node_modules/.bin/eslint yourfile.js

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

2.全局安裝

如果你想讓ESLint可用到所有的項目,我們建議安裝ESLint全局安裝。你可以使用npm:

$ npm install -g eslint

你應(yīng)該設(shè)置一個配置文件:

$ eslint --init

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

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

3.使用

  • 新建一個項目：


    創(chuàng)建項目

  • 創(chuàng)建package.json文件

      $ npm init
    npm init

  • 安裝ESLint

      $ npm install -g eslint
    npm install -g eslint

  • 創(chuàng)建和編寫簡單的js文件
    ????創(chuàng)建index.js文件，里面寫一個函數(shù)，就直接用別人寫的一個簡單的函數(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 }

       appledeMacBook-Pro:testEslint apple$ node index.js
  { a: 123, b: 456 }

  • 使用eslint檢查

      eslint index.js
    eslint index.js

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

  • 新建配置文件

      $ eslint --init

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

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

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

  • 重新執(zhí)行eslint index.js

    eslint index.js

    ????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:出錯的原因是因為JavaScript有很多種運(yùn)行環(huán)境，比如常見的有瀏覽器和Node.js，另外還有很多軟件系統(tǒng)使用JavaScript作為其腳本引擎，比如PostgreSQL就支持使用JavaScript來編寫存儲引擎，而這些運(yùn)行環(huán)境可能并不存在console這個對象。另外在瀏覽器環(huán)境下會有window對象，而Node.js下沒有；在Node.js下會有process對象，而瀏覽器環(huán)境下沒有。
    所以在配置文件中我們還需要指定程序的目標(biāo)環(huán)境：

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

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

配置

????ESLint設(shè)計出來就是可以配置的，挺自由的，你可以關(guān)閉任何一條規(guī)則，只運(yùn)行基本語法驗證。有兩種主要的方式來配置：

  • Configuration Comments - 使用 JavaScript 注釋把配置信息直接嵌入到一個文件。
  • Configuration Files - 使用 JavaScript、JSON 或者 YAML 文件為整個目錄和它的子目錄指定配置信息。可以用 .eslintrc.* 文件或者在 package.json 文件里的 eslintConfig 字段這兩種方式進(jìn)行配置，ESLint 會查找和自動讀取它們，再者，你可以在命令行指定一個配置文件。

????有很多信息可以配置：

  • Environments - 指定腳本的運(yùn)行環(huán)境。每種環(huán)境都有一組特定的預(yù)定義全局變量。
  • Globals - 腳本在執(zhí)行期間訪問的額外的全局變量
  • Rules - 啟用的規(guī)則及各自的錯誤級別

????在配置文件。eslintrc.js中寫配置內(nèi)容，可以將module.exports內(nèi)的內(nèi)容直接寫到package.json里用字段eslintConfig括起來就可以了。也可以在執(zhí)行eslint命令是通過命令行參數(shù)來指定。

????配置的詳細(xì)說明文檔可以參考這里：Configuring ESLint

規(guī)則

????我們eslintrc.js中的ruls中不僅僅是只有諸如'no-console': 'off'的規(guī)則，更多的是像下面這樣的規(guī)則。

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

????這里的"semi" 和** "quotes" **是 ESLint 中 規(guī)則 的名稱。中括號中第一個是錯誤級別。每條規(guī)則又三個取值：

  • "off" or 0 - 關(guān)閉(禁用)規(guī)則
  • "warn" or 1 - 將規(guī)則視為一個警告（并不會導(dǎo)致檢查不通過）
  • "error" or 2 - 將規(guī)則視為一個錯誤 (退出碼為1，檢查不通過)

????有些規(guī)則還帶有可選的參數(shù)，比如comma-dangle可以寫成[ "error", "always-multiline" ]；no-multi-spaces可以寫成[ "error", { exceptions: { "ImportDeclaration": true }}]。

????配置和規(guī)則的內(nèi)容有不少，將會另出一篇文介紹。

????規(guī)則的詳細(xì)說明文檔可以參考這里：Rules

使用共享的配置文件

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

????我們可以將定義好規(guī)則的.eslintrc.js文件存儲到一個公共的位置。改個名字比如public-eslintrc.js。在文件內(nèi)容添加一兩個規(guī)則。

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

????然后原來的.eslintrc.js文件內(nèi)容稍微變化下，刪掉規(guī)則啥的，留下一個extends。

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

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

eslint index.js

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

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

????下面是官網(wǎng)的一些資料：
????使用共享的模塊
????使用插件
????使用配置文件

????在這提一下，Rules頁面的很多規(guī)則后面都有一個橙色的小扳手標(biāo)識，這個標(biāo)識在執(zhí)行

eslint index.js --fix

的時候，--fix參數(shù)可以自動修復(fù)該問題。
????比如我們在規(guī)則中添加一條no-extra-semi: 禁止不必要的分號。

'no-extra-semi':'error'

????然后，我們在index.js最后多添加一個分號

不必要的分號

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


不必要的分號

????我們再執(zhí)行

eslint index.js --fix

就會自動修復(fù)，index.js那個多余的分號也就被修復(fù)消失不見了。

發(fā)布自己的配置

????共享的配置文件那一節(jié)里面已經(jīng)說了，因為項目中需要配置的內(nèi)容太多，所以可以在extends中指定一個文件名，或者一個eslint-config-開頭的模塊名。為了便于共享，一般推薦將其發(fā)布成一個NPM模塊。

????其原理就是在載入模塊時輸出原來.eslintrc.js的數(shù)據(jù)。比如我們可以創(chuàng)建一個模塊 eslint-config-my 用于測試。

????創(chuàng)建文件夾和文件：


創(chuàng)建文件

????my-config.js:

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

????package.json:

{
    "name": "application-name1",
    "version": "0.0.1",
    "main":"my-config.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 即可使用我們共享的這個配置。

????在eslint --init初始化文件的時候，有一些默認(rèn)的數(shù)據(jù)項，我就簡單的說一下。

  • parserOptions

    ????EsLint通過parserOptions，允許指定校驗的ecma的版本，及ecma的一些特性

      {
      "parserOptions": {
          "ecmaVersion": 6, //指定ECMAScript支持的版本，6為ES6
          "sourceType": "module", //指定來源的類型，有兩種”script”或”module”
          "ecmaFeatures": {
              "jsx": true//啟動JSX
          },
      }
  }

  • Parser

    ????EsLint默認(rèn)使用esprima做腳本解析，當(dāng)然你也切換他，比如切換成 babel-eslint解析

      {
      "parser": "esprima" //默認(rèn)，可以設(shè)置成babel-eslint，支持jsx
  }

  • Environments

    ????Environment可以預(yù)設(shè)好的其他環(huán)境的全局變量，如brower、node環(huán)境變量、es6環(huán)境變量、mocha環(huán)境變量等

      {
      "env": {
          "browser": true,
          "node": true
      }
  }

    ????如果你想使用插件中的環(huán)境變量，你可以使用plugins指定，如下

      {
      "plugins": ["example"],
      "env": {
          "example/custom": true
      }
  }

  • Globals

    ????指定你所要使用的全局變量，true代表允許重寫、false代表不允許重寫

      {
      "globals": {
          "var1": true,
          "var2": false
      }
  }

  • Plugins

    ????EsLint允許使用第三方插件

      {
      "plugins": [
          "react"    
      ]
  }

  • Rules

    ????這個就是上面說的規(guī)則。

自定義規(guī)則

????ESLint自帶的規(guī)則一般都不會很全面，在實際的項目中，我們要根據(jù)自己的需求來創(chuàng)建自己的規(guī)則。這也算的上是ESLint最有特色的地方了。

????在我看來，發(fā)布自己的配置，其實就是要先自定義規(guī)則，自己的配置中加上自定義的規(guī)則，應(yīng)該會比較適合實際項目中的使用。

????以 eslint-plugin-react 為例，安裝以后，需要在 ESLint 配置中開啟插件，其中 eslint-plugin- 前綴可以省略：

{
    "plugins": [
        "react"
    ]
}

接下來開啟 ESLint JSX 支持（ESLint 內(nèi)置選項）：

{
    "ecmaFeatures": {
        "jsx": true
    }
}

然后就可以配置插件提供的規(guī)則了：

{
    "rules": {
        "react/display-name": 1,
        "react/jsx-boolean-value": 1
    }
}

自定義規(guī)則都是以插件名稱為命名空間的。

工作流集成

????ESLint 可以集成到主流的編輯器和構(gòu)建工具中，以便我們在編寫的代碼的同時進(jìn)行 lint。

編輯器集成

????以 WebStorm 為例，只要全局安裝 ESLint 或者在項目中依賴中添加 ESLint ，然后在設(shè)置里開啟 ESLint 即可。其他編輯可以從官方文檔中獲得獲得具體信息。

構(gòu)建系統(tǒng)集成

????在 Gulp 中使用：

var gulp = require('gulp');  
var eslint = require('gulp-eslint');

gulp.task('lint', function() {  
    return gulp.src('client/app/**/*.js')
    .pipe(eslint())
    .pipe(eslint.format());
});

其他構(gòu)建工具參考官方文檔。

總結(jié)

????以上呢，就是我花了兩天整理的一些資料，不能算很全，但是對于像我這樣的新手進(jìn)行的初步了解應(yīng)該是夠了，之后可能有時間的話會陸續(xù)的整理一些相關(guān)的資料發(fā)布出來。

參考：

????ESLint-官方文檔

????利用ESLint檢查代碼質(zhì)量

????Eslint 規(guī)則說明

????ESLint 使用入門

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • ESLint 配置 ESlint 被設(shè)計為完全可配置的，這意味著你可以關(guān)閉每一個規(guī)則而只運(yùn)行基本語法驗證，或混合和...
    靜默虛空閱讀 41,538評論 3贊 14
  • ESLint 是一個插件化的 javascript 代碼檢測工具，它可以用于檢查常見的 JavaScript 代碼...
    lion1ou閱讀 10,811評論 0贊 7
  • 什么是 NPM npm之于Node，就像pip之于Python,gem之于Ruby,composer之于PHP。 ...
    ihoey閱讀 6,265評論 2贊 36
  • 兩個月之前在項目中就開始使用 Eslint ，當(dāng)時直接 copy 別人的 .eslintrc.js 文件，感覺好復(fù)...
    dkvirus閱讀 112,160評論 33贊 190
  • GitChat技術(shù)雜談 前言 本文較長，為了節(jié)省你的閱讀時間，在文前列寫作思路如下： 什么是 webpack，它要...
    蕭玄辭閱讀 12,715評論 7贊 110