使用create-react-app时，将jsx值设置为"react-jsx"的Visual Studio Code出现问题

Question

我在VSCode中遇到以下"错误"：

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

因此，react-scripts（create-react-app）在react值似乎可行时，自动将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-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扩展）。

- Denis Lebon

Answer 1

这是因为VSCode的TypeScript版本没有使用最新的babel功能，而create-react-app默认使用了它。您可以更改VS Code使用工作区版本的TypeScript，这将解决此问题。

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

选择“使用工作区版本”以使用更新的Create React App TypeScript版本。

- marksfrancis

---

似乎是我使用的扩展程序（TypeScript God）与其他因素混合导致的问题，可能是扩展程序版本不够新。无论如何，这解决了我的问题，谢谢！ - Denis Lebon

如果项目被拆分为多个子文件夹，我该如何更改工作区版本？VSCode似乎无法在子目录中找到node_modules，或者至少我没有看到其他可用的版本。 - Narigo

@Narigo 我已经全局安装了我想要的版本 (npm i -g typescript@4.1.2)，然后将以下这行代码添加到 vscode 的设置 json 文件中 "typescript.tsdk": "/home/yourusername/.nvm/versions/node/v10.15.1/lib/node_modules/typescript/lib" 请将 /home/yourusername/.nvm/versions/node/v10.15.1/lib/node_modules 替换成你全局 npm node_modules 文件夹的路径（可以用 npm root -g 命令查找）。 - S..

我的VSCode使用的是比项目中要高的版本，但仍然存在问题。 - SalahAdDin

对我来说，我需要将settings.json中的设置更改为使用本地的typescript版本："typescript.tsdk": "./node_modules/typescript/lib"。 - undefined

Answer 2

在PhpStorm中（WebStorm可能也是如此），我通过在Remote JSON Schemas中勾选“始终下载最新版本的模式”来避免了关于“react-jsx”值的警告。

- Attila Szeremi

---

我认为这个问题涉及到 vscode.... - Devorein

确实，因为我自己在搜索 PhpStorm 时发现了这个问题，所以我认为这可能也能帮到其他人。此外，这可能有助于作为关于 vscode 的线索，表明问题可能与 JSON 模式失效有关。 - Attila Szeremi

这对我很有帮助，因为我正在使用WebStorm。谢谢！ - jonraem

Answer 3

如其他人所述，这是使用 create-react-app(CRA) 脚本时出现的一个开放问题。然而，上述提到的解决方案均未适用于我。唯一适用于我的解决方案是在项目根目录下的.env 文件中添加以下配置。

DISABLE_NEW_JSX_TRANSFORM=true

- Vijin Paulraj

Answer 4

我知道这对大多数人来说可能很明显，但是我总是忘记在React中使用.tsx文件扩展名，然后我会苦思冥想为什么JSX代码会抛出错误。

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

- Gass

Answer 5

对于使用VS 2019的用户，我需要从这里安装Visual Studio的TypeScript 4.1版本：

https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.TypeScript-41

然后，在编译选项中使用新的jsx设置即可。

- Ilias.P

Answer 6

对于任何需要帮助的人，我只是重新启动了VS Code。 来源：https://exerror.com/cannot-use-jsx-unless-the-jsx-flag-is-provided/

- engr.waqas

Answer 7

安装JavaScript和TypeScript每夜版扩展程序，并在VSC中重新选择TS版本（当打开.tsx文件时，单击TS版本（右下角），然后“选择TypeScript版本”->“使用VS Code的版本”）也可以起作用。

（来源：https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-typescript-nightly-builds）

- KalikDev

Answer 8

如果你使用的是VS Code，而marksfrancis的回答对你没起作用。也许你应该检查一下你的TypeScript扩展，就像我的情况一样，扩展“TypeScript God”是导致我仍然遇到这个问题的原因。

- Patricio Bedregal

Answer 9

我成功解决了这个问题，通过卸载了。

ES7+ React/Redux/React-Native snippets extension

- Luillyfe

Answer 10

如果您尝试通过在VSCode编辑器中选择“使用工作区版本”来更新TypeScript版本，但仍然显示错误，请尝试将您的.tsconfig文件中的"jsx"字段的值更新为"preserve"。

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

import React from 'react';

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

• 如果您使用值"react-jsx"，则必须在新的React 17转换中编写React：

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

关于.tsconfig文件的参考（参见TypeScript文档）：此处

有关新的JSX转换（参见React文档）：此处

- Andres Alcocer