Vue.js 프로젝트에 ESLint 적용하기

ESLint 규칙과 Auto Fix

ESLint 는 ECMAScript/JavaScript 코드에서 코딩 품질과 스타일을 검사하는 정적 코드 분석 도구입니다. ESLint 검사규칙은 사용자 요구에 맞게 재정의될 수 있고, Airbnb config 처럼 검증된 플러그인을 이용해 확장될 수 있습니다.

ESLint 는 가벼운 규칙 위반시 자동으로 수정해주는 기능(Auto Fix)을 제공합니다. 들여쓰기 및 함수 선언시 구성원들마다 선호하는 기술방식에 차이가 있습니다. Auto Fix 를 이용하면 더 나은 방식이 무엇인지 사사롭게 논쟁할 필요가 없어집니다. 작성중인 코드가 미리 정해진 ESLint 규칙에 의해 마법처럼 자동 변경되는것을 지켜보기만 하면 되니까요.

이 글은 Vue CLI 를 이용해 생성된 Vue.js 프로젝트를 기반으로 하며 ESLint 를 적용하는 다른 webpack 프로젝트에도 통용되는 정보를 담고 있습니다.

Vue CLI 프로젝트에서 ESLint 동작방식

Vue CLI 가 생성한 프로젝트는 serve, build, lint 등의 NPM Scripts 를 제공합니다.

package.json

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },

serve 스크립트는 webpackDevServer 를 실행시키고 웹팩의 번들링 결과물을 전달합니다. 코드 변경이 감지되면 HMR(Hot Module Replacement) 이 동작하며 웹팩은 변경이 일어난 파일에 대해서 번들링 작업을 재수행합니다. Vue CLI 가 등록한 eslint-loader 는 변경이 감지된 파일을 분석하고 규칙을 위반한 패턴을 발견하면 사용자에게 알립니다.

코드 변경 시에 Auto Fix 기능을 이용하려면 eslint-loader 에 fix 옵션을 추가해주어야 합니다. 사용자는 vue.config.js 파일을 통해 웹팩의 기본동작을 수정할 수 있습니다.

vue.config.js

module.exports = {
  chainWebpack: (config) => {
    config.module.rule('eslint').use('eslint-loader')
      .tap((options) => {
        options.fix = true; // auto-fix 옵션
        return options;
      });
  },
};

lint 스크립트는 웹팩의 빌드구성과 상관없이 프로젝트 전체 파일을 대상으로 ESLint 를 동작시킵니다. lint 스크립트를 실행하면 이전에 추가된 vue.config.js 에 문제가 있음을 알립니다.

error: Assignment to property of function parameter 'options' (no-param-reassign) at vue.config.js:5:9:
  3 |     config.module.rule('eslint').use('eslint-loader')
  4 |       .tap((options) => {
> 5 |         options.fix = true;
    |         ^
  6 |         return options;
  7 |       });
  8 |   },

no-param-assign 은 함수에 전달된 인자를 변경하는 것을 방지하는 규칙입니다. tap 은 인자로 전달한 options 를 사용자 요구에 맞게 변경가능하도록 Vue CLI가 제공하는 API 입니다. vue.config.js 코드에서 만큼은 검사규칙을 회피해야 하기에 파일 상단에 주석을 추가해주어야 합니다.

vue.config.js

/* eslint no-param-reassign:
    ["error", { "props": true, "ignorePropertyModificationsFor": ["options"] }] */
module.exports = {
  ...
}  

lint 스크립트에도 Auto Fix 기능을 적용하려면 --fix 옵션을 실행인자로 전달해주면 됩니다.

package.json

  "scripts": {
    ...
    "lint": "vue-cli-service lint --fix"
  },

cache-loader 와의 충돌

serve, build, test:unit 등 웹팩의 처리과정을 거치는 스크립트 실행 시 빌드 최적화를 위해 적용한 cache-loader 로 인해, eslint-loader 가 동작하지 않는 상황이 발생할 수 있다는 점에 유의해야 합니다. 한번 캐쉬에 담긴 파일은 수정이 일어나지 않는 이상 캐쉬된 파일을 이용하기에 ESLint 는 동작하지 않습니다. 이에 대한 자세한 내용은 웹팩(webpack)의 cache-loader 편을 참고하세요.

ESLint 가 항상 일관되게 동작하려면 스크립트 실행 시에 lint 스크립트를 명시적으로 호출해주어야 합니다.

package.json

  "scripts": {
    "serve": "npm run lint && vue-cli-service serve",
    "build": "npm run lint && vue-cli-service build",
    "test:unit": "npm run lint && vue-cli-service test:unit",
    "lint": "vue-cli-service lint --fix"
  },

이제 웹팩 빌드 프로세스 이전에 프로젝트 전체의 정적파일을 대상으로 검사가 수행되기에 문제가 발결된 코드에 대한 리포트를 보장받을 수 있습니다.

맺음말

ESLint 는 코드 작성자를 성가시게 방해하기도 합니다. Airbnb config 플러그인은 전세계인의 사랑을 받지만 모든 프로젝트에 적용되어야 하는 만능규칙은 아닙니다. 프로젝트 환경에 맞게 검사규칙을 새롭게 정의하고 코드 작성과정에서 문제가 있을 때 이를 논의하는 유연한 정책이 필요합니다. 프로젝트 구성원들이 ESLint 규칙을 받아 들이면 최종 배포코드는 품질이 향상되며 (한 사람이 작업한 듯) 일관된 패턴을 지니게 됩니다.