VUE使用ESLint

GuanJunMa發表於2018-08-10
VueEsLint

讓人又愛又恨的ESLint

引言

ESLint 是用來檢查我們寫的 JavaScript 程式碼是否滿足指定規則的靜態程式碼檢查工具。

ESLint可以給我們帶來什麼：

非常舒服的程式碼書寫風格，強迫你去掉所有的分號。

eslint

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

在webpack構建的專案中使用ESLint

  1. 首先全域性安裝ESLint
npm install  --save-dev eslint eslint-loader
複製程式碼
  1. 在webpack中新增配置
module: {
  preLoaders: [
    {test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/}
  ]
}
複製程式碼
  1. 新建名為 .eslintrc 的檔案。該檔案的內容為對 ESLint 的配置。（一般vue-cli構建的專案會自帶這個檔案）
{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 6
  },
  "rules": {
    "no-eq-null": 2 //禁止對null使用==或!=運算子
  }
}
複製程式碼
  1. env：你的指令碼將要執行在什麼環境中
Environment可以預設好的其他環境的全域性變數，如brower、node環境變數、es6環境變數、mocha環境變數等
複製程式碼
  1. 開啟規則和發生錯誤時報告的等級 規則的錯誤等級有三種：
0或'off'：關閉規則。 
1或'warn'：開啟規則，並且作為一個警告（並不會導致檢查不通過）。 
2或'error'：開啟規則，並且作為一個錯誤 (退出碼為1，檢查不通過)。

引數說明： 
引數1 ： 錯誤等級 
引數2 ： 處理方式
複製程式碼
  1. 我只寫了最簡單的一個檢測，檢視更多規則請參看官方規則
  2. 就我個人來說喜歡逛gayhub,看看別人怎麼寫規則，如果還不錯就佔為己有了。嘻嘻嘻...

前方高等，拿走不謝：

相關文章