使用“react-jsx"的 Visual Studio Code 问题作为 jsx 值与 create-react-app [英] Problem with Visual Studio Code using "react-jsx" as jsx value with create-react-app

问题描述

我正在努力解决错误"问题在 VSCode 中:

I'm struggling with following "error" in VSCode :

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

因此，当 react 值时，react-scripts (create-react-app) 会自动将 jsx 键设置为 react-jsx 值似乎工作.

Hence, react-scripts (create-react-app) automatically sets the jsx key to react-jsx value, when react value seems to work.

实际上，代码运行良好并显示了我想要的页面，但 IDE 将所有内容都强调为错误，并说:

Actually, the code works perfectly and displays the page I want, but the IDE is underlining kinda everything as errors, saying :

Cannot use JSX unless the '--jsx' flag is provided.

这是我的 tsconfig.json :

Here is my 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 提供 + 更新包):

, and my package.json (default one provided by create-react-app + packages updated) :

{
  "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 ！)，但似乎没有任何问题可以解决.

I'm using the latest version of Typescript, and I updated all my packages with ncu, closed/opened VSCode (works sometimes with tsconfig !) and nothing seems to resolve that.

我很确定这是 VSCode 的问题，但我想不出如何解决这个问题.

I'm pretty sure it's a VSCode problem, but I'm running out of ideas about how to resolve that.

你们有什么想法吗?

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

If you followed the above steps and VSCode still shows the "-jsx" error, make sure you have disabled the 'TypeScript God' extension (and any other TS extension until the issue no longer appears).

推荐答案

这是因为 VSCode 的 Typescript 版本没有使用 create-react-app 默认使用的最新 babel 功能.

This is because VSCode's Typescript version is not using the newest babel features that create-react-app uses by default.

您可以将VS Code更改为改用工作区的 Typescript 版本，这将解决此问题.

You can change VS Code to use the workspace's version of Typescript instead, which will fix this issue.

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

Open a TypeScript or JavaScript file and click on the TypeScript version number in the Status Bar. A message box will appear asking you which version of TypeScript VS Code should use

选择使用工作区版本"；使用较新的 Create React App 打字稿版本.

Select "Use Workspace Version" to use the newer Create React App typescript version.

这篇关于使用“react-jsx"的 Visual Studio Code 问题作为 jsx 值与 create-react-app的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！