※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたらContactからお知らせください。

【TypeScript】CreateScriptAppのJSX部分がVSCodeでエラーとして認識される問題

react create-react-app VSCode TypeScript 開発環境

投稿日：2021年1月2日

はじめに

この記事の問題は以下の環境について書かれています。

まず発生した問題についてですがCreateReactAppで--template typescriptでアプリケーションを作成した際にデフォルトのコードがVSCodeでエラーとして認識されてしまいました。

▲表示されるエラー

エラー内容を見ると

『'--jsx' フラグが指定されていないと、JSX を使用できません。ts(17004)』

との事。

次の様にjsxを設定し直せばエラーは消えるのですが、npm startやnpm buildでトランスパイルする度にこの設定は上書きされてしまう模様．．．。

tsconfig.json

{
    "compilerOptions": {
        "jsx": "react"
    }
}

問題の原因はVSCodeの参照するTypeScriptのバージョンが正しくない事にあるようです。

VSCodeがコードのインテリセンスに使用している言語のバージョンはエディタの右下を見ることで知ることができます。

▲正しくは4.1.3なのに4.0.3になっている

まずはVSCodeがTypeScriptのlibがインストールされた場所を正しく理解できるように指定してあげる必要があります。

そのための設定ファイルを作成します。

設定はVSCodeの今開いているディレクトリのルートに.vscodeというディレクトリを作成し、その中のsettings.jsonに記述します。

.vscode/settings.json

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

typescriptのlibの場所は基本的にプロジェクトのnode_modules/typescript/libです。

例えば今回の場合QandAというディレクトリでnpx create-react-app --template typescript frontendというコマンドを実行したため上記のような設定になりました。

正しいバージョンに修正しましょう。

これで次の様に更新されていればOKです。

▲バージョンが更新されている

記事へのコメント