---
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

2. 將eslint(auoFixOnSave)的plugin做設定

3. 開啟設定檔

4. 在設定檔中加入設定
加入的內容如下

    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }