Vue3 프로젝트에서 ESLint와 Prettier 설정하기

Vue3 프로젝트에서 ESLint와 Prettier 설정하기

Vue3와 함께하는 코드 정리: ESLint와 Prettier 통합 설정

Vue3 프로젝트에 ESLint와 Prettier를 설정하면 코드 품질을 향상하고 협업에 도움을 줍니다. ESLint는 코드 오류를 사전에 방지하고, Prettier는 코드 스타일을 일관되게 유지하여 프로젝트의 가독성을 높입니다. 이 글에서는 Vue3 프로젝트에서 ESLint와 Prettier를 설정하는 기본적인 방법을 안내합니다.

1. Vue3 프로젝트 생성 및 기본 ESLint 설정

 

Vue3 프로젝트를 생성하고 기본 ESLint를 설정하면 코드 품질을 유지하고 일관된 스타일을 적용할 수 있습니다. 아래는 Vue3 프로젝트 생성과 ESLint 초기 설정을 단계별로 설명한 가이드입니다.

1. Vue3 프로젝트 생성하기

Vue3 프로젝트는 Vue CLI 또는 Vite를 사용해 쉽게 생성할 수 있습니다. 여기서는 Vue CLI를 활용한 예제를 소개합니다:

npm install -g @vue/cli
vue create my-vue3-app

위 명령어를 실행하면 프로젝트 생성 과정에서 필요한 설정 옵션을 선택하게 됩니다. 이때 Vue 3.x 버전을 선택하세요. CLI가 제공하는 다양한 설정 옵션 중 ESLint를 포함하도록 선택하는 것을 추천합니다.

2. ESLint 플러그인 설치

Vue CLI로 프로젝트를 생성했다면, 기본 ESLint 설정이 자동으로 추가됩니다. 만약 수동으로 설정하고 싶다면, ESLint와 eslint-plugin-vue를 설치하여 Vue 파일에도 일관된 규칙을 적용할 수 있습니다.

npm install -D eslint eslint-plugin-vue

3. ESLint 기본 설정 파일 작성

ESLint 설정 파일 .eslintrc.js를 프로젝트 루트에 생성합니다. 파일에는 다음과 같은 기본 구성을 추가할 수 있습니다:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
    // 커스텀 규칙 설정 가능
  },
};

위 설정은 Vue3의 필수 규칙을 포함하여 JavaScript와 브라우저 환경에서의 기본 규칙을 적용합니다. 이 외에도 팀의 스타일 가이드에 따라 규칙을 커스터마이징 할 수 있습니다.

4. ESLint 명령 실행 및 자동 포맷팅 설정

ESLint가 제대로 작동하는지 확인하려면 다음 명령어로 코드를 검사합니다:

npx eslint .

또한 VS Code에서 ESLint 확장 프로그램을 설치하고, 자동으로 포맷팅이 적용되도록 설정하면 코드 작성 시점에서 실시간으로 스타일 검사가 이루어져 효율적입니다.

이렇게 설정을 마치면 Vue3 프로젝트에서 ESLint를 통해 코드 품질을 유지하면서 일관성 있는 코드 스타일을 적용할 수 있습니다.

현직 웹 개발자가 알려주는 TypeScript의 장점!

2. Prettier 설치 및 설정 파일 생성

 

Vue3 프로젝트에서 Prettier를 설치하고 설정 파일을 생성하면 코드 스타일을 일관성 있게 유지할 수 있습니다. Prettier는 코드의 가독성을 높이고, 협업 시 팀원 간의 스타일 차이를 줄여줍니다. 다음 단계를 따라 Prettier 설치와 설정을 완료하세요.

1. Prettier 설치

터미널을 열고 프로젝트의 루트 디렉터리에서 다음 명령어를 실행해 Prettier를 설치합니다:

npm install --save-dev prettier

추가로 ESLint와의 충돌을 방지하기 위해 eslint-config-prettier와 eslint-plugin-prettier도 설치합니다:

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

2. Prettier 설정 파일 생성

프로젝트 루트에 .prettierrc 파일을 생성하여 Prettier 설정을 정의합니다. 설정 파일에 기본 스타일 규칙을 추가하여, 모든 팀원이 같은 스타일로 코드를 작성할 수 있도록 합니다.

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80
}

semi: 명령문의 끝에 세미콜론을 추가할지 여부를 설정하며, singleQuote는 문자열에 작은따옴표를 사용할지를 설정합니다. trailingComma는 여러 줄 객체에서 마지막에 쉼표를 추가할지 설정하고, printWidth는 한 줄의 최대 너비를 정의하여 가독성을 높입니다.

3. .prettierignore 파일 설정

포맷팅을 원하지 않는 파일이나 폴더가 있다면 .prettierignore 파일을 만들어 추가할 수 있습니다. 예를 들어, 빌드된 파일이나 외부 라이브러리 폴더인 node_modules를 무시하도록 설정합니다.

node_modules
dist
build

이렇게 Prettier를 설치하고 설정 파일을 구성하면 코드 스타일을 자동으로 유지할 수 있으며, 팀 내에서 일관성 있는 코드 작성이 가능합니다.

3. eslint-plugin-vue와 Prettier 플러그인 설치

 

Vue3 프로젝트에서 코드 품질과 스타일을 일관되게 유지하려면 eslint-plugin-vue와 Prettier 플러그인을 설치하는 것이 중요합니다. 이 두 플러그인은 각각 Vue 파일에 특화된 코드 검사와 코드 포맷팅을 담당하여, 깨끗한 코드 작성을 돕고 협업 시 일관성을 유지하게 해 줍니다.

1. eslint-plugin-vue 설치

Vue 파일 내에서 코드 오류를 감지하고, 권장 스타일을 유지하려면 eslint-plugin-vue를 설치해야 합니다. 이 플러그인은 Vue.js 전용 규칙을 제공하여, 템플릿 문법 오류나 Vue 컴포넌트 사용 시 발생할 수 있는 실수를 미연에 방지합니다. 설치 명령어는 다음과 같습니다:

npm install eslint-plugin-vue --save-dev

설치 후 .eslintrc.js 파일에 "plugin:vue/recommended"를 추가하여 Vue 규칙을 활성화합니다. 이 설정을 통해 ESLint가 Vue 코드에 최적화된 규칙을 적용합니다.

2. Prettier 플러그인 설치

코드 포맷팅을 담당하는 Prettier 플러그인을 추가하여 코드 스타일을 일관되게 유지할 수 있습니다. ESLint와 Prettier가 서로 충돌하지 않도록 eslint-config-prettier와 eslint-plugin-prettier를 함께 설치해야 합니다. 설치 명령어는 다음과 같습니다:

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

설치 후 .eslintrc.js 파일에서 Prettier 규칙을 설정하여 ESLint와 통합합니다. 이 설정은 Prettier가 제공하는 코드 스타일을 ESLint에서 우선적으로 적용하여 스타일 충돌을 방지합니다.

3. 플러그인 설정 통합

마지막으로 .eslintrc.js 파일에서 eslint-plugin-vue와 Prettier 설정을 통합하여 적용합니다. 예시 설정은 다음과 같습니다:

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

이러한 설정을 통해 Vue와 Prettier 규칙이 모두 적용되어 코드 검사와 포맷팅이 일관되게 유지됩니다. 설정이 완료되면, 저장 시 자동으로 포맷팅 되는 VS Code 기능을 통해 더욱 편리하게 일관성 있는 코드를 유지할 수 있습니다.

왜 ReactJS와 TypeScript를 같이 쓸까? 초보자를 위한 완벽 가이드

4. ESLint와 Prettier의 충돌 방지 설정

반응형

Vue3 프로젝트에서 ESLint와 Prettier를 함께 사용할 때, 각 도구가 서로 충돌하는 규칙을 적용할 수 있습니다. ESLint는 코드 품질을 위한 검사 도구이며, Prettier는 코드 스타일을 통일하기 위한 포맷터입니다. 이 두 도구의 규칙이 상충할 경우 오류가 발생하거나 코드 스타일이 불안정해질 수 있으므로, 충돌 방지 설정이 필요합니다. 아래는 ESLint와 Prettier가 원활하게 작동하도록 설정하는 단계입니다.

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

eslint-config-prettier 패키지는 ESLint와 Prettier 간의 충돌을 방지하는 핵심 패키지입니다. 이 패키지는 Prettier에서 정의한 코드 스타일을 유지할 수 있도록 ESLint의 스타일 규칙을 비활성화해 줍니다. 설치는 다음과 같이 진행합니다:

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

설치 후, .eslintrc.js 파일의 extends 옵션에 'prettier'를 추가해 ESLint가 Prettier 설정을 우선 적용하도록 합니다.

2. eslint-plugin-prettier로 Prettier 규칙 ESLint에 적용하기

eslint-plugin-prettier는 ESLint 규칙 안에 Prettier의 포맷 규칙을 포함시켜, Prettier가 ESLint에서 경고와 오류를 발생시킬 수 있도록 합니다. 이렇게 하면 Prettier 포맷팅 오류를 ESLint가 감지할 수 있어, 일관된 스타일 검사가 가능합니다. 설치 명령어는 다음과 같습니다:

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

설치 후, .eslintrc.js 파일의 extends와 plugins 배열에 'plugin:prettier/recommended'를 추가해 Prettier 규칙을 ESLint가 적용하도록 설정합니다.

3. .prettierrc 파일로 세부 설정

Prettier의 설정을 .prettierrc 파일에 따로 정의해, 프로젝트 전반에 일관된 스타일을 적용할 수 있습니다. 예를 들어 들여 쓰기, 세미콜론 여부, 큰따옴표/홑따옴표 설정 등을 명확히 정의하여 팀 내의 코드 스타일을 일관되게 유지합니다. 예시 설정은 다음과 같습니다:

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2
}

4. VSCode 자동 포맷팅 설정

개발 환경에서 VSCode와의 연동을 통해 자동 포맷팅을 설정하면 코딩할 때마다 코드가 자동으로 Prettier 규칙에 맞춰 포맷팅 됩니다. settings.json 파일에 다음 설정을 추가하세요:

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

이렇게 설정을 마치면 ESLint와 Prettier의 충돌을 최소화하고, 일관된 코드 스타일을 유지하면서 자동 포맷팅 기능을 사용할 수 있습니다.

5. VS Code 연동 및 자동 포맷팅 설정

Vue3 프로젝트에서 ESLint와 Prettier를 설정한 후, VS Code와 연동하여 자동 포맷팅을 활성화하면 코드 스타일을 일관되게 유지할 수 있습니다. 특히, 저장 시 자동으로 코드가 포맷팅 되어 개발 효율성을 높이고 팀 간 협업 시 코드 일관성을 유지하는 데 매우 유용합니다.

1. VS Code 확장 프로그램 설치

먼저 VS Code에서 ESLint와 Prettier 확장 프로그램을 설치해야 합니다. 확장 탭에서 ESLint와 Prettier를 검색하여 설치하고, 설치가 완료되면 VS Code가 프로젝트 설정에 따라 코드 스타일을 자동으로 적용할 준비가 됩니다.

2. 설정 파일 수정: formatOnSave 활성화

자동 포맷팅을 위해 VS Code 설정에서 formatOnSave 옵션을 활성화해야 합니다. VS Code 설정 파일(settings.json)에 다음 코드를 추가하여 저장 시 포맷팅이 자동으로 적용되도록 설정합니다:

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

이 설정을 통해 Prettier가 저장 시 기본 포맷터로 작동하여 일관된 코드 스타일을 적용합니다.

3. ESlint와 Prettier 충돌 방지 설정

ESLint와 Prettier의 규칙이 충돌할 수 있기 때문에, 이를 방지하기 위해 eslint-config-prettier와 eslint-plugin-prettier를 설치한 후 .eslintrc.js 설정 파일에 다음과 같이 설정합니다:

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

이렇게 하면 ESLint가 Prettier와의 충돌을 무시하고, Prettier의 스타일 규칙을 따르게 되어 코드 스타일링이 통일됩니다.

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

마지막으로 ESLint 규칙에 맞춰 자동으로 코드가 수정되도록 설정할 수 있습니다. settings.json에 다음 항목을 추가하여 저장할 때 ESLint 규칙에 맞게 코드가 수정되도록 설정하세요:

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

이 설정은 코드의 문제를 자동으로 수정해 주므로, 코드 오류를 사전에 방지하고 유지 보수성을 높이는 데 유용합니다.

이와 같이 VS Code에서 ESLint와 Prettier를 연동하여 자동 포맷팅을 설정하면 일관된 코드 스타일을 유지하고 개발 생산성을 높일 수 있습니다.

가장 많이 찾는 글

TypeScript에서 Type과 Interface의 차이점 5가지

TypeScript로 고급 프로그래밍하기

TypeScript 제네릭 이해하기: 유연하고 안전한 코딩을 위한 실전 활용법

결론

Vue3 프로젝트에서 ESLint와 Prettier를 설정하여 코드 품질을 유지하고 일관된 코드 스타일을 적용할 수 있습니다. 특히 자동 포맷팅 기능을 설정하면 팀원 간의 코드 스타일 차이를 줄이고 협업 효율성을 극대화할 수 있습니다.