VSCode(Visual Studio Code) ESLint 설정

ESLint란 무엇인가?

https://eslint.org/ 에서 설명되어 있는걸 보면 javascript 개발 시 빠르게 문제점을 찾고 자동으로 수정해준다고 한다.

지원하는 에티터 목록도 엄청 많구나.. 

ESLint 지원 에디터 목록

 

ESLint for vue  plug-in 설치

npm install --save-dev eslint eslint-plugin-vue

 

VSCode ESLint extentsion, Prettier ESLint 설치하기

vscode 좌측 메뉴에서 extentsion 클릭 ( cmd + SHIFT + X ) 하고 검색창에 eslint 입력후 설치 

 

VSCode 프로젝트 내 .eslintrc.js 추가

module.exports = {
  env: {
    node: true
  },
  extends: [
    // add more generic rulesets here, such as:
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    // 'plugin:vue/vue3-essential', // This option doesn't impose formatting rules
    // 'plugin:vue/vue3-strongly-recommended', // This option imposes formatting rules on your code to improve readability 
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
}

 

VSCode 기본환경 제거

 

vetur 의 validation style disable시키기

 

<style> Tage가 vetur는 vue2에서는 정상적인 동작을 하는데 , vue3에서는 동작을 안한다고 한다.

 

setting.json 파일은 $HOME/Library/Application Support/Code/User/settings. json 에 있다.

Application Support는 공백이 있어 "\"를 반드시 입력해야 만 한다 

[flowx@dev:~] cd ~/Library/
[flowx@dev:~/Library] cd Application\ Support/Code/User/

"vetur.validation.style": false

귀찮으면 VSCode 메뉴에서 접근해서 setting으로 가서 검색창에서 vetur.validation.style로 검색하면 나온다.

VSCode vetur validation style disable

VSCode 코드 저장 시 자동수행 하기

다시 editor.codeActionsOnSave 로 검색하면 Edit in setting.json 을 열수 있다.

editor.codeActionOnSave

여기서 아래 두줄을 추가해준다

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

setting.json 저장 시 자동 포멧팅

VSCode Formatter 변경

setting 창에서 Formatter 입력 하면 Default Formatter를 변경할 수 있다. 

Prettier를 설치했으니깐 prettier로 변경하자. 

나중에 자동 포멧 오류가 발생하면 여기를 수정해 주면 될듯 하다.