---
# System prepended metadata

title: VSCode Eslint 存檔自動修復
tags: [Vue, ' autofix', ' eslint', ' vscode', ' vue cli 4']

---

---
title: VSCode Eslint 存檔自動修復
tags: Vue, eslint, vscode, autofix, vue cli 4
description: 將vscode開啟存檔時，自動修復eslint error
---

# VSCode Eslint 存檔自動修復
在vue cli 4的專案透過指令建立後，有設定eslint的規範後，可以透過以下方式，來讓vscode可以自動在存檔的時候，可以自動修正語法錯誤（限可自動修正的錯誤). 

> 雖然無修正所有錯誤，但已可以修正80%以上的錯誤了。

### 步驟
1. 安裝必要的vscode plugin
2. 將eslint(auoFixOnSave)的plugin做設定
3. 開啟設定檔
4. 在設定檔中加入設定

---
1. 安裝必要的vscode plugin
   - eslint
   - eslint(with 'autoFixOnSave')
   - vetur
![](https://i.imgur.com/C1x4Bbe.png)

2. 將eslint(auoFixOnSave)的plugin做設定
![](https://i.imgur.com/HKundd9.png)

3. 開啟設定檔
![](https://i.imgur.com/ziDimzT.png)

4. 在設定檔中加入設定
   加入的內容如下
   ```javascript=
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
   ```
   
![](https://i.imgur.com/Kj2xEwn.png)

