Vue - Official 플러그인이 갑자기 작동하지 않을때..

과거에 Yarn Berry + Vue3(Javascript)로 진행했던 프로젝트의 eslint 및 컴포넌트 프리팅이 정상적으로 동작하지 않아 해결하던 중 알게되었던 사실을 기술하고자 글을 적게 되었습니다.

프로젝트 환경:

• Vue 3 (Composition API)
• JavaScript (TypeScript 아님)
• Yarn Berry (PnP)
• VSCode

1. jsconfig.json 설정

자바스크립트 프로젝트이기 때문에 jsconfig.json을 추가했습니다.

{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["es2020", "dom"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

이 방식을 통해 jsconfig.json을 작성했지만 문제가 해결되지 않았습니다...

2. Yarn Berry와 eslint

문제의 핵심은 Yarn Berry(PnP)에 있었습니다. Yarn Berry는 node_modules를 생성하지 않고 .yarn/cache에 zip 파일로 의존성을 관리합니다. VSCode는 기본적으로 node_modules에서 타입 정의를 찾기 때문에, Yarn Berry 환경에서는 추가 설정이 필요했습니다.

yarn dlx @yarnpkg/sdks vscode

이 명령어를 실행하면 .yarn/sdks 폴더가 생성되고, VSCode가 Yarn Berry의 의존성을 인식할 수 있게 됩니다.

하지만 다른 문제가 발생했습니다
doesn't point to a valid tsserver install falling back to bundled typescript version

3. TypeScript 설치의 딜레마

저는 Javascript 프로젝트를 유지보수했기에 당연히 Typescript가 필요 없을줄 알았지만 문제를 찾아보며 typescript의 미설치로 인한 오류라는 것을 알게 되었습니다.

VSCode의 자동완성 메커니즘
VSCode와 Vue - Official 확장은 TypeScript 언어 서버(tsserver)를 사용해서 자동완성, IntelliSense, 타입 추론을 제공합니다. 이는 자바스크립트 프로젝트에서도 마찬가지입니다.
일반적인 npm 환경에서는 전역으로 설치된 TypeScript를 사용하거나, VSCode에 번들로 포함된 TypeScript를 사용할 수 있습니다. 하지만 Yarn Berry는 전역 패키지를 사용하지 않기 때문에 typescript를 설치해야 했었습니다.
yarn add -D typescript로 TypeScript를 devDependencies로 설치하면 Vue - Official이 정상적으로 동작하게됩니다.

4. SDK 재생성 및 설정

TypeScript 설치 후 yarn dlx @yarnpkg/sdks vscode 명령어를 통해 SDK를 재성성 하였습니다. 이후 Typescript를 선택하고 /.vscode/settings.json에 설정을 추가했습니다.

• Typescript 설정

  .vue 파일 열기
  Ctrl+Shift+P (Mac: Cmd+Shift+P)
  "TypeScript: Select TypeScript Version" 입력
  "Use Workspace Version" 선택

• settings.json 설정

{
  "typescript.tsdk": ".yarn/sdks/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

정리

1. Yarn Berry는 다르다
   Yarn Berry의 PnP(Plug'n'Play) 모드는 node_modules를 생성하지 않는다. 이는 빠른 설치와 효율적인 디스크 사용을 가능하게 하지만, 많은 도구들이 node_modules를 전제로 작동하기 때문에 추가 설정이 필요하다.

2. Vue-Official

• Vue-Official을 사용하기 위해서는 Typescript가 필수적으로 사용되어야한다. 전역 node_modules를 활용할 수 없는 상황이라면 devDependencies에 설치해줘야한다.

마치며

VSCode에서 간단한 자동완성 하나가 안 되는 문제를 해결하는 데 반나절이나 걸렸습니다.(야근 확정..) Yarn Berry, Vue 3, JavaScript, VSCode가 모두 얽혀있는 환경에서는 하나하나의 설정이 모두 맞아떨어져야 제대로 작동합니다. 이를 위해 각 기능들에 대한 이해와 옵션 설정 하나하나를 신중하게 해야할것 같습니다.

이 글이 같은 문제로 고생하는 다른 개발자들이 빠르게 해결하길 바랍니다..!