使用"react-jsx"的Visual Studio Code出现问题.作为带有create-react-app的jsx值 [英] 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的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代码更改为改用工作区的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出现问题.作为带有create-react-app的jsx值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！