Vue那些我踩過的坑(eslint)

 

程式碼有太多風格,程式碼越來越亂嗎?快來使用eslint提升你程式碼的品質

安裝:

npm install eslint -g

要點:

1.找出語法錯誤

沒宣告變數就拿來用、少了括號等等常見的語法錯誤

2.讓你使用最佳實踐

不使用全域變數、建議使用 === 而非 ==、不使用 eval …

3. 提醒你刪掉多餘的程式碼

有些變數宣告了卻沒有使用、import 了沒有使用的模組、空的 class constructor …

4. 統一基本的 coding style

要不要加分號、使用單引號或雙引號、縮排使用 space 或 tab 等等

與git整合:

我們有npm run lint 這個 script,但一定有人忘了跑直接就上code 了,可以配合pre-commit

先跑 npm install --save-dev pre-commit 安裝他，安裝完之後在 package.json 加上 "pre-commit": ["lint"] 就完成了，整個檔案會長這樣

"name": "...",
"scripts": {
    "lint": "eslint src/*.js"
},
"pre-commit": ["lint"],
"dependencies": {
  ...
}
"devDependenceies": {
  "pre-commit": "^1.2.2",
  ...
}

那以後當任何人在專案下跑 git commit -m "message …" 就會先觸發 ESLint 檢查程式碼，通過之後才會成功 commit

結語:

在開發的時候常會有人用不嚴謹的方式宣告變數以及寫法,用了eslint可以大大的減少這方面的困擾