[ESLint] Vue 프로젝트에 ESLint 적용하기 (Vue CLI & ESLint)

하나의 프로젝트를 협업하여 개발할 때 code convention이 상당히 중요합니다. 이러한 code convention을 개발자 각자의 환경에서 알아서 지키면서 개발하는 게 쉽지가 않습니다. 작업을 하다보면 코드 형식 부분에서 분명히 놓치는 부분이 많을 뿐더러 이것을 리뷰 때 캐치하는 것도 쉽지 않을 것입니다.

ESLint는 이러한 code convention을 사전 정의된 rules에 따라 감지하는 기능을 제공합니다.
ESLint를 적용하면 code convention에 어긋난 모든 부분들을 하나도 빠짐없이 알아서 발견해주고 심지어 코드 변경 내용 저장하면 자동으로 ESLint 설정된 rules 대로 fix해주는 기능도 적용할 수 있습니다.

테스트용 Vue project에 ESLint를 적용해보며 설정했던 내용들을 포스트해보고자 합니다.
(테스트용 Vue project는 Vue CLI 3.xx 버전을 사용했기에 3버전에 맞는 ESLint 설정을 하였습니다. 사실 Vue CLI 2.xx, 3.xx 버전에 따라 적용되는 설정내용, rules만 조금 다를뿐 비슷합니다.)

 

📌 1. package.json 적용하기

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

vue project 생성 후에 프로젝트 root 위치에서 eslint 관련 npm install을 진행시켜줍니다.
eslint 고유의 rules와 vue cli에 맞는 rules를 제공해주는 plugin입니다.

$ npm install --save-dev @babel/eslint-parser

babel은 브라우저에서 ES6, ES7 같은 최신 javascript 문법을 이해할 수 있도록 변환해주는 플러그인인데 babel에 대한 eslint도 설정해줘야 합니다.
(안그러면 import, export 같은 최신 javascript 문법에서 eslint가 error로 걸러낼 것입니다.)

As of March 2020, babel-eslint has been deprecated, and is now @babel/eslint-parser.

@babel/eslint-parser 는  babel-eslint가 deprecated되고 사용되는 babel eslint입니다. 이것도 플러그인 설치해줍니다.

 

📌 2. ESLint Config 파일 구성하기

eslint 관련 플러그인 설치가 완료되었으면 project root 위치에 .eslintrc.js 파일을 생성해줍니다.

// .eslintrc.js
module.exports = {
  root: true,
  parserOptions: {
    parser: '@babel/eslint-parser',
  },
  env: {
    node: true,
    browser: true,
  },
  extends: [
    'eslint:recommended',
    // 'plugin:vue/recommended',
    'plugin:vue/vue3-recommended',
  ],
};

• root
  - 특정 프로젝트로 ESLint 범위를 설정합니다.
  - true : 프로젝트 root level 위치로 ESLint 수행 범위 설정
• parserOptions
  - ESLint를 수행하는 파서를 등록합니다.
  - npm으로 설치했던 @babel/eslint-parser으로 지정합니다.
• env
  - predefined global variables, 일종의 예약어 같은 전역변수를 사용할 수 있게 해줍니다.
  - node: module 사용 부분에서 에러 발생하면 true로 지정해주세요
• extends
  - eslint:recommended > eslint 고유의 rules를 사용할 수 있습니다.
  + plugin:vue/vue3-recommended
      - vue-cli에 대한 eslint rules를 사용할 수 있습니다.
      - 가령 vue component 내의 template 내부의 태그기반 코드에 대해서도 rules를 적용할 수 있습니다.
      - vue cli 3.xx 버전부터 사용하는 내용입니다.
  + plugin:vue/recommended
      - vue cli 2.xx 이하 버전에서 사용하는 플러그인입니다.

보통 맨바닥에서 ESLint 규칙들을 정하고 설정하는 것 자체도 일이 될 수 있기 때문에 기존에 세팅된 내용들을 가져다 바로 적용할 수도 있습니다.

extends는 이러한 세팅된 rule들을 가져오도록 지정하는 것이라 생각하면 됩니다. extends 설정된 플러그인들을 보면 recommended가 뒤에 붙어있는 것을 볼 수 있는데요. 공식 문서를 보면 플러그인에도 여러 단계가 있습니다. 그 중에서 recommended는 말 그대로 추천해주는 형식이라고 할 수 있습니다.

 

📌 3. ESLint rules 적용해보기

rules는 ESLint가 code 검사를 할 때 적용하는 기준입니다. 정말 많은 rule들이 존재하는데 그 중 몇 개의 기본적인 rule들을 적용해보겠습니다.

rules: {
    /* eslint:recommended */ 
    'semi': ["error", "always"],
    'indent': ["error", 2],
    'comma-spacing': ["error", { before: false, after: true }],
    
    //...

    /* plugin:vue/vue3-essential */ 
    'vue/html-closing-bracket-newline': ["error", {
      "singleline": "never",
      "multiline": "always"
    }],
    'vue/html-closing-bracket-spacing': ["error"],
    'vue/html-end-tags': ["error"],
    'vue/html-self-closing': ["error", {
      "html": {
        "void": "always",
        "normal": "never"
      }
    }]
},

extends에서 플러그인을 설정한게 있었는데요. 이로 인해 default로 설정된 rule들이 생겨나게 됩니다. 하지만 extends로 가져온 rule만으로는 세세한 convention을 정하기가 부족하기 때문에 사용자 임의로 원하는 rule을 추가할 수 있습니다.

이러한 것들을 rules에 설정하면 됩니다.
예시로 기본적인 rule들을 설정한 내용을 가져왔는데요. 설정하는 표현 방식은 여러 가지이고 자유입니다. 다만 설정된 내용이 적어도 어떤 것을 뜻하는지 정도는 알고 넘어가면 좋을 것 같네요.

semi를 예시로 들어보겠습니다.

[rule name]: ["off"/"warn"/"error", "options"]
> 'semi': ["error", "always"],

적용하고 싶은 rule의 이름을 key로 지정하고 value에는 배열 형식으로 설정합니다.

배열의 첫번째에는 규칙의 강도 및 단계를 지정할 수 있는데 "off"는 rule을 적용하지 않겠다는 것이고, "warn"은 규칙 위반에 대해서 단순히 경고표시만을, "error"는 규칙 위반에 대해서 에러 처리를 하겠다는 내용입니다.

두번째 값("options")에는 rule의 option들을 지정할 수 있습니다. 단순한 string형태부터 object형태까지 다양하게 적용할 수 있습니다. 위에 option은 semi 라는 규칙을 어떤 상황에서든지 항상("always") 적용하겠다는 것입니다. option에 대한 설정 내용은 규칙마다 다르기 때문에 직접 ESLint API문서를 보면서 적용하시면 됩니다.
(문서에 아주 친절하게 설명해놓았기 때문에 원하는 규칙을 찾아서 바로 적용하실 수 있으실 거예요. API문서 링크는 아래에 적어놓겠습니다.)

또한 vue cli component에 적용할 수 있는 플러그인인 vue3-essential 도 있습니다. 저 같은 경우 vue componet 파일 내에 template 영역에 들어가는 HTML 코드에 대한 convention rule을 지정하는 용도로 사용했습니다.

- ESLint rules https://eslint.org/docs/rules/

List of available rules

- vue-cli rules https://eslint.vuejs.org/rules/

Available rules | eslint-plugin-vue

 

📌 4. eslint ignore 파일 적용하기

git을 이용할 때 .gitignore를 지정해주는 것처럼 ESLint도 적용범위에서 예외를 지정할 수 있습니다.

/public
node_modules/

이외에도 예외 적용할 여러 파일 혹은 디렉토리를 지정할 수 있습니다.

.gitignore사용할 때 처럼  ** ,  * 를 통해서 규칙을 정할 수도 있습니다.

여기서 특정 디렉토리는 ESLint 적용하지 않고 그 제외된 디렉토리 내에 있는 특정 파일이나 디렉토리만 ESLint에 적용하고 싶을 때는 어떻게 해야될까요?

예를 들어, test 폴더 내에 있는 except.js 파일과 except_dir 디렉토리만 ESLint 적용하고 test 폴더 내 나머지 모든 파일에 대해서 ESLint를 적용 제외시키고 싶을 때는 다음과 같이 .eslintignore 파일에 지정할 수 있습니다.

!test/
test/*
!test/except.js
!test/except_dir

test/* 는 test/**와 다르게 test 디렉토리 자신은 빼고 그 안에있는 파일들을 예외처리한다는 차이가 있습니다.
test/**로 정하면 이후에 느낌표(!)를 통해 대상을 지정해주어도 디렉토리 대상으로는 ESLint 예외대상에 계속 포함이되어 ESLint 적용이 되지 않습니다.