前端構建工具（1）-- 代碼檢查 --ESlint

時間 2019-11-16

標籤前端構建工具代碼檢查 eslint 简体版

原文原文鏈接

一、簡介：

eslint檢查咱們寫的 JavaScript 代碼是否知足指定規則的靜態代碼檢查工具。webpack

ESHint 和 JSLint 也是靜態代碼檢查工具，但伴隨着發展，他們已經沒法知足需求，因而ESlint 誕生了，因次ESlint比它們功能更強大也更靈活。
ESLint 是用 Node.js 寫的，能夠經過 npm 來安裝。ESLint 也能夠在 webpack(eslint-loader) 和 Gulp.js(gulp-eslint) 中使用。

二、做用

ESlint做爲代碼檢查工具，其做用主要有如下幾點：es6

統一代碼風格規則，如：縮進用幾個空格；是否用駝峯命名法來命名變量和函數名等。
減小錯誤，如：相等比較必須用 ===，變量在使用前必須被聲明，在條件語句中不能使用賦值語句等。
提升代碼質量，如：函數最多有多少條件分支；最多有幾個參數，代碼塊最多能嵌套多少層等。
其餘。如：禁用alert。這能夠提升用戶體驗，由於 alert 框的外觀不是那麼好看，並且每每與網站的風格不搭，通常都會自定義 alert 框。

三、安裝&配置

eslint能夠用npm 安裝依賴,用-g是全局安裝web

npm install -g eslint

初始化eslint配置，在用戶文件中會生成一個eslint配置文件，即.eslintrc.jsnpm

eslint --init

而後能夠在.eslintrc的文件進行配置:gulp

env: 指定代碼的運行環境,設置了代碼的運行環境能夠是代碼檢測時，不會將運行環境預約義的全局變量視爲沒有定義curl
```
"env": {
       "browser": true,
       "commonjs": true,
       "es6": true
    },
```
parserOptions: 設置js版本的支持狀況和jxs的支持狀況。ecmaVersion 指定用哪一個ECMAScript 的版本，默認是 3 和 5。函數
```
"parserOptions": {
       "ecmaVersion": 6
   }
```

globals：額外的全局變量，將須要使用的全局變量設置爲ture,在代碼檢測時該全局變量則不會報未定義的錯誤工具
```
"globals": {
   "sap": true,
   "jQuery": true,
   "_": true,
   "$": true,
   "Promise": true,
   "QUnit": true,
   "sinon": true
},
```

rules: 具體檢查的規則，可使用extends: eslint recommoned採用推薦的檢查規則，也能夠本身對一些規則進行自定義，第一個參數是表示該規則檢查出來的是 off / 0 :不檢查，warn / 1 :錯誤，error /2 警告網站

{
  "extends": "eslint:recommended",
  "rules": {
    "indent": ["error", 2],
    "no-mixed-spaces-and-tabs": "error"
    "camelcase": "error",
    "eqeqeq": "warn",
    "curly": "error",
    "no-undef": "error",
    "no-unused-vars": "warn",
    "max-params": "warn"
  }
}