概要
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 Codeの
settings.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.
現在VS Codeが参照しているTypeScriptを確認する方法
これも、確認する方法が公式ドキュメントに記載されているが、任意のTypeScriptファイルをVS Codeで開くと、バージョンとTypeScriptのパスが画面右下に表示される。
デフォルトで使われている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であることが確認できた。