VisualStudio的代碼標誌錯誤的HTML標籤

Question

我試圖運行基本在VisualStudio的代碼

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')); 

陣營HelloWorld應用程序當我運行它的命令行一切工作正常，但我不明白的VisualStudio代碼標記在線錯誤：（保存後）

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。