Vue 프로젝트에서 ESLint와 Prettier 오류 해결 방법 5가지

Vue 프로젝트에서 ESLint와 Prettier 오류 해결 방법

ESLint와 Prettier를 함께 사용할 때 발생하는 문제와 해결 방법

Vue 프로젝트에서 ESLint와 Prettier를 함께 설정하면 코드 오류를 잡아주고 스타일을 일관되게 유지할 수 있어 개발 효율성이 높아집니다. 하지만 두 도구가 서로 다른 규칙을 적용할 경우, 충돌로 인해 다양한 오류가 발생할 수 있습니다. 이 글에서는 ESLint와 Prettier가 충돌할 때 해결하는 방법을 단계별로 설명합니다.

1. Prettier 플러그인 설치 및 설정

 

Vue 프로젝트에서 Prettier를 설정하면 코드 스타일을 자동으로 포맷팅 하여 일관된 코드 스타일을 유지할 수 있습니다. 특히 ESLint와 함께 사용하면 코드 품질과 가독성이 크게 향상됩니다. 다음은 Prettier 플러그인을 설치하고 설정하는 과정입니다.

1. Prettier 플러그인 설치

프로젝트 루트에서 터미널을 열고 npm 또는 yarn 명령어를 사용하여 Prettier 관련 패키지를 설치합니다. 기본적인 Prettier와 ESLint와의 호환을 위한 플러그인을 포함하여 설치하려면 아래 명령어를 입력하세요:

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

이 명령어는 prettier를 설치하고, ESLint와의 충돌을 방지하기 위한 eslint-config-prettier와 eslint-plugin-prettier도 함께 설치합니다.

2. Prettier 설정 파일 생성

프로젝트의 루트 디렉토리에 .prettierrc 파일을 생성하여 Prettier의 포맷팅 규칙을 정의합니다. .prettierrc 파일을 생성한 후 다음과 같은 설정을 추가할 수 있습니다:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

이 설정은 세미콜론을 사용하고(singleQuote), 작은따옴표(singleQuote)를 사용하며, 탭 너비를 2로 지정(tabWidth)하고, 가능한 경우 마지막에 쉼표를 추가(trailingComma)하도록 지정합니다. 이와 같은 기본 스타일을 통해 프로젝트 전반의 코드 일관성을 유지할 수 있습니다.

3. ESLint 설정에 Prettier 통합

ESLint 설정 파일(.eslintrc.js)에서 eslint-config-prettier와 eslint-plugin-prettier를 사용하여 Prettier 규칙을 ESLint에 통합합니다. 설정 파일의 extends 항목에 "prettier"를 추가하여 충돌을 방지하고, rules에 "prettier/prettier": "error" 규칙을 추가해 포맷팅 오류를 잡을 수 있습니다.

module.exports = {
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "prettier"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
};

이 설정을 통해 ESLint가 Prettier 규칙을 따르게 하여 코드 포맷팅 관련 오류를 효과적으로 관리할 수 있습니다.

이처럼 Prettier 플러그인을 설치하고 적절히 설정하면 Vue 프로젝트에서 코드 스타일을 일관되게 유지할 수 있어 코드 품질과 협업 효율성을 크게 높일 수 있습니다.

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

설치 후, .eslintrc.js 파일에 "extends": ["plugin:prettier/recommended"]를 추가하여 Prettier 규칙을 ESLint가 무시하게 만듭니다.

왜 ReactJS와 TypeScript를 같이 쓸까?

2. Prettier 규칙을 ESLint 규칙에 통합

 

Vue 프로젝트에서 ESLint와 Prettier를 동시에 사용할 경우, 두 도구가 각자의 규칙을 강제하면서 충돌이 발생할 수 있습니다. 이를 방지하려면 Prettier의 규칙을 ESLint에 통합하여 일관된 스타일과 오류 검사를 동시에 적용할 수 있습니다. eslint-plugin-prettier를 설치하고 설정에 추가하여 Prettier 규칙을 ESLint가 인식하도록 만드는 과정은 다음과 같습니다.

1. eslint-plugin-prettier 설치

Prettier 규칙을 ESLint가 처리할 수 있도록 eslint-plugin-prettier를 설치합니다. 다음 명령어를 사용하여 개발 의존성으로 추가합니다:

npm install --save-dev eslint-plugin-prettier

2. .eslintrc.js 파일에 Prettier 플러그인 추가

설치가 완료되면 .eslintrc.js 설정 파일을 열고 플러그인 항목에 Prettier를 추가합니다. 또한 extends에 "plugin:prettier/recommended"를 추가하여 Prettier 규칙을 ESLint가 준수하도록 합니다. 설정 예시는 다음과 같습니다:

module.exports = {
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
};

위 설정을 통해 ESLint는 코드 오류와 함께 Prettier의 스타일 규칙도 준수하도록 강제합니다. 만약 Prettier 규칙을 위반한 코드가 있다면, ESLint가 이를 오류로 표시해 즉시 수정할 수 있도록 도와줍니다.

3. 코드 스타일 통일과 오류 방지

이제 ESLint가 Prettier의 규칙을 적용하므로, 코드 스타일과 오류 검사를 동시에 관리할 수 있습니다. 이 통합 방식은 저장 시 자동으로 오류를 감지하고 일관된 스타일을 유지하므로 팀 프로젝트에서 특히 유용하며, 불필요한 코드 스타일 충돌을 최소화할 수 있습니다.

이와 같은 설정으로 Vue 프로젝트에서 Prettier와 ESLint 규칙을 통합하여 코드 품질을 향상하고, 코드 스타일 일관성을 유지할 수 있습니다.

3. 충돌 방지: eslint-config-prettier 적용

 

Vue 프로젝트에서 ESLint와 Prettier를 함께 사용할 때 발생하는 충돌을 줄이기 위해 eslint-config-prettier 설정을 적용하는 것이 중요합니다. eslint-config-prettier는 Prettier와 충돌할 수 있는 ESLint의 코드 스타일 관련 규칙을 비활성화하여 두 도구가 문제없이 작동하도록 돕습니다.

1. eslint-config-prettier 설치

먼저 eslint-config-prettier 패키지를 설치합니다. 이 패키지는 Prettier의 규칙을 ESLint 규칙보다 우선 적용해, 서로 충돌하는 코딩 스타일 규칙을 자동으로 비활성화합니다. 터미널에서 다음 명령어로 설치하세요:

npm install --save-dev eslint-config-prettier

2. .eslintrc.js 파일 설정

설치가 완료되면, 프로젝트의 .eslintrc.js 파일을 열어 extends 배열에 "prettier"를 추가합니다. 이를 통해 Prettier와의 충돌을 방지하는 설정이 활성화됩니다. 설정 예시는 다음과 같습니다:

module.exports = {
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    // 필요한 ESLint 규칙 설정
  }
};

이 설정은 Vue와 TypeScript 규칙을 우선 적용하면서도 Prettier와 충돌하는 스타일 규칙을 비활성화하여 코드 일관성을 유지합니다.

3. Prettier 규칙 ESLint 규칙으로 적용

eslint-config-prettier 설정 후에도, Prettier 규칙을 ESLint의 일부 규칙으로 통합하고자 한다면 eslint-plugin-prettier를 추가로 설치할 수 있습니다. 이 플러그인은 Prettier 규칙을 ESLint의 규칙처럼 적용하여 더욱 일관된 코드 스타일을 유지하게 합니다. 설치 후 .eslintrc.js에 "prettier/prettier": "error" 규칙을 추가하여, Prettier 규칙을 위반할 경우 오류로 처리하도록 설정할 수 있습니다.

이와 같은 설정을 통해 Vue 프로젝트에서 ESLint와 Prettier를 효과적으로 통합하고, 코드 스타일 충돌을 최소화할 수 있습니다.

TypeScript에서 Decorator 사용법 완벽 가이드

4. Prettier와 ESLint의 포맷 옵션을 구분하기

반응형

Vue 프로젝트에서 Prettier와 ESLint를 함께 사용할 경우, 각 도구의 포맷 옵션을 구분하여 적용하는 것이 중요합니다. Prettier는 코드 스타일(들여쓰기, 줄 바꿈 등)을 일관되게 유지하는 데 중점을 두고, ESLint는 코드 품질과 오류 검사에 주로 사용되기 때문에, 이 둘을 구분하여 설정하는 것이 충돌을 최소화하고 작업 효율을 높이는 데 도움이 됩니다.

1. Prettier의 독립적인 설정 파일 생성

프로젝트 루트 디렉토리에 .prettierrc 파일을 생성하여 Prettier의 스타일 규칙을 독립적으로 설정합니다. 이 파일은 Prettier가 코드 스타일에만 집중하도록 하며, .eslintrc.js의 ESLint 규칙과 충돌하지 않게 합니다. 예를 들어, .prettierrc에 다음과 같은 스타일 설정을 추가할 수 있습니다:

{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "all"
}

이 설정으로 Prettier가 코드 스타일링을 전담하게 되어 ESLint와의 충돌을 줄일 수 있습니다.

2. eslint-config-prettier 설치 및 설정

eslint-config-prettier는 ESLint 규칙 중 Prettier와 겹치는 스타일 관련 규칙을 비활성화하여 충돌을 방지해 줍니다. eslint-config-prettier를 설치한 후, .eslintrc.js 파일에 다음과 같이 추가합니다:

module.exports = {
  "extends": [
    "plugin:vue/vue3-recommended",
    "prettier"
  ]
};

이 설정은 ESLint가 Prettier의 코드 스타일 규칙을 우선적으로 적용하도록 하여, 스타일 관련 규칙에서 불필요한 충돌을 제거해 줍니다.

3. ESLint를 코드 품질 검사에 집중시키기

이제 ESLint는 코드의 문법 오류와 품질 검사에 집중하게 됩니다. Prettier가 포맷팅을 전담하는 덕분에 ESLint는 코드 스타일보다는 코드의 논리적 오류 및 비효율적 작성 방지 규칙에 집중할 수 있어, 프로젝트의 가독성과 유지보수성이 향상됩니다.

이처럼 Prettier와 ESLint의 역할을 구분하여 설정하면, 각 도구의 강점을 활용하여 코드 스타일과 품질을 모두 효율적으로 관리할 수 있습니다.

5. 저장 시 자동 포맷 및 수정 설정

Vue 프로젝트에서 저장 시 자동 포맷 및 수정을 설정하면 코드 일관성을 유지하면서 개발 속도를 높일 수 있습니다. 특히 ESLint와 Prettier가 함께 적용된 환경에서는 코드 스타일링과 오류 수정이 저장될 때 자동으로 적용되도록 설정하여, 반복적인 수작업을 줄이고 코드를 효율적으로 관리할 수 있습니다.

1. VS Code 설정 파일 열기

자동 포맷팅을 활성화하기 위해 VS Code 설정 파일인 settings.json을 엽니다. 이 파일은 VS Code의 모든 포맷팅 및 코드 동작 설정을 관리하는 곳으로, 파일의 경로는 File > Preferences > Settings에서 하단의 "{ }" 아이콘을 클릭해 열 수 있습니다.

2. 저장 시 자동 포맷 설정 추가

저장 시 자동으로 Prettier가 포맷팅을 적용하도록 settings.json에 다음 코드를 추가합니다:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

editor.formatOnSave 옵션은 저장 시 자동 포맷을 실행하도록 하며, defaultFormatter는 Prettier를 기본 포맷터로 지정합니다. 이를 통해 모든 파일이 저장될 때 Prettier 스타일로 일관되게 포맷팅 됩니다.

3. 저장 시 ESLint 자동 수정 설정

ESLint 오류를 자동으로 수정하려면 settings.json에 아래 설정을 추가하여 저장 시 ESLint 규칙에 따라 자동 수정이 이루어지도록 합니다:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

이 설정은 저장 시 ESLint 규칙에 위배되는 코드를 자동으로 수정하여 오류를 줄이고 코드의 일관성을 유지해 줍니다. source.fixAll.eslint 옵션은 ESLint에서 감지한 오류를 저장 시 바로 수정해 줍니다.

4. 플러그인 간 충돌 관리

VS Code 설정 후에도 ESLint와 Prettier가 충돌할 수 있습니다. eslint-config-prettier를 사용해 충돌을 방지하고, Prettier 규칙을 우선 적용하도록 설정 파일에서 Prettier 규칙을 최상위에 배치해 충돌 문제를 최소화합니다.

이와 같이 저장 시 자동 포맷과 오류 수정 설정을 적용하면, 코드를 더욱 깔끔하게 유지할 수 있으며, 일관된 코드 스타일을 유지하는 데 도움이 됩니다.

결론

Vue 프로젝트에서 ESLint와 Prettier를 동시에 사용할 때 발생하는 오류는 플러그인 설치와 설정 파일 수정으로 대부분 해결할 수 있습니다. 이를 통해 코드 스타일과 품질을 유지하며, 개발 생산성을 높일 수 있습니다.