Andy's blog

If you always do what you've always done, you'll always get what you've always got.

0%

2021-07-26-[筆記]ESLINT 安裝

前言:
Eslint ,是一套規範 JavaScript 撰寫風格的工具,它可以讓我們在團隊開發上有共同 coding style 同時也讓可以學習 ES6。目前裝上去後使用 Airbnb 模式,覺得世界無敵靠杯,不論是 space 、 ES5 寫法 、 console.log 都會瘋狂跳紅字,撰寫起來真的花更多時間不只處理邏輯更在處理程式碼寫法上花了更多心力。希望過了一段時間後,能更適應這嚴格的程式開發習慣!


參考資料:
五分鐘快速替專案加上 ESLint

超整齊程式碼!透過 ESlint 學習 ES6

GitHub

官網


安裝方式

  1. 確認是否有安裝 NPM 和 Node.js
  2. 兩者都安裝後,下指令
1
2
npm install eslint --save-dev //指安裝在特定專案下
npm install eslint -g //安裝在全域

我自己個人是建議先安裝在特定專案下,因為你一但安裝在全域下,一開始真的無敵痛苦(我是選擇 Airbnb 風格,你想要簡單測試個程式邏輯就會被這規範搞瘋。所以為了讓我能夠有個地方能方便簡單測試程式,我自己目前只安裝在特定專案中

  1. 確認是否有成功安裝 eslint ,如果成功會出現版本號沒有的話則會出現eslint not found
1
2
npx eslint --v   //專案下
eslint -v //全域
  • 若你是安裝在專案下,卻下全域指令,command Line 會回覆你 eslint not found,這是因為 eslint 是安裝在這個專案的 node_modules 下,而非妳 OS 系統下,所以他當然找不到!

Installing ESLint locally doesn’t work

  1. 接著確認有安裝後,就可以初始化勒
1
2
npx eslint --init   //專案下
eslint --init //全域
  1. 就可以開始選取 Eslint 風格摟

詳情可以看五分鐘快速替專案加上 ESLint

撰寫程式碼

  • 範例一
1
2
3
4
5
6
7
8
9
10
function calclulateAvg(...data) {
const number = 0;
// const data = [...arguments]; Eslint 不建議使用arguments
const result = data.reduce((item, currentValue) => {
console.log('1'); // Eslint 建議string 必須使用單引號包起來。雙引號會出錯
return item + currentValue;
}, number);
const avg = result / data.length;
}
calclulateAvg(1, 2, 3, 4, 5); //結尾一定要有分號