Visual Studio代碼中的React.Fragment錯誤

Question

即使工作正常，Visual Studio Code仍會顯示錯誤，如下面的屏幕截圖所示。 AFAIK，我的ESLint似乎對React.Fragment 。 它顯示我的任何<React.Fragment>或<Fragment>錯誤。

如何禁用或修復此問題？

這是一個電子反應項目，帶有打字稿。 我開始與這個項目

electron-forge init my-new-project --template=react-typescript

然后我將react ， @types/react ， @types/react-dom和react-dom軟件包更新為最新版本，因為我需要<Fragment>組件。 片段是React 16.xx引入的新功能

這是我當前的package.json：

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.7.2",
    "@types/prop-types": "^15.7.1",
    "@types/react": "^16.8.17",
    "@types/react-dom": "^16.8.4",
    "electron-compile": "^6.4.4",
    "electron-devtools-installer": "^2.2.4",
    "electron-squirrel-startup": "^1.0.0",
    "electron-stylus": "^0.1.1",
    "ionicons": "^4.5.5",
    "moment": "^2.24.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-hot-loader": "^3.1.3",
    "tslib": "^1.9.3"
  },
  "devDependencies": {
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "electron": "^5.0.1",
    "electron-forge": "^5.2.4",
    "electron-prebuilt-compile": "4.0.0",
    "tslint": "^5.16.0",
    "typescript": "^2.2.2"
  }

我在64位Debian計算機上使用VSCode 1.33.1，ESLint 1.8.2

錯誤代碼：

JSX element type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null' is not a constructor function for JSX elements.
  Type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>' is not assignable to type 'Element'.
    Types of property 'type' are incompatible.
      Type 'string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)' is not assignable to type 'string | ComponentClass<any> | StatelessComponent<any>'.
        Type '(props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null' is not assignable to type 'string | ComponentClass<any> | StatelessComponent<any>'.
          Type '(props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null' is not assignable to type 'StatelessComponent<any>'.
            Type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null' is not assignable to type 'ReactElement<any>'.
              Type 'null' is not assignable to type 'ReactElement<any>'.ts(2605)

附加說明：使用以下命令將Fragment作為單獨的變量導入時：

import * as React from "react";
import { Fragment } from 'react' 

然后嘗試調用<Fragment>組件，它仍然拋出相同的錯誤

Answer 1

我也在電子應用程序中使用React。 通過在后台設置Babel和Webpack進行編譯。

我寫了一篇有關當前正在使用的堆棧以及如何解決語法突出顯示問題的文章。

請注意，就像我認為您提到的那樣，我的應用程序實際上是在Webpack / Babel中正確編譯的。 只是Visual Studio Code產生了問題。

簡而言之，將VSC中的語言從Javascript更改為Typescript突出顯示。

這是我的帖子： https : //medium.com/@callback.insanity/using-react-fragments-in-visual-studio-code-2019-d19af4469788