delhi09の勉強日記

技術トピック専用のブログです。自分用のメモ書きの投稿が多いです。あくまで「勉強日記」なので記事の内容は鵜呑みにしないでください。

VS Codeが使用するTypeScriptを変更する

概要

Reactの環境構築中にVS Code上で「Cannot use JSX unless the '--jsx' flag is provided.」というメッセージのエラーが発生して解決方法を調査していた。

以下のissueと同じだと思われる。
github.com

その時に、エラーを解消する過程で、VS Codeでデフォルトで使われるTypeScriptは、プロジェクトでnpmでローカルインストールしたTypeScriptではないことを知ったのでメモ。(グローバルインストールの場合は分からない。)

なお、プロジェクトでnpmでローカルインストールしたTypeScriptを使用するように変更したら上記のエラーも解消した。

結論

  • VS Codeでデフォルトで使われるTypeScriptは、VS Codeに同封されているTypeScriptである。
  • プロジェクトでnpmでローカルインストールしたTypeScriptを使用したい場合は、以下のようにVS Codesettings.jsonを設定する必要がある。
{
  "typescript.tsdk": "./node_modules/typescript/lib"
}

詳細

前提

前提として、公式ドキュメントに以下のように記載されている通り、VS Codeでデフォルトで使われるTypeScriptは、自分でインストールしたTypeScriptではない。

It is important to keep in mind that VS Code's TypeScript language service is separate from your installed TypeScript compiler.

code.visualstudio.com

現在VS Codeが参照しているTypeScriptを確認する方法

これも、確認する方法が公式ドキュメントに記載されているが、任意のTypeScriptファイルをVS Codeで開くと、バージョンとTypeScriptのパスが画面右下に表示される。

f:id:kamatimaru:20210104102844p:plain

デフォルトで使われているTypeScriptの存在を確認する。

上記で確認したところ、VS Codeに内蔵されているv3.8.3のTypeScriptが使用されているようである。

そもそも、VS CodeにTypeScriptが内蔵されているということを知らなかったので、このTypeScriptが実際に存在するのか確認してみる。

$ cd /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/extensions/
$ npm ls typescript
/Applications/Visual Studio Code.app/Contents/Resources/app/extensions
└── typescript@3.8.3 extraneous

→ 確かにVS Codeに内蔵されているTypeScriptが存在しており、バージョンも3.8.3であることが確認できた。

VS Codeで使用するTypeScriptを変更する。

プロジェクトでnpmでローカルインストールしたv4.1.3のTypeScriptを使用するように変更したいので、公式ドキュメントに従い以下のようにsettings.jsonに設定する。

{
  "typescript.tsdk": "./node_modules/typescript/lib"
}

code.visualstudio.com

※ 「Settings」画面で「typescript.tsdk」と検索すると、以下の画面が表示されるので、「Edit in settings.json」のリンクを押すと編集できる。

f:id:kamatimaru:20210104104846p:plain

変更されたことを確認する。

VS Codeを再起動した後に、再度、任意のTypeScriptのファイルを開いて、バージョンが変更されていることを確認する。

f:id:kamatimaru:20210104105235p:plain

以上

参考にさせていただいた記事など

公式ドキュメント以外に以下を参考にさせて頂いた。

typescript-jp.gitbook.io
github.com