EsLint入門學習教程

介紹

ESLint 由 JavaScript 紅寶書 作者 Nicholas C. Zakas 編寫， 2013 年發布第一個版本。 NCZ 的初衷不是重復造一個輪子，而是在實際需求得不到 JSHint 團隊響應 的情況下做出的選擇：以可擴展、每條規則獨立、不內置編碼風格為理念編寫一個 lint 工具。

官方地址：http://eslint.org/

EsLint幫助我們檢查Javascript編程時的語法錯誤。比如：在Javascript應用中，你很難找到你漏泄的變量或者方法。EsLint能夠幫助我們分析JS代碼，找到bug并確保一定程度的JS語法書寫的正確性。

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

EsLint提供以下支持：

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

EsLint提供以下幾種校驗：

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

使用

一、安裝

Npm install gulp-eslint –save-dev

在你的項目目錄下，運行：eslint –init將會產生一個.eslintrc的文件，文件內容包含一些校驗規則

{

 "rules": {

  "semi": ["error", "always"],

  "quotes": ["error", "double"]

 }

}

其中”semi”和”quotes”是規則名稱。EsLint還提供了error的級別，對應數字，數字越高錯誤的提示越高，如0代碼錯誤不提示、1代表警告提醒但不影響現有編譯、2error會拋出錯誤。

"extends": "eslint:recommended"

Extends是EsLint默認推薦的驗證，你可以使用配置選擇哪些校驗是你所需要的，可以登錄npmjs.com查看

二、自定義配置EsLint

之前提到你可以關掉所有EsLint默認的驗證，自行添加所確切需要的驗證規則。為此EsLint提供了2個種方式進行設置：

1. Configuration Comments: 在所要驗證的文件中，直接使用Javascript注釋嵌套配置信息
2. Configuration Files: 使用JavaScript、JSON或YAML文件，比如前面提到的.eslintrc文件，當然你也可以在package.json文件里添加eslintConfig字段，EsLint都會自動讀取驗證。
   

開始介紹EsLint的用法

parserOptions

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

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

Parser

EsLint默認使用esprima做腳本解析，當然你也切換他，比如切換成babel-eslint解析

{
 "parser": "esprima" //默認，可以設置成babel-eslint，支持jsx
}

Environments

Environment可以預設好的其他環境的全局變量，如brower、node環境變量、es6環境變量、mocha環境變量等

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

如果你想使用插件中的環境變量，你可以使用plugins指定，如下

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

Globals

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

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

Plugins

EsLint允許使用第三方插件

{
 "plugins": [
  "react" 
  ]
}

Rules

自定義規則，一般格式：”規則名稱”:error級別系數。系數0為不提示(off)、1為警告(warn)、2為錯誤拋出(error)，可指定范圍，如[1,4]

可以包括Strict模式、也可以是code的方式提醒，如符號等。還可以是第三方的校驗，如react。

默認校驗的地址http://eslint.org/docs/rules/

{
 "plugins": [
  "react"
 ],
 "rules": {
   //Javascript code 默認校驗
  "eqeqeq": "off", //off = 0
  "curly": "error", //error = 2
  "quotes": ["warn", "double"], //warn = 1
   //使用第三方插件的校驗規則
  "react/jsx-quotes": 0
 }
}

            https://www.npmjs.com/package/eslint-plugin-react ， 此鏈接是react的eslint使用

三、Gulp中使用

var eslint = require('gulp-eslint');
 
gulp.task('validate-eslint',function(){

 return gulp.src(['app/**/*.js']) //指定的校驗路徑

  .pipe(eslint({configFle:"./.eslintrc"})) //使用你的eslint校驗文件

  .pipe(eslint.format())

});

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。