Vue.js ESLint 문법검사 구성

🌲ESLint

ESLint란? 에크마스크립트의 코드규칙에 vue를 도입하여 사용하는 문법구성인데 구체적인 코딩스타일을 지정하여 협업 시 통일된 코드스타일을 유지할 수 있다.

🌵vue eslint 공식문서

User Guide | eslint-plugin-vue

 

🌳 설치

$ npm i -D eslint eslint-plugin-vue babel-eslint

 

🌳 .eslintrc.js

module.exports = { 
  env: { 
    browser: true, 
    node: true }, 
  extends: [ 
    'plugin:vue/vue3-strongly-recommended', 
    'eslint:recommended' 
  ], 
  parserOptions: { 
    parser: 'babel-eslint' }, 
    rules: { 
      "vue/html-closing-bracket-newline": ["error", { 
        "singleline": "never",
        "multiline": "always" 
      }], 
      "vue/html-self-closing": ["error", { 
        "html": { 
          "void": "always", 
          "normal": "never", 
          "component": "always" 
        }, 
        "svg": "always", 
        "math": "always" 
     }] 
  } 
}

module.exports	속성값의 객체 또는 배열	설명	상세설명
env	browser: boolean	browser	브라우저 환경에서 검사
	node: boolean	nodejs	노드 환경에서 검사
extends	plugin:vue/vue3-essential plugin:vue/vue3-strongly-recommended plugin:vue/vue3-recommended	vue 설정	Lv 1 Lv 2 Lv 3 가장 엄격
	eslint:recommended	js 설정	권장하는 기본 규칙
parseroptions	parser: 'babel-eslint'	babel	구버전에서도 동작
rules	권장 규칙 이외에 추가할 때 사용
	vue/html-closing-bracket-newline	"singleline": "never"	>를 newline에 쓰지 않음(never)
		"multiline": "always"	다중라인에서는 >를 newline에 사용함(always)
	vue/html-self-closing	"void": "always"	빈 태그에 닫힘 /를 사용함(always)
		"normal": "never"	div와 같은 태그에 닫힘/를 사용안 함(never)
		"component": "always"	컴포넌트 태그에 닫힘/를 사용함

 

🌳 자동수정 저장

VSCODE에서 자동수정 후 저장하는 설정을 추가할 수 있다. ESLint문법에 맞지 않게 작성했더라도 파일 저장 시 알아서 문법에 맞게 변경되어 수정이 된다.

VScode에서 ctrl+shit+P를 눌러 모든 명령 표시 검색창에서 settings를 검색하면  

기본 설정: 설정 열기(JSON)으로 들어가 다음 코드를 추가한다.

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

 

🌵Eslint rules 공식문서

List of available rules