Visual Studio Codeでcreate-react-appのjsx値として "react-jsx "を使用した場合の問題点
質問
VSCodeの以下のエラーに悩んでいます。
Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'
したがって、react-scripts (create-react-app) では、自動的に
jsx
のキーを
react-jsx
の値に変換する必要があります。
react
の値は動作するようです。
実際、コードは完全に動作し、私が望むページを表示しますが、IDEはエラーとしてあらゆるものに下線を引き、こう言っています。
Cannot use JSX unless the '--jsx' flag is provided.
以下は私のtsconfig.jsonです。
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
と、私のpackage.json(create-react-appで提供されるデフォルトのもの+パッケージが更新されたもの) :
{
"name": "front-office",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.2.2",
"@types/jest": "^26.0.15",
"@types/node": "^14.14.9",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"bootstrap": "^4.5.3",
"react": "^17.0.1",
"react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
最新版のTypescriptを使用しており、すべてのパッケージを更新した上で
ncu
ですべてのパッケージを更新し、VSCodeを閉じたり開いたりしましたが(tsconfigで時々動作します!)、何も解決していないようです。
VSCode の問題であることは間違いないのですが、それを解決する方法についてアイデアが尽きています。
誰かアイデアはありませんか?
編集する
上記の手順で、VSCodeがまだ"を表示している場合。 -jsx というエラーが表示される場合は、「TypeScript God」エクステンション(および問題が発生しなくなるまでその他のTSエクステンション)を無効にしていることを確認してください。
どのように解決するのですか?
VSCodeのTypescript版では、create-react-appがデフォルトで使用している最新のbabel機能を使用していないためです。
あなたは ワークスペースのバージョンのTypescriptを使用するようにVS Codeを変更することができます。 で、この問題を解決できます。
TypeScript または JavaScript ファイルを開き、ステータスバーの TypeScript のバージョン番号をクリックします。メッセージボックスが表示され、VS Codeが使用するTypeScriptのバージョンを尋ねられます。
Use Workspace Version"を選択すると、より新しいCreate React AppのTypeScriptバージョンが使用されます。
関連
-
[解決済み] Visual Studio Codeでの縦書きルーラー
-
[解決済み] Visual Studio Code for Windowsでコードのセクションを折りたたむにはどうしたらいいですか?
-
[解決済み] Visual Studio Codeで行や選択範囲を複製するにはどうすればよいですか?
-
[解決済み] Visual Studio Code(VSCode)でコードをフォーマットするにはどうすればよいですか?
-
[解決済み] Visual Studio Codeで、最後のカーソル位置まで戻るにはどうすればよいですか?
-
[解決済み] Visual Studio Codeでエディタと統合ターミナル間のフォーカスを切り替える
-
[解決済み] Visual Studio Codeでファイルを検索するにはどうすればよいですか?
-
[解決済み】Visual Studio Codeでの複数行編集について
-
[解決済み】Visual Studio Codeの「ワークスペース」とは何ですか?
-
[解決済み] TypeScriptでEnumを比較する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] TypeScriptで Object.keys return string[].
-
[解決済み] ts ES5/ES3の非同期関数やメソッドには、「Promise」コンストラクタが必要です。
-
[解決済み] tsconfig.jsonのtargetは何のためにあるのですか?
-
[解決済み] Visual Studio Code - インポート引用符の設定を調整する
-
[解決済み] ngForとAsync Pipe Angular 2でObservableオブジェクトから配列を利用する。
-
[解決済み] 他のプロパティを使用できる TypeScript インターフェース
-
[解決済み] Typescript でエラーをスローする関数を宣言する方法
-
[解決済み] Enumのインポート方法
-
[解決済み] TypeScriptでクラスを角括弧「<>」で囲むとはどういう意味ですか?
-
[解決済み] Typescriptにおける引用符の使用基準は何ですか?