Vite + Vue 3 + TypeScript 에서 eslint 버그 및 오류들

Vue3 에서 Eslint + Prettier 조합으로 코드 정규화하려고 설정 잡다가 버그와 오류가 너무 많아 이 방식은 더 이상 사용해서는 안될것 같아 기록한다.

 

많은 스택플로우와 eslint 깃허브를 돌아다녔다. 그 결과 아래와 같은 설정이 되었다.

// .eslintrc.js

module.exports = {
  root: true,
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    project: './tsconfig.json',
    extraFileExtensions: ['.vue'],
  },
  plugins: ['@typescript-eslint', 'vue', 'vue-scoped-css', 'import'],
  extends: ['prettier', 'eslint:recommended', 'plugin:vue-scoped-css/vue3-recommended', 'plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended'],
  env: {
    node: true,
    browser: true,
  },
  ignorePatterns: ['.eslintrc.js', 'vite.config.ts'],
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
};

그런데 왠걸 버그가 무지막지하게 많다. 그리고 'eslint 깃허브' 에서도 .vue + Typescript 에 대해서 완벽한 지원을 못한다고 명시를 해뒀다.

이말인 즉슨 .vue 에서 타입스크립트 쓰지말라는 것과도 같다...

 

나는 틀을 정해 놓고, 거기를 크게 벗어나는 코딩 스타일을 싫어한다.(꼰대인가...)

그래서 eslint 를 적극 도입하려고 했지만 vue + typescript 가 안되니 깔끔하게 포기하기로 했다.

 

대체 안으로 본것이 바로 volar 이다.

물론 vetur 가 있지만 이 플러그인의 코딩 스타일은 정말 필요 없는 것들도 강제로 때려 넣어서 마음에 안든다.

그리고 vite + vue3 + typescript 로 프로젝트 생성하면 volar 를 추천하고 있다.

 

내가 왜 eslint 쓸려고 뻘짓했는지 모르겠다.

그래서 .vue 파일에서는 과감하게 eslint를 비활성화 했다.

// .eslintrc.js 
// eslint 설정에는 .vue 관련 플러그인 전부 삭제했다. .vue 확장자는 eslint에서 제외로 변경
module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    project: './tsconfig.json',
  },
  plugins: ['@typescript-eslint'],
  extends: ['prettier', 'eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  env: {
    node: true,
    browser: true,
  },
  ignorePatterns: ['.eslintrc.js', 'vite.config.ts', '*.vue'],
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
};

 

vscode의 기본 포멧을 volar로 변경했다.

// settings.json

"[vue]": {
   "editor.defaultFormatter": "johnsoncodehk.volar"
},

 

나 같은 삽질에 시간을 보내고 있을 개발자에게 전한다.

vite + vue3 +typescript 를 쓸거면 prettierrc + eslint 는 어디까지나 .vue 제외하고 사용바란다.

vetur는 보지도 말라... 포멧 스타일이 너무 잡스럽다.

volar를 사용해라 이게 정답이다.