在VScode中键入一行代码并点击后在React中输入该行代码选项卡

Question

所以发生的事情就是说我有一个像这样的结构：

编辑：经过多一点麻烦后我注意到，如果我只是键入线路并不重要。如果我将光标放在一行的末尾并按Enter键，它会自动标记它。

(
 <div>
  <h2>Hello</h2>
 <div>
)

我开始打字：

(
 <div>
  <h2>Hello</h2>
  <p>hello</p>(cursor here at the end)
 <div>
)

一旦我按下键盘上的Enter进入下一行，就会发生这种情况：

(
 <div>
  <h2>Hello</h2>
    <p>hello</p>
  (cursor here)
 <div>
)

正如你所看到的那样，我刚输入的行被撞到了一个标签上，我不知道为什么会发生这种情况。任何线索？

这是我的User Settings

{
    "editor.formatOnSave": true,
    "prettier.singleQuote": true,
    "editor.formatOnType": true,
    "editor.detectIndentation": false,
    "prettier.eslintIntegration": true,
    "eslint.autoFixOnSave": true,
    "window.zoomLevel": 0,
    "workbench.iconTheme": "eq-material-theme-icons",
    "workbench.colorTheme": "Material Theme",
    "editor.fontSize": 15,
    "editor.lineHeight": 24,
    "materialTheme.cache.workbench.settings": {
        "themeColours": "Palenight",
        "accent": "Lime"
    },
    "workbench.colorCustomizations": {
        "activityBarBadge.background": "#7CB342",
        "list.activeSelectionForeground": "#7CB342",
        "list.inactiveSelectionForeground": "#7CB342",
        "list.highlightForeground": "#7CB342",
        "scrollbarSlider.activeBackground": "#7CB34250",
        "editorSuggestWidget.highlightForeground": "#7CB342",
        "textLink.foreground": "#7CB342",
        "progressBar.background": "#7CB342",
        "pickerGroup.foreground": "#7CB342",
        "tab.activeBorder": "#7CB342"
    },
    "emmet.triggerExpansionOnTab": true,
    "emmet.showSuggestionsAsSnippets": true,
    "editor.snippetSuggestions": "top",
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
    },
}