Vue.js ESLint Auto fix 기능 활성화 하기

1. VS Code에서 ESLint 플러그인 설치

2. 프로젝트 내에 package.json내에서 아래와 같이 수정

//path: 프로젝트 폴더 명/package.json


"eslintConfig": {
...
  "extends": [
    "plugin:vue/recommended", // essential에서 recommended로 변경
    "eslint:recommended"
  ],
...
},

3. 프로젝트에서 탐색기 빈공간에 오른쪽 버튼 클릭 -> 폴더 설정 열기 선택

4. 설정의 검색창에 eslint 검색 후 setting.json 편접 클릭

5. 아래와 같은 내용 삽입

{
    "eslint.codeAction.showDocumentation": {
        

        "enable": true
    },
    "eslint.validate": [
        {"language": "vue", "autoFix": true}, //vue 체크
        {"language": "javascript", "autoFix": true}, //자바스크립트 체크
        {"language": "html", "autoFix": true}, //HTML 체크 <div></div> -> <div />
    ],
    "eslint.autoFixOnSave": true,
    "eslint.alwaysShowStatus": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
}