1. 개발 의존성 패키지 설치

npm install -D eslint prettier eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-prettier

각 패키지의 역할은 다음과 같습니다.

• eslint: 코드 문법을 검사하고 오류를 찾아주는 린터(Linter)입니다.

• prettier: 코드 스타일을 일관되게 맞춰주는 포맷터(Formatter)입니다.

• eslint-plugin-vue: Vue.js의 SFC(.vue 파일) 구문을 분석하고 관련 규칙을 적용합니다.

• @typescript-eslint/parser: ESLint가 TypeScript 코드를 이해할 수 있도록 해주는 파서입니다.

• @typescript-eslint/eslint-plugin: TypeScript와 관련된 ESLint 규칙을 제공합니다.

• eslint-config-prettier: Prettier와 충돌할 수 있는 ESLint의 스타일 관련 규칙을 비활성화합니다.

• eslint-plugin-prettier: Prettier의 규칙을 ESLint 규칙으로 통합하여 실행합니다.

• .prettierrc.cjs

module.exports = {
  semi: true, // 문장 끝에 세미콜론 사용
  singleQuote: true, // 작은따옴표 사용
  trailingComma: 'all', // 가능한 모든 곳에 후행 콤마 사용
  printWidth: 100, // 한 줄의 최대 너비
  tabWidth: 2, // 탭 너비
  bracketSpacing: true, // 객체 리터럴에서 괄호 사이 공백 사용
  arrowParens: 'always', // 화살표 함수에서 항상 괄호 사용
};

.eslintrc.cjs (ESLint 설정 파일)

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    'vue/setup-compiler-macros': true, // defineProps, defineEmits 와 같은 컴파일러 매크로를 전역 변수로 인식
  },
  parser: 'vue-eslint-parser', // .vue 파일의 <template> 부분을 파싱
  parserOptions: {
    parser: '@typescript-eslint/parser', // .vue 파일의 <script> 부분을 파싱
    sourceType: 'module',
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended', // Vue.js 3 추천 규칙
    'plugin:prettier/recommended', // Prettier 규칙을 ESLint에 통합
  ],
  rules: {
    // 여기에 프로젝트에 맞게 규칙을 추가하거나 덮어쓸 수 있습니다.
    'vue/multi-word-component-names': 'off', // 컴포넌트 이름을 여러 단어로 강제하는 규칙 비활성화
    '@typescript-eslint/no-unused-vars': ['error', { args: 'all', argsIgnorePattern: '^_' }], // 사용하지 않는 변수 에러 처리
  },
};

• packages.json 스크리븥 추가

  "lint": "eslint --ext .js,.vue,.ts .",
  "lint:fix": "eslint --ext .js,.vue,.ts . --fix"

ESLint와 Prettier는 코드의 품질과 스타일을 관리하는 도구지만, 서로 다른 목적을 가지고 있어 함께 사용하는 것이 좋습니다.

• ESLint (린터, Linter): 코드 품질과 논리적 오류를 찾아내는 데 중점을 둡니다. 코드의 잠재적인 버그나 안티패턴을 찾아 수정하도록 돕습니다.

  • 주요 기능: 사용하지 않는 변수 찾기, 전역 변수의 부적절한 사용 감지, 버그 발생 가능성이 높은 코드 패턴 경고.
  • 특징: 매우 상세하고 커스터마이징 가능한 규칙을 제공하며, 일부 포맷팅 기능도 포함합니다.

• Prettier (포맷터, Formatter): 코드 스타일을 일관되게 맞추는 데 집중합니다. 코드가 "어떻게 보이는지"를 관리합니다.

  • 주요 기능: 들여쓰기, 줄 바꿈, 세미콜론, 따옴표 등을 정해진 규칙에 따라 자동으로 통일.
  • 특징: 규칙이 단순하고 '의견이 확고한(opinionated)' 편이라, 개발자가 스타일을 고민할 필요 없이 코드 포맷팅을 강제합니다.

ESLint와 Prettier를 함께 사용하는 이유는 "관심사의 분리" 때문입니다. 각자 가장 잘하는 역할에 집중하게 만들어 개발 효율성을 극대화할 수 있습니다.

1. 역할 분담으로 인한 시너지:

   • ESLint는 코드의 논리적 품질을 책임집니다. (예: "이 변수는 왜 사용되지 않았지?")
   • Prettier는 코드의 시각적 스타일을 책임집니다. (예: "들여쓰기는 2칸으로, 문장 끝에는 세미콜론을 붙이자.")

2. 불필요한 논쟁 방지: 팀 프로젝트 시, 코드 스타일(들여쓰기, 줄 바꿈 등)에 대한 논쟁은 소모적입니다. Prettier는 정해진 규칙에 따라 코드를 자동으로 포맷팅해주므로, 모든 팀원의 코드가 동일한 스타일을 갖게 되어 불필요한 리뷰나 논쟁을 막아줍니다.

3. 설정의 단순화: ESLint에도 포맷팅 규칙이 있지만, Prettier만큼 강력하거나 일관되지 않을 수 있습니다. 포맷팅은 Prettier에 완전히 맡기고, ESLint에서는 코드 품질 규칙에만 집중하도록 설정(eslint-config-prettier 사용)하면 관리가 더 쉬워집니다.

결론적으로, ESLint로는 코드의 질을 높이고, Prettier로는 코드의 가독성과 일관성을 높이는 것이 두 도구를 함께 사용하는 가장 큰 이유입니다.

파일 저장 시 자동 포매터 저장 가이드