前書き
create-react-appでApp.tsxファイルを開くと'--jsx' フラグが指定されていないと、JSX を使用できません。というエラーが出たため、VSCodeで利用しているTypeScriptをバージョンする必要があった。
せっかくなのでグローバルなTypeScriptのバージョンもアップグレードし、グローバルと同じバージョンをVSCodeで利用することにした。
TypeScriptをバージョン指定インストールする
リリースされているTypeScriptのバージョンをnpmのTypeScriptページから確認し、以下のコマンドを実行する。
$ npm i -g typescript@{利用したいバージョン}
例えば4.1.3が利用したい場合は以下のように実行する。
$ npm i -g typescript@4.1.3
VSCodeで利用するTypeScriptのバージョンを設定する
- VSCodeを開いて左下の歯車マークをクリック
- [設定]をクリック
- 検索欄に「typescript tsdk」と入力
- 「Typescript: Tsdk」という項目の「setting.jsonで編集」をクリック
- setting.jsonが開くので「"typescript.tsdk":」の項目を以下のように編集
"typescript.tsdk": "{グローバルなnpmのpath}/typescript/lib"
例えばグローバルなnpmのpathが/usr/local/lib/node_modulesの場合、以下のように記述する。
"typescript.tsdk": "/usr/local/lib/node_modules/typescript/lib"
グローバルなnpmのpathを確認する
以下のコマンドを実行する。
npm root -g
例えばmacの場合は以下のように出力される。
/usr/local/lib/node_modules
VSCodeで利用するTypeScriptのバージョンを変更する
- VSCodeで適当なTypeScriptファイルを開く
- 右下に表示されるTypeScriptのバージョンをクリック
- 「TypeScriptのバージョンを選択...」をクリック
- 「VS Codeのバージョンを使用」に表示されているバージョンが利用したいバージョンであることを確認してクリック
- 右下に表示されるTypeScriptのバージョンが変更さたことを確認して完了
参考
・Reactアプリ作成時にエラー"'--jsx' フラグが指定されていないと、JSX を使用できません。"が発生する場合の対処