Question

我正在尝试在VisualStudio代码

下运行基本的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。

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

1 个答案: