4. Vue - ESLint 설정

0. ESLint란?

• 코드를 여러사람이 작성하다 보면, 코드 작성 규칙이 통일되지 않아 가독성이 떨어지는 경우가 있다.
• 이를 방지하기 위해, 프로젝트의 코드 작성 규칙을 설정하는 기능이다. 

---

1. 패키지 설치 

• 터미널 입력:  npm i -D eslint eslint-plugin-vue babel-eslint

a) .eslintrc.js 파일 생성 및 작성

• 루트 경로에 .eslintrc.js 파일을 생성한다. 
• vue와 eslint의 코드작성 규칙을 다음과 같이 설정한다.

module.exports = {
  env:{
    browser: true,
    node: true
  },
  extends: [
    // vue 작성 규칙 설정 (2단계로 설정)
    //'plugin:vue/vue3-essential', // 1단계 코드 규칙
    'plugin:vue/vue3-strongly-recommended', // 2단계 코드 작성규칙
    //'plugin:vue/vue3-recommended', // 3단계 코드 규칙

    // js - eslint 작성규칙 설정 
    'eslint:recommended' // eslint의 권장규칙으로 코드를 작성하도록 설정
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },  
  rules: { // custom 규칙을 추가할 때 작성
    
  }
}

 

 

[Vue 규칙 reference]

eslint.vuejs.org/rules/

Available rules | eslint-plugin-vue

 

[ESLint 권장규칙 reference]

eslint.org/docs/rules/

List of available rules

 

b) ESLint 실행

• VSCode의 경우, ESLint extension을 추가적으로 설치해준다.
• VSCode 우측 아래의 상태창에서 ESLint를 눌러 사용범위를 설정한 후 활성화 시킨다. 

---

2. ESLint 사용 예시

• ESLint가 잘 설치되었다면 HelloWorld.vue 파일에 다음과 같은 에러메세지를 확인할 수 있다. 

• 메세지 내용 그대로, HTML 태그 스스로 닫힐 수 없다는 ESLint의 기본규칙에 의한 에러다.
• 메세지 뒤쪽에 보면 eslint(vue/html-self-closing) 이라는 규칙임을 확인할 수 있다. 
• 해당 규칙을 수정하고 싶다면, 에러 메세지에 출력된 규칙 이름을 클릭하면 수정할 수 있다. 

 

• self-closing을 해결하면 다음과 같은 에러가 발생한다. 
• alt라는 속성값은 다음 줄에 쓰여야 한다는 eslint의 규칙에 의한 에러다. 
• 해당 에러를 해결하면 다음과 같은 형태의 코드가 만들어진다. 

 

• 하지만, 다음과 같은 코드작성 규칙으로 ESLint 규칙을 수정하고 싶다면 어떻게 해야할까? 

---

3. ESLint 규칙 수정

eslint.vuejs.org/rules/html-closing-bracket-newline.html#vue-html-closing-bracket-newline

vue/html-closing-bracket-newline | eslint-plugin-vue

 

eslint.vuejs.org/rules/html-self-closing.html#vue-html-self-closing

vue/html-self-closing | eslint-plugin-vue

• 위의 레퍼런스를 보면 아래와 같이 옵션정보를 확인할 수 있다. 

 

• 현재 변경하고 싶은 규칙은 줄바꿈 후 닫히는 태그를 새로운 줄에 쓰지 않도록 하고 싶은 것이다.
• 그렇다면 multiline 이라는 속성값을 never로 바꾸면 된다.

 

• 더불어, self-closing이 가능하도록 하고 싶다.
• 이 두가지 부분을 수정해보자. 

 

• .eslintrc.js 파일의 rules 부분에 위의 사진과 같이 옵션을 작성하면 된다. 

 

a) 결과확인

• 위의 사진처럼, 이전에는 규칙오류가 발생했던 코드가 문제없이 작성되는 것을 확인할 수 있다.
• 이처럼, 코드의 작성규칙에 따라 에러를 통해 어떤식으로 작성해야하는지 알 수 있다는 편리성이 있다. 
• 하지만, 매번 코드를 수정하는 것은 번거로운 일이다. 자동화 할 수 있을까? 

 

b) ESLint 규칙에 따른 코드수정 자동화

• VSCode를 기준으로 커맨드 팔렛을 통해 setting.json파일을 연다.
• 위의 사진과 같이 속성값을 정의해준다.
• 이제부터 HTML을 ESLint 규칙과 다르게 작성하더라도 저장버튼을 누르면 자동으로 코드가 규칙대로 수정된다.