CODEWITHSUNDEEP
reactjsvisual-studio-code
Taylor Austin
Taylor Austin

Reputation: 6027

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

So what is happening is lets say I have a structure like:

EDIT: after a little bit more messing around I notice that it doesn't matter if I just typed the line or not. If I put my cursor at the end of a line and hit enter, it automatically tabs it.

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

And I start typing something like:

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

Once I hit enter on the keyboard to go the the next line this is what happens:

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

As you can see the line that I just typed got bumped over a tab and I have no clue why this is happening. Any clue?

Here are my 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",
    },
}

Upvotes: 1

Views: 1030

Answers (1)

Taylor Austin
Taylor Austin

Reputation: 6027

This line here is what was causing it:

"editor.formatOnType": true

This needs to be set to false.

"editor.formatOnType": false

Upvotes: 2

Related Questions