【TypeScript】yarn4 + VSCodeでts2307が一生出続ける問題の解消法

執筆時点で最新版のモジュールをガチャガチャかき集めたVue.jsプロジェクトを作成しようとしたところ、一瞬つまずいたのでここに解決方法を書きしたためておきます。

# やること

- TypeScriptで記述し、Node.jsランタイムに突っ込み、Yarn v4で依存関係を管理しているようなプロジェクトで、表題の問題を解決する
    - `tsconfig.json`を極力いじらず、解決したい
- 解決方法は下記2通りのどっちでもOK
    1. `.yarnrc.yml`に1行書いて、Yarn v2以降特有のパッケージ依存解決方法をYarn v1と同じやり方に設定する
    2. VSCode用のYarn Editor SDKを設定して、VSCodeがインストールされたモジュールを認識できるようにする

# 問題とその原因

## 問題

> TS2307: Cannot find module or its corresponding type declarations

このエラーがVSCodeだけで出現し続けてわずらわしいというのが問題です。画像を見ると「？？？」となると思います。

![エラーの様子](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518330/fc2a2392-bb4f-9563-f6f8-e18480ccf132.png)

[Vue.jsクイックスタートガイド](https://ja.vuejs.org/guide/quick-start)で作ったばかりのプロジェクトで、もちろん`yarn`コマンドでパッケージインストールも済んでいるはずなのに、何かがおかしいです。

ちなみに、この状態で`yarn dev`すればちゃんとローカルホストに例の画面が出てくるので、これはVSCodeの表示だけがなんか変だぞー！？という問題ということになります。

![localhostの様子](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518330/9222a4d6-cfff-a040-60be-b52c6d0f383a.png)


## 原因

https://yarnpkg.com/features/pnp

**ずばりこれです。**

Yarn PnPという機能がYarn v2以降に搭載されたことで、パッケージがいつもの`node_modules`とは違う雰囲気でインストールされてしまいます。実際、`yarn`コマンドでパッケージをインストールすると、`pnp.cjs`というファイルがプロジェクトルートに新たに作成されて、その中に何やらいろいろパッケージの情報が書かれています。

`node_modules`の中を見ても、明らかに様子が違うのが分かります。

<details>
<summary>いつものnode_modules</summary>

![いつもの](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518330/e63acc41-4380-1007-b203-5efff935af06.png) 

</details>

<details>
<summary>PnPで作られるnode_modules</summary>

![pnp](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518330/c41aa09c-3737-396a-4ee5-a5b2f50f0311.png)

</details>

:::note info
あとこれも原因となっているかは分かりませんが、Yarn v4ではどうやらデフォルトでTypeScriptなどのパッケージが含まれているらしく、それも影響しているのかなー？と思いました。Yarn v3で表題のようなエラーが出ないとわかれば、こいつも原因の一つといえそうです。

- 参考: [Release: Yarn 4.0 | Yarn](https://yarnpkg.com/blog/release/4.0)
:::

# 解決法

## その1. .yarnrc.ymlに1行書く

https://yarnpkg.com/configuration/yarnrc#nodeLinker

プロジェクトルートに`.yarnrc.yml`というYarnの設定ファイルを作成し、この1行を書いてください。(たったのそれだけ！？)

```yml
nodeLinker: node-modules
```

> Define how Node packages should be installed.
>
> Yarn supports three ways to install your project's dependencies, based on the nodeLinker setting.

と[公式サイト](https://yarnpkg.com/configuration/yarnrc#nodeLinker)にもあるように、`nodeLinker`を設定することで、パッケージのインストール方法を指定できます。ここでは、`node-modules`と設定してあげることで、Yarn v1やnpmと同じような形式で`node_modules`ディレクトリ内にパッケージがインストールされるようになります。

## その2. Editor SDKを導入する

https://yarnpkg.com/getting-started/editor-sdks#vscode

とはいえ、Yarn v2以降の目玉機能であるPnPを強制解除するのが嫌だ！という人はこちらの方法で解決するのが良いかと思います。YarnはVSCode用のSDKを提供しているのでそれを導入してください。

公式サイトにも導入方法は書いてありますが、ここでも軽く説明しておきます。

1. [ZipFS](https://marketplace.visualstudio.com/items?itemName=arcanis.vscode-zipfs)を拡張機能としてインストールする
2. `yarn dlx @yarnpkg/sdks vscode`をプロジェクトルートで叩く
3. 「Ctrl(Command) + Shift + P」でVSCodeのコマンドを開き、「Typescript: Select TypeScript Version...」を選択する
![Typescriptのバージョンを選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518330/28a904ac-4ba4-9dea-2487-26ef67aa8a17.png)
4. 「ワークスペースのバージョンを使用 X.X.X-sdk」を選択する
![SDKを選ぶ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518330/6d5443bc-3eaf-12f7-def1-54784dcd03d3.png)

こうすることでPnPを解除せずとも、楽しいYarn + VSCodeライフが送れます。

# まとめ

Yarn + VSCodeライフ最高！