Typescript Visual Studio代码使用“0”时出现问题；“反应jsx”；使用CreateReact应用程序作为jsx值

我在VSCode中遇到以下“错误”：

Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'

因此，当

react

值似乎起作用时，react脚本（create react app）会自动将

jsx

键设置为

react jsx

值

事实上，代码工作得很好，显示了我想要的页面，但是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"
  ]
}

，以及my package.json（由create react app+packages updated提供的默认值）：

我使用的是最新版本的Typescript，我用

ncu

、关闭/打开的VSCode（有时与tsconfig一起工作！）更新了我的所有软件包，但似乎没有任何解决方法

我很确定这是一个VSCode问题，但是我已经没有办法解决这个问题了

你们有什么想法吗

编辑：

---

如果您按照上述步骤操作，而VSCode仍然显示“-jsx”错误，请确保您已禁用“TypeScript God”扩展（以及任何其他TS扩展，直到问题不再出现为止）。

这是因为VSCode的TypeScript版本未使用创建react应用程序默认使用的最新babel功能

您可以，这将解决此问题

打开一个TypeScript或JavaScript文件，然后单击状态栏中的TypeScript版本号。将出现一个消息框，询问您应该使用哪个版本的TypeScript VS代码

---

选择“使用工作区版本”以使用较新的Create React应用程序typescript版本。

对于使用VS 2019的版本，我必须从此处安装适用于visual studio的typescript 4.1：

然后通过在编译器选项中使用新的jsx设置，它工作得很好。

在PhpStorm中（对于WebStorm可能也是如此），我通过在远程JSON模式中勾选“始终下载最新版本的模式”，使它不会抱怨“react jsx”作为值

---

如果您使用的是VS代码和marksfrancis，则回答不适合您。也许你应该检查一下你的扩展是否有TypeScript，在我的例子中，扩展“TypeScript God”是我仍然有这个问题的原因。

在VSC中安装并重新选择TS版本（打开.tsx时，单击TS版本（右下），然后“选择TypeScript版本”->“使用VS代码的版本”）也可以

---

（src:）

如果您试图通过在vscode编辑器中选择“使用工作区版本”来更新typescript版本，但仍然显示错误，请尝试将.tsconfig文件中的

“jsx”

字段的值更新为

“preserve”

• 这将使您能够以旧的方式编写JSX

.tsconfig文件参考（根据typescript文档）：

---

新的JSX转换（根据react文档）：

正如其他人提到的，这是创建react应用程序（CRA）脚本的一个公开问题。然而，上面提到的所有解决方案对我都不起作用。唯一适合我的解决方案是在

.env

文件（在项目根目录中）中添加以下配置

替换

 "jsx": "react-jsx"

到

---

干杯

这为我解决了这个问题。似乎这是我使用的扩展（typescriptgod）和它之间的混合，可能不是最新的。不管怎样，它解决了我的问题，谢谢！自上次保存以来的天数**:0如果项目拆分为多个子文件夹，如何更改工作区版本？VSCode似乎没有在子目录中拾取

节点模块

，或者至少我没有看到其他可用版本。我认为问题是关于VSCode的……没错，因为我自己在搜索PhpStorm时发现了这个问题，我想这可能也能帮助其他人。此外，这可能有助于提供有关vscode的线索，即该问题可能与JSON模式的过时有关。这确实对我使用WebStorm有所帮助。谢谢大家!@AttilaSzeremi帮了大忙，谢谢你的发帖！

import React from 'react';

function App() {
  return <h1>Hello World</h1>;
} 

import { jsx as _jsx } from "react/jsx-runtime";
export const helloWorld = () => _jsx("h1", { children: "Hello world" }, void 0);

DISABLE_NEW_JSX_TRANSFORM=true

 "jsx": "react-jsx"

"jsx": "react"