Vue CLI 기반 프로젝트에서 저장 시 자동으로 실행되는 ESLint 검사를 비활성화하고, 대신 Prettier를 사용해 일관된 코드 스타일을 적용하는 방법을 설명합니다.

1. ESLint 자동 검사 비활성화

vue.config.js 파일에서 lintOnSave 옵션을 false로 설정하여 개발 서버 실행 중 저장 시 자동 린트를 끕니다.

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
});

2. ESLint 규칙 완전히 비활성화

.eslintrc.js 파일에서 모든 규칙을 제거하거나 빈 객체로 설정하여 ESLint가 아무런 검사를 수행하지 않도록 합니다.

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module'
  },
  extends: [],
  rules: {}
};

3. Prettier 설치 및 전역 포맷 설정

Prettier를 개발 의존성으로 설치합니다:

npm install --save-dev prettier

package.json의 scripts에 전체 소스 코드를 포맷하는 명령어를 추가합니다. TypeScript와 JavaScript 중 사용하는 언어에 따라 경로를 조정합니다.

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "format": "prettier --write \"src/**/*.{js,ts,vue}\""
}

4. Prettier 설정 파일 생성

프로젝트 루트에 .prettierrc 파일을 생성하여 원하는 포맷 규칙을 정의합니다.

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 80,
  "trailingComma": "none",
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

5. 변경된 파일만 선택적으로 포맷하기

Git을 사용 중이라면 최근 커밋에서 변경된 파일만 포맷할 수 있습니다. Windows PowerShell 환경에서는 다음 스크립트를 사용할 수 있습니다.

"format-changed": "powershell -Command \"$files = git diff --name-only --diff-filter=ACMRTUXB HEAD~1 src/**/*.{js,ts,vue}; if ($files) { $files | ForEach-Object { prettier --write $_ } }\""

참고: PowerShell 스크립트 실행을 허용하려면 관리자 권한으로 다음 명령어를 실행해야 할 수 있습니다:
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

6. 포맷 검증 명령어 추가

포맷이 올바르게 적용되었는지 확인하기 위해 체크 명령어를 추가할 수 있습니다.

"format:check": "prettier --check \"src/**/*.{js,ts,vue}\""

설정 변경 후에는 개발 서버를 재시작해야 새로운 설정이 반영됩니다.