Vue3 + TypeScript 개발 환경에서 ESLint 설정하는 방법 5단계

Vue3 + TypeScript 개발 환경에서 ESLint 설정하는 방법

Vue3와 TypeScript, ESLint로 코드 품질 관리하기

Vue3 프로젝트에서 TypeScript와 ESLint를 함께 설정하면 코드 품질과 유지보수성이 크게 향상됩니다. 이 환경은 코드 일관성을 유지하고 오류를 예방하는 데 도움이 되며, 특히 협업 시 유용합니다. 이 글에서는 Vue3와 TypeScript 프로젝트에서 ESLint를 설정하는 방법을 단계별로 안내합니다.

1. Vue3 프로젝트 생성 및 TypeScript 설정

 

Vue3와 TypeScript 프로젝트를 시작하려면, 먼저 기본 Vue3 프로젝트를 생성한 후 TypeScript를 적용하는 과정이 필요합니다. 이 단계는 프로젝트 초기 설정에서 코드 안정성과 개발 생산성을 높이는 데 중요한 역할을 합니다. 아래에서 단계별로 Vue3와 TypeScript 설정 방법을 안내합니다.

1. Vue3 프로젝트 생성

Vue3 프로젝트는 Vite 기반으로 생성하는 것이 일반적입니다. Vite는 빠른 빌드 속도와 간단한 설정으로 Vue 개발에 최적화된 빌드 도구입니다. 다음 명령어로 새로운 Vue3 프로젝트를 생성할 수 있습니다.

npm create vue@latest

위 명령어를 실행하면 프로젝트 이름, 프레임워크, 추가 설정을 묻는 프롬프트가 나타납니다. 프레임워크 선택에서 Vue3를 선택하고, 언어 설정에서 TypeScript를 활성화합니다. 이를 통해 TypeScript가 적용된 Vue3 프로젝트 템플릿이 자동으로 설정됩니다.

2. TypeScript 패키지 설치 확인

프로젝트가 생성되면, TypeScript가 설치되었는지 확인합니다. 설치되지 않은 경우 터미널에서 아래 명령어를 통해 TypeScript 패키지를 설치할 수 있습니다.

npm install typescript --save-dev

이후, tsconfig.json 파일이 프로젝트의 루트 폴더에 생성되어 있어야 합니다. 이 파일은 TypeScript의 컴파일러 옵션을 관리하므로, 필요에 따라 수정할 수 있습니다.

3. tsconfig.json 설정 검토

tsconfig.json 파일에서 strict 옵션과 moduleResolution 설정을 검토하는 것이 중요합니다. "strict": true로 설정하면 엄격한 타입 검사를 통해 코드 안정성을 높일 수 있습니다. 또한, "moduleResolution": "node" 설정을 확인하여 모듈 탐색 방식을 최적화하세요.

4. TypeScript 구성 요소 작성

Vue 파일에서 TypeScript를 사용할 때는 <script setup lang="ts">와 같은 형태로 작성하여, TypeScript의 타입 체크 기능을 활용할 수 있습니다. 예를 들어, 컴포넌트에서 props나 data를 정의할 때 TypeScript의 타입을 지정하여 오류를 미리 방지할 수 있습니다.

이 과정을 통해 Vue3와 TypeScript가 잘 설정된 프로젝트 환경을 만들 수 있으며, 이후 ESLint와 Prettier 등의 도구를 추가하여 코드 스타일과 품질을 더욱 개선할 수 있습니다.

자바스크립트 개발자가 2024년에 주목해야 할 필수 기술

2. ESLint 설치 및 기본 설정

 

Vue3 프로젝트에 ESLint를 설치하고 기본 설정을 적용하는 과정은 코드 품질을 유지하고 오류를 방지하는 데 필수적입니다. 이 단계에서는 ESLint 설치 및 환경 구성을 단계별로 설명하겠습니다.

1. ESLint 설치

터미널에서 아래 명령어를 사용하여 ESLint를 설치합니다. Vue CLI를 이용해 프로젝트를 생성한 경우 기본 ESLint 설치 옵션이 있지만, 따로 설치하려면 다음 명령어를 실행하세요:

npm install eslint --save-dev

또한, Vue3와 TypeScript를 함께 사용하는 경우 eslint-plugin-vue와 @typescript-eslint/eslint-plugin도 설치해야 합니다. 이를 위해 다음 명령어를 추가 실행합니다:

npm install eslint-plugin-vue @typescript-eslint/eslint-plugin --save-dev

2. ESLint 초기화 및 설정 파일 생성

ESLint 설치 후, 터미널에서 npx eslint --init 명령어를 실행해 ESLint 설정을 초기화합니다. 초기화 과정에서는 아래와 같은 질문을 통해 프로젝트에 맞는 환경을 선택하게 됩니다:

• How would you like to use ESLint? - To check syntax, find problems, and enforce code style
• What type of modules does your project use? - JavaScript modules (import/export)
• Which framework does your project use? - Vue.js
• Does your project use TypeScript? - Yes
• Where does your code run? - Browser

설정이 완료되면 .eslintrc.js 파일이 생성됩니다. 이 파일은 프로젝트의 ESLint 구성 파일로, 여기에 규칙과 환경을 추가로 지정할 수 있습니다.

3. 기본 규칙 설정

TypeScript를 사용하면 @typescript-eslint/parser와 eslint-plugin-vue를 구성에 추가해야 합니다. .eslintrc.js 파일을 열고, 다음과 같이 기본 규칙을 설정합니다:

module.exports = {
  parser: "@typescript-eslint/parser",
  extends: [
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
    "eslint:recommended"
  ],
  rules: {
    "no-unused-vars": "warn",
    "no-console": "off"
  }
};

4. ESLint 실행 및 코드 검토

설정을 완료한 후, ESLint를 사용하여 코드를 분석하고 오류와 경고를 확인할 수 있습니다. 다음 명령어로 프로젝트 전체에 ESLint 검사를 실행하세요:

npx eslint . --ext .js,.ts,.vue

이 과정에서 발견된 문제들은 터미널에 표시되며, ESLint 규칙에 따라 수정할 수 있습니다. 이렇게 하면 프로젝트 전반에 걸쳐 일관된 코드 스타일을 유지하고, 잠재적인 오류를 미리 예방할 수 있습니다.

위 단계를 통해 Vue3와 TypeScript 프로젝트에서 ESLint 기본 설정을 성공적으로 적용할 수 있습니다. 코드 품질을 지속적으로 관리할 수 있는 토대를 마련했다면, 이후 Prettier 연동이나 Flat Config 추가로 프로젝트 요구 사항에 맞게 설정을 강화할 수 있습니다.

3. eslint-plugin-vue와 @typescript-eslint 설정

 

Vue3 프로젝트에서 TypeScript와 ESLint를 효과적으로 사용하기 위해서는 eslint-plugin-vue와 @typescript-eslint를 설치하고 설정하는 과정이 필요합니다. 이 두 가지 플러그인을 활용하면 Vue 및 TypeScript 특성에 맞는 규칙을 추가할 수 있어 코드 일관성과 품질이 개선됩니다. 아래 단계에 따라 설정을 진행하세요.

1. eslint-plugin-vue와 @typescript-eslint 설치

터미널에서 다음 명령어를 실행해 두 플러그인을 설치합니다. 이 명령어는 Vue의 규칙을 정의하는 eslint-plugin-vue와 TypeScript를 위한 @typescript-eslint/parser, @typescript-eslint/eslint-plugin을 포함합니다.

npm install --save-dev eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. ESLint 설정 파일 수정

설치 후, 프로젝트의 .eslintrc.js 파일을 열어 다음과 같이 설정을 추가합니다. parser 옵션에 @typescript-eslint/parser를 지정하여 TypeScript를 인식하게 하고, extends에 plugin:vue/vue3-recommended와 plugin:@typescript-eslint/recommended를 추가해 Vue와 TypeScript의 권장 규칙을 적용합니다.

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  rules: {
    // 프로젝트에 맞게 추가적인 규칙을 설정할 수 있습니다.
  },
};

3. TypeScript 지원을 위한 추가 설정

@typescript-eslint를 적용하면 TypeScript 파일에서만 발생할 수 있는 문제를 ESLint가 감지하고 경고할 수 있습니다. 또한 rules 섹션을 통해 프로젝트에 필요한 추가 규칙을 적용할 수 있으며, 예를 들어 타입 확인이 필요한 변수 선언이나 명시적인 반환 타입 등의 규칙을 설정해 TypeScript의 타입 안정성을 높일 수 있습니다.

4. Prettier와의 통합

ESLint와 Prettier를 함께 사용할 경우, 코드 스타일 충돌을 방지하기 위해 Prettier 규칙을 포함하도록 설정하는 것이 좋습니다. eslint-config-prettier와 eslint-plugin-prettier를 추가해 코드 스타일을 일관되게 유지하면서 코드 품질 검사를 진행할 수 있습니다.

위와 같은 설정을 통해 Vue3와 TypeScript가 포함된 프로젝트에서도 ESLint를 효과적으로 활용할 수 있습니다. 이렇게 하면 TypeScript의 타입 안정성을 유지하면서 Vue3의 구조적 규칙을 준수하는 코드 작성이 가능해집니다.

Vue 3 컴포넌트 이해하기: 5분 안에 배우는 기초와 실습

4. Prettier 연동으로 코드 스타일 통합

반응형

ESLint와 Prettier를 함께 사용하면 Vue3 + TypeScript 프로젝트에서 코드 스타일을 일관성 있게 유지하고 코드 가독성을 높일 수 있습니다. ESLint는 코드의 품질과 규칙을 강제하는 데 중점을 두고, Prettier는 코드의 형식(공백, 줄 바꿈 등)을 자동으로 포맷팅해 개발자의 스타일 규칙을 일관되게 적용해 줍니다. 두 도구를 함께 설정해 코드 스타일을 통합하는 방법을 살펴보겠습니다.

1. Prettier와 ESLint 설치 및 설정

먼저 프로젝트에 Prettier와 연동 플러그인을 설치합니다. 다음 명령어로 필요한 패키지를 설치하세요.

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

eslint-config-prettier는 ESLint의 코드 스타일 규칙과 충돌을 방지하고, eslint-plugin-prettier는 Prettier의 규칙을 ESLint 규칙으로 추가해 코드가 자동으로 포맷되도록 돕습니다.

2. ESLint 설정 파일 수정하기

.eslintrc.js 파일에서 Prettier와의 통합을 위해 다음과 같이 설정을 추가합니다:

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    '@typescript-eslint/recommended',
    'plugin:prettier/recommended' // Prettier와 ESLint 통합
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error', // Prettier 규칙 위반 시 ESLint 오류 발생
  },
};

'plugin:prettier/recommended' 확장 설정은 ESLint가 Prettier와의 통합을 위해 Prettier 규칙을 자동으로 적용하도록 합니다. 'prettier/prettier' 규칙을 error로 설정하면, 코드가 Prettier의 규칙을 따르지 않을 경우 ESLint가 경고를 제공합니다.

3. Prettier 설정 파일 추가하기

프로젝트 루트에 .prettierrc 파일을 추가하여 원하는 코드 스타일을 지정할 수 있습니다. 예를 들어, 다음과 같이 작성해 코드 스타일을 세밀하게 설정할 수 있습니다:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80
}

이 설정은 세미콜론을 사용하고, 싱글 쿼트를 적용하며, 들여 쓰기를 두 칸으로 유지하고 코드 길이를 80자로 제한합니다. 이처럼 일관된 스타일이 유지되면 코드 가독성이 높아지고 협업 시 코드 충돌이 줄어듭니다.

4. 코드 자동 포맷 설정

마지막으로 VS Code에서 저장 시 자동 포맷 기능을 활성화해 코드를 자동으로 정리할 수 있습니다. settings.json 파일에 다음 옵션을 추가하세요:

{
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

이 설정은 TypeScript와 Vue 파일이 저장될 때마다 Prettier로 자동 포맷되도록 합니다. 이를 통해 코드 스타일이 항상 일관되게 유지되고, 개발 중에도 규칙을 쉽게 준수할 수 있습니다.

이와 같이 ESLint와 Prettier를 연동하면 Vue3 + TypeScript 프로젝트에서 코드 스타일을 통합 관리할 수 있어 유지 보수와 협업 효율성이 크게 향상됩니다.

5. Flat Config 및 플러그인 최적화

TypeScript와 Vue3 프로젝트에서 최신 ESLint 버전(9 이상)을 활용하려면 Flat Config 방식을 사용해야 합니다. Flat Config는 기존의 .eslintrc.js 파일 대신 평평한(flat) 형태의 설정 파일을 통해 ESLint의 설정을 관리하는 새로운 방식입니다. 이를 통해 다양한 플러그인과 설정을 효과적으로 최적화할 수 있습니다.

1. Flat Config 설정 파일 생성

Flat Config를 적용하려면 프로젝트 루트에 eslint.config.js 파일을 생성합니다. 이 파일은 이전의 .eslintrc.js를 대체하며, 더 직관적이고 일관된 설정을 제공합니다. Flat Config는 기본적으로 JavaScript 파일 형태로 설정하므로, 동적 구성을 통해 다양한 환경에서 유연하게 사용할 수 있습니다.

2. 기본 플러그인 및 설정 추가

Flat Config에서 eslint-plugin-vue와 @typescript-eslint 같은 기본 플러그인들을 추가해야 합니다. 이 과정은 ESLint가 Vue3와 TypeScript 파일을 인식하고 규칙을 적용하는 데 필수적입니다. 설치 후 설정 파일에 플러그인을 선언해 프로젝트 내의 Vue와 TypeScript 코드에 적절한 검사 규칙을 적용할 수 있습니다.

3. Prettier와의 호환성 유지

ESLint와 Prettier를 함께 사용할 경우 충돌을 방지하기 위해 eslint-config-prettier와 eslint-plugin-prettier를 Flat Config에 추가합니다. 이를 통해 Prettier가 정의한 코드 스타일 규칙을 ESLint가 무시하도록 설정할 수 있습니다. 최적의 코드 스타일을 유지하면서도 ESLint 규칙과 조화를 이루게 됩니다.

4. 확장성과 유지보수성 강화

Flat Config는 기존의 계층화된 설정 방식보다 더 간결하고 확장 가능한 구성을 제공합니다. 특히 여러 설정 파일을 관리하지 않아도 되므로 유지보수가 수월해지며, 프로젝트 요구에 맞춰 설정을 쉽게 추가하거나 수정할 수 있습니다. 이렇게 설정을 최적화하면 팀 내에서 일관된 코딩 스타일을 유지하면서도 개별 프로젝트에 맞춘 규칙 설정이 가능합니다.

5. Flat Config의 장점과 고려 사항

Flat Config는 최신 ESLint 버전에 최적화되어 있어 향후 ESLint 업그레이드에서도 호환성을 유지하기 쉽습니다. 하지만 모든 프로젝트에서 즉시 적용하기 어려울 수 있으므로, 기존 설정 파일(.eslintrc.js)을 Flat Config로 전환할 때는 프로젝트에 맞게 커스터마이징이 필요합니다. 도입 전, 프로젝트 요구사항을 검토하고 테스트 환경에서 적용해 보는 것이 좋습니다.

이처럼 Flat Config와 플러그인 최적화를 통해 Vue3와 TypeScript 프로젝트의 ESLint 설정을 현대적으로 관리할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 크게 향상할 수 있습니다.

가장 많이 찾는 글

Vue 3 기초부터 실전까지: 초보자를 위한 5가지 필수 개념

2024년 Vue 3 완벽 입문: 쉽게 따라하는 설치부터 프로젝트 시작까지

처음 배우는 Python: 파이썬 기초를 4주 만에 마스터하는 법

결론

Vue3, TypeScript, 그리고 ESLint를 함께 사용하면 코드 품질 관리가 수월해지고 오류가 줄어듭니다. 설정 과정을 마친 후에는 Prettier와 연동하여 코드 스타일을 유지하고, Flat Config를 활용해 최신 프로젝트 환경을 최적화할 수 있습니다.