Visual Studio 代码使用“ response-jsx”作为具有 create-response-app 的 jsx 值时出现的问题

我纠结于 VSCode 中的以下“错误”:

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

因此，当 react值似乎可以工作时，response-script (create-response-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"
]
}

以及我的 package.json (由 create-response-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"
]
}
}

我使用的是最新版本的 Type 脚本，并且我用 ncu更新了所有的包，关闭/打开 VSCode (有时可以使用 tsconfig!)似乎没有什么能解决这个问题。

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

你们有主意吗？

编辑:

如果您按照上述步骤操作，并且 VSCode 仍然显示“ JSX”错误，请确保您已经禁用了“ TypeScript God”扩展(以及任何其他 TS 扩展，直到问题不再出现)。

37520 次浏览
小开
最佳答案

这是因为 VSCode 的 Type 脚本版本没有使用 create-response-app 默认使用的最新的 babel 特性。

您可以使用 更改 VS 代码以使用工作区版本的 Type 脚本代替，它将解决这个问题。

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

选择“使用工作区版本”以使用较新的创建应用程序类型脚本版本。

小开

对于那些使用 VS 2019的人，我不得不从这里为 Visual Studio 安装4.1打字脚本: Https://marketplace.visualstudio.com/items?itemname=typescriptteam

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

小开

在 PhpStorm 中(WebStorm 可能也是如此) ，我通过在 Remote JSON Schemas 中点击“总是下载模式的最新版本”，得到了不抱怨“ response-jsx”作为值的结果。

The option that needs to be ticked

小开

如果你使用的是 VS 代码，那么 marksfrancis 的回答对你来说不起作用。也许你应该检查一下你的 TypeScript 扩展，在我的例子中，‘ TypeScript 上帝’扩展是我仍然有这个问题的原因。

小开

在 VSC 中安装 JavaScript 和 TypeScript 夜间扩展并重新选择 TS 版本(当。打开 tsx，单击 TS 版本(右下) ，然后“选择 TypeScript 版本”-> “使用 VS 代码版本”)也可以工作。

(src: https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-typescript-nightly-builds)

小开

如果您尝试通过在 vscode 编辑器中选择“ Use Workspace Version”来更新类型脚本版本，但它仍然显示错误，请尝试更新您的。Tsconfig 文件到 "preserve"。

  • 这将使您能够以旧的方式编写 JSX。
import React from 'react';


function App() {
return <h1>Hello World</h1>;
}
  • 如果你使用 "react-jsx"值，你必须在新的 React 17变换中写下:
import { jsx as _jsx } from "react/jsx-runtime";
export const helloWorld = () => _jsx("h1", { children: "Hello world" }, void 0);

. tsconfig 文件引用(每个类型脚本文档) : 给你

新的 JSX 变换(每个反应文档) : 给你

小开

正如其他人所提到的，这是 create-response-app (CRA)脚本的一个公开问题。然而，上面提到的解决方案都不适合我。对我来说唯一有效的解决方案是在 .env文件中(在项目根目录中)添加以下配置。

DISABLE_NEW_JSX_TRANSFORM=true
小开

我把 Visual Studio 的代码改成了一个新版本，这就解决了我这边的问题。

小开

我知道这对大多数人来说是显而易见的，但是我总是忘记在 React 中使用 .tsx文件扩展名，然后我就开始思考为什么 JSX 代码会抛出一个错误。

因此，请确保您使用的是 .tsx扩展，而不是 .ts！

小开

对于任何可能有帮助的人，我只是重新启动 VS 代码。 图片来源: ref = “ https://exrror.com/cannot-use-jsx-until-the-jsx-Flag-is-provision/”rel = “ nofollow norefrer”> https://exerror.com/cannot-use-jsx-unless-the-jsx-flag-is-provided/


提交答案