이번 포스트에서는 Vue.js 프로젝트에 타입스크립트를 사용하고, ESLint를 설정하는 방법을 알아보겠습니다.

1. TypeScript로 Vue.js 프로젝트 생성하기

먼저, Vue CLI를 사용하여 TypeScript로 프로젝트를 생성합니다. 아래 명령어를 터미널에 입력합니다.

vue create --default my-typescript-app

프로젝트 생성 시에 default옵션으로 선택하면, TypeScript 옵션을 선택할 수 있습니다.

2. ESLint 플러그인 설치

TypeScript 및 Vue.js에서 ESLint를 사용하기 위해 다음과 같은 플러그인을 설치합니다.

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

3. ESLint 설정 파일 생성

.eslintrc.js라는 파일을 프로젝트 루트에 생성하고, 아래 내용을 추가합니다.

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
  ],
};

4. VSCode 설정

만약 VSCode를 사용하고 있다면, ESLint 플러그인을 설치하여 코드 편집기에서 오류 및 경고를 확인할 수 있습니다.

위의 단계를 따라 하면, Vue.js와 TypeScript 프로젝트에서 ESLint를 쉽게 설정할 수 있습니다. 이제 코드를 더 안정적으로 유지할 수 있게 되었습니다.

더 자세한 내용은 여기에서 확인할 수 있습니다.