VisualStudio Code 在 React 代码中标记错误以关闭 html 标记

Question

我正在尝试在 VisualStudio Code 下运行基本的 React helloworld 应用程序

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './index.css';

ReactDOM.render( < App / > , document.getElementById('root'));
registerServiceWorker();

var element = < h1 > abcd < /h1>;

ReactDOM.render(element, document.getElementById('root'));

当我在命令行中运行它时，一切正常，但我想知道为什么 VisualStudio Code 在行标记错误：（保存后）

var element = < h1 > abcd < /h1>;

并且声称，打开的标签应该被关闭。

这是我的配置（因为我认为这是 IDE 特定问题）

{
    "workbench.colorTheme": "Visual Studio Dark",
    "workbench.iconTheme": "vscode-icons",
    "terminal.integrated.shell.windows": "C:\\windows\\Sysnative\\WindowsPowerShell\\v1.0\\powershell.exe",
    "emmet.syntaxProfiles": { "javascript": "jsx" }
}

当我用谷歌搜索解决方案时，所有答案都只是说只添加结束 html 标记。

Answer 1

很简单，您添加了不必要的空白：

var element = < h1 > abcd < /h1>; // BAD
var element = <h1>abcd</h1>; // GOOD :)

我强烈建议保留它作为避免添加这些额外空格的好习惯，这会使您的编辑器难以将其解析为实际的HTML/JSX。我也在使用 VSCode，如果我在你的示例中使用空格，它甚至无法将其识别为正确的 JSX。