讓人又愛又恨的ESLint

讓人又愛又恨的ESLint

引言

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

ESLint能夠給咱們帶來什麼：

很是舒服的代碼書寫風格，強迫你去掉全部的分號。

• 統一的代碼編寫格式，使得代碼書寫風格統一。
• 更加嚴格的書寫要求，減小了代碼出錯的機率。

在webpack構建的項目中使用ESLint

1. 首先全局安裝ESLint

npm install  --save-dev eslint eslint-loader
複製代碼

2. 在webpack中添加配置

module: {
  preLoaders: [
    {test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/}
  ]
}
複製代碼

3. 新建名爲 .eslintrc 的文件。該文件的內容爲對 ESLint 的配置。（通常vue-cli構建的項目會自帶這個文件）

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 6
  },
  "rules": {
    "no-eq-null": 2 //禁止對null使用==或!=運算符
  }
}
複製代碼

4. env：你的腳本將要運行在什麼環境中

Environment能夠預設好的其餘環境的全局變量，如brower、node環境變量、es6環境變量、mocha環境變量等
複製代碼

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

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

參數說明： 
參數1 ： 錯誤等級 
參數2 ： 處理方式
複製代碼

6. 我只寫了最簡單的一個檢測，查看更多規則請參看官方規則
7. 就我我的來講喜歡逛gayhub,看看別人怎麼寫規則，若是還不錯就佔爲己有了。嘻嘻嘻...

前方高等，拿走不謝：

• JavaScript Standard Style
• XO
• Airbnb