ESLint 使用指南
===
[TOC]
## 1. 簡介
ESLint是JaveScript的一個語法檢查器，也有支援TypeScript，可以依預設或自定義的規範去檢查程式碼，並輸出結果，利用此功能可以方便團隊統一coding style。
## 2. 安裝 node.js
要安裝 ESLint 需要用到 npm，所以需要去安裝node.js
下載連結：[node.js](https://nodejs.org/zh-tw/download/)
可用以下指令確認有無安裝及安裝的版本
```
$ npm -v
>8.5.5
$ node -v
>16.15.0
```
## 3. 安裝 ESLint v8.16.0
到專案的目錄下輸入以下指令，安裝ESLint，為了統一大家的版本，所以安裝特定的版本。
```
$ npm install eslint@8.16.0 --save-dev
(有被阻擋可以試試 sudo npm install eslint@8.16.0 -g --unsafe-perm=true --allow-root)
```
這樣會安裝到專案的dev環境上，要執行的話，就要把指令寫到package.json裡的scripts中
```
// package.json的內容，這裡只顯示scripts
"scripts": {
"eslint:init": "eslint --init", // 初始設定eslint
"eslint:check": "eslint assets --ext .ts,.js", // 檢查附檔名為ts及js的檔案
"eslint:fix": "eslint assets --ext .ts,.js --fix" // 自動修復
},
---
$ npm run eslint:init
```
若是要安裝到global環境中在指令加入 -g，如下
```
$ npm install eslint@8.16.0 --save-dev -g
```
這樣的話，是可以直接輸入 eslint 指令來執行指令
例如：
```
$ eslint --init
```
## 4. 設定 ESLint
### 4-1 建立配置檔
輸入以下指令(設定在package.json中指令)
```
$ npm run eslint:init
// eslint --init
```
接下來會有一些問題需要回答，如下(有哪些問題可能跟你的eslint的版本有關)
1. How would you like to use ESLint?
To check syntax only
To check syntax and find problems
＞ **To check syntax, find problems, and enforce code style**
2. What type of modules does your project use? ...
＞ **JavaScript modules (import/export)**
CommonJS (require/exports)
None of these
3. Which framework does your project use? ...
＞ **React**
Vue.js
None of these
4. Does your project use TypeScript? » No / **Yes**
5. Where does your code run? ... (Press ＜space＞ to select, ＜a＞ to toggle all, ＜i＞ to invert selection)
**√ Browser**
**√ Node**
(這題可以多選)
6. How would you like to define a style for your project? ...
＞ **Use a popular style guide**
Answer questions about your style
7. Which style guide do you want to follow? ...
Airbnb: https://github.com/airbnb/javascript
＞ **Standard**: https://github.com/standard/standard
Google: https://github.com/google/eslint-config-google
XO: https://github.com/xojs/eslint-config-xo
(這題可以選擇要跟隨哪一個流行規範)
8. What format do you want your config file to be in? ...
＞ **JavaScript**
YAML
JSON
(這題會設定檔案的格式)
>註：上面顯示的粗體字是我這邊測試用做的選擇
回答完這些問題，便會依照你的回答生成.eslintrc.js(也可以設定成其他的檔案格式如.json)。
### 4-2 自訂義規範設定
在.eslintrc.js這個檔案裡，可以在rules的項目中設定檢查的規範。
詳細的項目在[eslint rules](http://eslint.cn/docs/rules/)，可以依照需求去設定所要的規範，設定方法如下：
```
/**
* 規則寫法
* 1、'semi': 1; -- 0關閉，1警告，2錯誤
* 2、'prefer-const': 'off'; -- off關閉，warn警告，error錯誤
* 3、'quotes': ['error', 'single']; 'error'是提示類型，'single'是參數。參數不止一個的時候寫成{}
*/
rules: {
'semi': 1, // 結尾分號確認 [警告]
'prefer-const': 'off', // 強制設定無改變的變數要用const宣告 [關閉]
'quotes': ['error', 'single'], // 字串的定義符號 [錯誤，單引號] - 不使用單引號就會報錯
},
```
## 5. 用 eslint 檢查程式碼
輸入以下指令(設定在package.json中指令)，就會開始執行檢查
```
$ npm run eslint:check
// eslint assets --ext .ts,.js
```
有一些格式，是可以讓eslint去做自動修復的，使用以下指令進行修復
```
$ npm run eslint:fix
// eslint assets --ext .ts,.js
```
不過不是全部的問題都可以用自動修復，遇到沒法自動修復的，請自行手動修復。
## 6. VsCode 安裝 eslint 延伸模組
一般來說，我們會需要用指令來讓eslint檢查程式碼，然後才會輸出結果，會變成每次要檢查都要輸入指令，沒辦法馬上知道修改後的結果，而使用VsCode的eslint延伸模組，可以更方便的達成這件事。
安裝後，不符合規範的code會顯示紅線，可以比較容易知道哪裡需要修改，修改了也會即時反應修改的程式是否符合規範。
### 設定快速格式化
1. VsCode安裝ESLint
2. 啟用ESLint：檔案>喜好設定>設定 搜尋「eslint」> Eslint format:Enable 打勾
3. 設定預設格式器：Ctrl+Shift+P > Format Document > 設定預設格式器 > ESLint
## 7. 忽略檢測的方式
當有文件是不需要做檢查的時候，可以用此方式處理。
於code中加入
```
/* eslint-disable */
```
會關閉eslint的檢查，使這之後的code不做eslint的規範檢查，之後再加入
```
/* eslint-enable */
```
則會再開啟eslint的檢查，使之後的code會做檢查。
範例：
```
/* eslint-disable */
console.log('不會檢查');
console.log('也不會檢查');
/* eslint-enable */
console.log('會檢查');
```
## 參考資料
> https://forum.cocos.org/t/topic/125862
> https://ithelp.ithome.com.tw/articles/10215259
>
Sign in with Wallet
Connect another wallet