오늘의 삽질 내용

Yarn Berry Plug n Play를 사용할 때 Coc.nvim의 tsserver가 타입을 인지하지 못하는 에러 해결.

오늘의 문제

라피신에서 한달동안 vim만 사용하다보니 많이 익숙해지기도 했고, 최근 노트북화면으로만 작업하려니 vim이 편해 애용하고 있는데요, nodejs 패키지 모듈 중 yarn을 선호하는데 PnP를 적용하니 vim에서 제대로 인식하지 못하는 문제가 있는데 해당 문제에 대한 글이 없어 정리해봤습니다.

저는 neovim에 Coc.nvim 플러그인을 설치해 사용하고 있습니다. Coc.nvim플러그인은 vscode나 intellij등 IDE의 자동완성, 포맷팅, 프로젝트 관리 기능 등을 neovim에서 사용할 수 있게 해주는 플러그인입니다. Coc.nvim의 세팅 및 플러그인, yarn 설치, tsconfig 세팅 등은 이 글에서 다루지 않겠습니다. @types/node 등 타입 패키지는 이미 잘 설치됐다는 가정하에 진행하겠습니다.

해결

우선 터미널에 명령어를 입력해 vim이 yarn berry의 모듈을 인식할 수 있도록 해줍니다.

yarn dlx @yarnpkg/sdks vim

vscode를 쓰면 vim 대신 vscode를 입력해주면 됩니다. 그럼 프로젝트 디렉토리에 .vim폴더가 생기고 그 안에 coc-config.json파일이 생깁니다. 그리고 .yarn 디렉토리 안에는 sdks라는 디렉토리가 생성됩니다. coc-config.json파일을 열어보면 다음과 같은 내용을 확인할 수 있습니다.

{
    "eslint.packageManager": "yarn",
    "eslint.nodePath": ".yarn/sdks"
}

yarn 공식문서에 따르면 이대로도 정상적으로 동작해야하는데 아무래도 typescript는 논외인 것 같습니다. vscode는 typescript설정까지 알아서 잘 되는데 아쉽습니다.

파일에서 아래의 내용을 추가해줍니다.

{
    "eslint.packageManager": "yarn",
    "eslint.nodePath": ".yarn/sdks",
    "tsserver.tsdk": ".yarn/sdks/typescript/lib", // 추가
    "tsserver.useLocalTsdk": true // 추가
}

Coc.nvim에서 coc-tsserver를 설치하면 lsp를 알아서 다운받아 활용하는데요, node_modules디렉토리가 있으면 그 안에서 type들을 찾아오는데 PnP를 사용하면 node_modules디렉토리가 없으므로 찾아오지 못합니다. 따라서 .yarn디렉토리에 있는 typescript모듈을 사용하도록 설정하고, 외부 tsserver는 사용하지 않도록 useLocalTsdk옵션을 true로 설정해줘야합니다.