Vue CLI 3 프로젝트에서 ESLint를 효과적으로 설정하고 필요에 따라 조정하는 방법을 살펴니다.

기본 설정 구조

프로젝트 생성 시 package.json에 자동으로 추가되는 ESLint 설정은 다음과 같습니다.

"eslintConfig": {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended"
  ],
  "rules": {},
  "parserOptions": {
    "parser": "babel-eslint"
  }
}

ESLint 비활성화

빌드 과정에서 ESLint 검사를 완전히 제외하려면 package.json 내의 eslintConfig 항목을 주석 처리하거나 삭제하면 됩니다. 단, 이 방식은 권장되지 않으며, 대신 규칙을 선택적으로 완화하는 것이 바람직합니다.

규칙 스터마이징

기본 문법

rules: {
  "규칙명": [레벨값, 옵션설정]
}

심각도 레벨

값	숫자	설명
"off"	0	규칙 비활성화
"warn"	1	경고로 처리 (빌드 실패하지 않음)
"error"	2	오류로 처리 (빌드 실패, 종료 코드 1)

자주 사용하는 규칙 모음

변수 및 선언 관련 규칙:

{
  "no-var": 2,
  "no-const-assign": 2,
  "no-redeclare": 2,
  "no-unused-vars": [2, { "vars": "all", "args": "after-used" }],
  "vars-on-top": 2,
  "no-use-before-define": 2
}

코드 품 관련 규칙:

{
  "eqeqeq": 2,
  "no-eval": 2,
  "no-implied-eval": 2,
  "no-throw-literal": 2,
  "no-return-assign": 1,
  "no-sequences": 0,
  "no-void": 2
}

함수 및 객체 관련 규칙:

{
  "no-new-func": 1,
  "no-new-object": 2,
  "no-new-wrappers": 2,
  "no-spaced-func": 2,
  "new-parens": 2,
  "wrap-iife": [2, "inside"]
}

디버깅 및 개발 환경 관련 규칙:

{
  "no-console": 1,
  "no-debugger": 2,
  "no-alert": 0
}

스타일 및 포맷팅 칙:

{
  "indent": [2, 2],
  "quotes": [1, "single"],
  "semi": [2, "always"],
  "comma-dangle": [2, "never"],
  "no-trailing-spaces": 1,
  "brace-style": [1, "1tbs"],
  "camelcase": 2,
  "no-underscore-dangle": 1
}

Vue 및 최신 문법 관련 규칙:

{
  "no-class-assign": 2,
  "constructor-super": 0,
  "require-yield": 0,
  "prefer-const": 0,
  "arrow-parens": 0,
  "generator-star-spacing": 0
}

독립 설정 파일 분리

대규모 프로젝트의 경우 .eslintrc.js 파일을 별도로 분리하는 것이 유지보수에 유리합니다.

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
    browser: true
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'vue/multi-word-component-names': 'off'
  }
}

실용적인 팁

• extends 배열에 @vue/prettier를 추가하면 ESLint와 Prettier의 충돌을 방지할 수 있습니다.
• lint-staged와 husky를 함께 사용하면 커밋 전 자동으로 린트 검사를 수행할 수 있습니다.
• --fix 플래그를 활용하면 자동으로 수정 가능한 오류를 해결할 수 있습니다.

이러한 설정을 통해 팀 내 일관된 코드 스타일을 유지하면서도 필요한 규칙은 유연하게 조정할 수 있습니다.