> 作者：Duang
> 
> 來源：[恆生LIGHT雲社群](https://developer.hs.net/thread/1434 "恆生LIGHT雲社群")

目的：這段時間我們組多人開發同一個前端專案，遇到同事提交的程式碼有大面的格式變更，找到原因是我們vscode安裝的程式碼格式化規範外掛和本地配置不同導致的，並且同事設定了儲存自動格式化程式碼，這樣的情況容易在合併程式碼時找不到實際的程式碼改動點，出現隱患。另一方面也是響應公司程式碼格式規範化的號召，所以花時間瞭解了下eslint，跟大家分享。

# 1. eslint介紹

lint是檢查程式碼格式工具的一個統稱，具體的工具有JsLint、Android-Lint等,本文介紹的eslint就是lint中的一種。

eslint官網介紹：可組裝的JavaScript和JSX檢查工具。

這裡我們不討論JSX，只討論js。js是弱型別語言，不需要執行程式的編譯，所以不容易在開發階段及時的發現程式碼錯誤，需要在不斷的除錯中修改程式碼錯誤。eslint就是一種能夠可以幫助前端工程師在編碼過程中發現問題，而不是在執行過程中發現問題的工具。

# 2. eslint特點

* 內建規則和自定義規則共用一套規則 API；
* 內建的格式化方法和自定義的格式化方法共用一套格式化 API；
* 額外的規則和格式化方法能夠在執行時指定；
* 規則和對應的格式化方法並不強制捆綁使用；
* 每條規則都是各自獨立的，可以根據專案情況選擇開啟或關閉；
* 使用者可以將結果設定成警告或者錯誤；
* eslint 並不推薦任何編碼風格，規則是自由的；
* 所有內建規則都是泛化的。

# 3. eslint+vscode規範化程式碼操作步驟

## 3.1. vue專案安裝eslint外掛

終端輸入：

```
npm install eslint --save-dev   
```

## 3.2. 配置eslint

eslint 支援幾種格式的配置檔案，如果同一個目錄下有多個配置檔案，eslint 只會使用一個。優先順序順序如下：

1. JavaScript - 使用 .eslintrc.js 然後輸出一個配置物件。
2. YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定義配置的結構。
3. JSON -使用 .eslintrc.json 去定義配置的結構，eslint 的 JSON 檔案允許 JavaScript 風格的註釋。
4. Deprecated -使用 .eslintrc，可以使 JSON 也可以是 YAML。
5. package.json - 在 package.json 裡建立一個 eslintConfig屬性，在那裡定義你的配置。

下面介紹一下第5種配置方式：

```
  "eslintConfig": {
    "root": true,
    // 預定義的全域性變數
    "env": {
      "node": true
    },
    // 擴充套件透過字串或者陣列來擴充套件規則
    // extentds: 'standard',
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended" // 啟用推薦的規則
    ],
    "parserOptions": {
    // 解析器，這裡使用的是babel-eslint
      "parser": "babel-eslint"
    },
    // 自定義規則 可以根據專案需求自定義填寫
    "rules": {}
  },
```

## 3.3. vscode安裝eslint擴充套件外掛

只是在專案中安裝eslint是不夠的，需要在vscode中安裝eslint擴充套件外掛，並進行對應的配置才能看到程式碼中各種顏色的報錯，報錯如下圖：

![](file://D:\document\%E7%9F%A5%E8%AF%86%E5%BA%93\%E6%96%87%E6%A1%A3\img\image-20210924165711816.png?lastModify=1633749231)![image-20210924165711816.png](https://developer.hs.net/storage/attachments/2021/10/09/Lqfbx7RgPXAdkYLAlnEt6CSiO5Fd0H2JthnspP31_thumb.png "3249")

如果不想被頻繁的格式報錯困擾開發過程，可以在vscode中安裝程式碼自動修復的擴充套件外掛，並在setting.json中進行配置，外掛可以使用如：prettier-Code formatter、vetur 。

安裝vetur外掛後程式碼報錯如下圖：

![image-20210928172928718.png](https://developer.hs.net/storage/attachments/2021/10/09/AnWTwyKadI5KHf5LcABrppn5Mjsdh9zwoqxf5jRF_thumb.png "3250")

## 3.4. vscode setting.json配置

需要設定的本地，私人的程式碼規範化處理可以寫在vscode 的setting.json檔案中。想要實現儲存即格式化程式碼就可以設定在setting.json中。setting.json檔案開啟方式：vscode-檔案-首選項-設定-搜尋eslint-隨意找一個“在settings.json”中編輯開啟settings.json,如下圖：

![image-20210924170704315.png](https://developer.hs.net/storage/attachments/2021/10/09/Y5TivckX1kvpGyt9iyFbVepWC1ns5KaHvWTmVHMu_thumb.png "3251")

1. 舊版本配置，如果按照下面配置報錯，則使用新版本配置。

```
{
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        }
    ]
}
```

2. 新版本配置

```
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "eslint.probe": ["javascript", "vue", "html"]
},
```

# 4. eslint規則

## 4.1. 三種級別值：

* "off"或者0，不啟用這個規則
* "warn"或者1，出現問題會有警告
* "error"或者2，出現問題會報錯

## 4.2.規則寫法：

規則名：值

規則名：[值，引數1，引數2……]

---

## 4.3. 常用規則舉例：

|      規則名      | 規則介紹                      |
| :---------------: | ----------------------------- |
|    no-console    | 禁用 console                  |
|    no-debugger    | **禁用 **`debugger`         |
| init-declarations | 要求或禁止var聲名中的初始化   |
|      eqeqeq      | 要求使用=== 和!==             |
|      indent      | 強制使用一致的縮排            |
|      max-len      | 強制一行的最大長度            |
|      max-len      | 強制一行的最大長度            |
|       semi       | 要求或禁止使用分號代替ASI     |
|      no-var      | 要求使用let或者const而不是var |

詳細的eslint自定義規則可以檢視：[https://cn.eslint.org/docs/rules/](https://cn.eslint.org/docs/rules/)

## 4.4. 格式關閉規則

什麼時候需要關閉格式，舉個例子：當程式碼中出現正則/\ .js$/,格式交易可能會出現"unnecessary escape character:/\ .",這種情況不能透過修改程式碼來使報錯消失，就可以使用格式關閉規則來跳過此類程式碼。

下面介紹幾種規則：

1. 關閉範圍內格式校驗

```
/* eslint-disable */

alert('foo');

/* eslint-enable */
```

2. 關閉某一行的所有格式交易

```
alert('foo'); // eslint-disable-line
```

or

```
// eslint-disable-next-line

alert('foo');
```

以上就是在vscode中的vue專案，使用eslint，實現程式碼規範化介紹，希望能對eslint有困惑的同學有所幫助！

用vue+eslint+vscode實現程式碼規範化

相關文章