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

Question

所以发生的事情是假设我的结构如下：

编辑：在稍微乱七八糟之后，我注意到我是否只输入了这行并不重要。如果我将光标放在一行的末尾并按回车键，它会自动制表。

(
 <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",
    },
}

Answer 1

这里的这一行是造成它的原因：

"editor.formatOnType": true

这需要设置为false。

"editor.formatOnType": false

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

After typing a line of code in VScode and hitting enter that line of code tabs over in React

reactjs

visual-studio-code

vscode-settings