Vscode: Paste indents twice with HTML formatting

[laltin]

• VSCode Version: Code 1.15.0 (8b95971d8cccd3afd86b35d4a0e098c189294ff2, 2017-08-09T20:16:06.988Z)
• OS Version: Windows_NT ia32 10.0.15063
• Extensions:

Extension|Author (truncated)|Version
---|---|---
vscode-css-formatter|aes|0.0.2
vscode-intelephense-client|bme|0.7.2
githistory|don|0.2.3
python|don|0.7.0

---

Steps to Reproduce:

1. Create an empty HTML tag. Example <div></div>
2. Go inside the tag and press enter. Assuming that you have 2 spaces indentation you get:
   <div> | </div>
3. Paste another HTML tag copied and you get pasted code indented twice.
   <div> <span>This tag should be indented once but gets two.</span> </div>

Reproduces without extensions: Yes

There are also another issue with indentation that looks similar:

• https://github.com/Microsoft/vscode/issues/31255

[PVermeer]

Another example:
Line select Copy: (with full indentation)

              <div id="tmdb4">
                  <script>
                      getmovie(
                      'The Dark Knight', // Title
                      "2008", // Year
                      "4",) // Number
                  </script>
              </div>

Line select Paste:

              <div id="tmdb4">
                      <script>
                          getmovie(
                          'The Dark Knight', // Title
                          "2008", // Year
                          "4",) // Number
                      </script>
                  </div>

Notice the double indentation of the second line. This happens every time at a copy paste.

[benbesuijen]

I have still this issue (twice indentions on paste) in VSCode version 1.21.1 running on Windows 10.

Also with the setting "editor.formatOnPaste": false the editor is still reformatting indentions.
For now I use the setting "editor.autoIndent": false and indent mannualy.

[jacobohidalgo]

I have this issue too in version 1.21.1 in MacOS High Sierra. When I paste in HTML files the content is double idented.

[titusdecali]

Same here. Super annoying.

[PerMoeller]

I have this issue too. Version 1.26.1 on Mac OS High Sierra.

[mholt]

This is making VSCode basically unusable for me. Please consider it a priority to fix.

[tommai78101]

@mholt It is a priority, but no one has found a way to fix it yet. Otherwise, PRs would be flying around.

[Lovecircle]

+1 . Please fix it.

[AndersenTobias]

Please fix this!

[gruberr]

Version: 1.31.0 (system setup) here, still a problem. This is pathetic.

[wonsuc]

This is really really really annoying. vscode is a greate tool, but this bug gives me really bad user experience to me.

[kmanley]

This is my only real complaint with VSCode....I hope it can be fixed soon

[AndrewUldin]

bump

[Galzor]

looking very seriously for this issue. i am surprised why this issue has not resolved any solution even after all this time. this is very experience breaking for me too. hope someone figures this out.

[danhalliday]

This makes VS Code unusable for HTML editing. The formatOnPaste option doesn't work, as it seems to add breaks to long lines of text and adds other artefacts, which is just introduces different set of issues.

[peter-gazdik-bt]

Just wanted to add more info about how to reproduce it, and also say that pressing undo (CTRL+Z) fixes the formatting.

When pasting a block, the indentation breaks on the first line that should be indented more than the previous line.

Example:

<div>
    Text1 <br/>
    Text2 <br/>
    <span>
        Text3
    </span>
</div>

Copy and paste the "Text 1" line, result is:

<div>
        Text1 <br/>
        Text2 <br/>
    <span>
        Text3
    </span>
</div>

Copy and paste the "Text 2" line, result is same as original.

Copy and paste the 3 "span" lines, result is:

<div>
    Text1 <br/>
    Text2 <br/>
    <span>
            Text3
        </span>
</div>

In all cases where it's broken, pressing CTRL+Z fixes the indentation. This probably means the paste happens in two steps, first it's done correctly, then extra indentation is added which breaks it.

Hopefully this helps with finding the cause of the issue and fixing it, as well as helps someone experiencing the issue to at least easily fix the formatting.

[nathanpeck]

I can reproduce this. It is making VS Code extremely hard to work with for HTML editing.

[garretwilson]

Yes, I love VS Code, but it has a lot of indentation bugs that are really dangerous as far as corrupting content.

See also the bugs I filed #67200 and #61510, the latter of which changes the indentation of an _existing_ line! 😮

[repsher]

Love VS Code but this is uber annoying when working in HTML and pretty basic feature.

[dancaron]

This is maddening.

[michael-mckenna]

@peter-gazdik-bt Thanks. Never thought of using the undo shortcut! This is a good temp solution.

[stljeff1]

please fix. These indentation bugs when pasting make the program basically useless for me, despite everything else about VS Code, as I have limited dexterity. This bug may be a minor inconvenience to most is an incredible distraction for me.

[hellsinginst]

This really is making it unusable. Taking time to correct formatting just means less development time, I'll use a different toolset until it's fixed.

[buttergrits]

Uber annoying, but until it is fixed, the Undo workaround mentioned earlier by @peter-gazdik-bt preserves some sanity (Ctrl-Z right after pasting)

[phuein]

Paste and indent still not working as expected. No extension solves this entirely. No modification of the settings solves this. How is this not #1 on the priority for vscode? A fundamental text editing requirement.

Hilariously frustrating examples ensue: https://www.reddit.com/r/vscode/comments/b4kj07/indent_hell/

[prinkpan]

690 days since this was reported, any update on the fix? I am tired of shift+tab(ing) and ctrl+z(ing) every time I paste anything.

[eliot-akira]

The bug seems to be in the class AutoIndentOnPaste, method trigger, which contains logic on whether/how to indent a pasted block of text.

Currently it's here: https://github.com/microsoft/vscode/blob/master/src/vs/editor/contrib/indentation/indentation.ts#L422

Since the issue is apparently specific to HTML, it looks like this line here is related:

let indentOfSecondLine = LanguageConfigurationRegistry.getGoodIndentForLine(virtualModel, model.getLanguageIdentifier().id, startLineNumber + 1, indentConverter);

I suspect that the method getGoodIndentForLine for HTML either contains imperfect rules, or the bug arises from the interaction between language-specific indent rules and the auto-indent logic. In any case, we're not getting "good indent for line". That method is defined currently in: https://github.com/microsoft/vscode/blob/master/src/vs/editor/common/modes/languageConfigurationRegistry.ts#L484

The HTML indentation rules are defined currently here: https://github.com/microsoft/vscode/blob/master/extensions/html-language-features/client/src/htmlMain.ts#L113

---

I know nothing about VS Code internals, so I'm hoping someone more knowledgeable can dig deeper and save us all from the constant annoyance of wrongly indented HTML!

[AleksandrHovhannisyan]

Is it just me, or was the issue fixed with the recent VS Code update? I'm on 1.36.0 (released on July 3rd) and can't reproduce it, though I definitely did have the problem for a long time before.

[tommai78101]

@AleksandrHovhannisyan Please make sure you disable all extensions, reset your configurations, and do it in a completely isolated environment to prevent anything that may lead to inconsistent reproduction of this issue.

I'm also hoping this issue is fixed, but I haven't seen any merge changes thus far that specifically targets this issue.

[Jebble]

Issue is definitely not fixed :)

[DevelopingLeon]

Still waiting for a fix...yawn

[nicholasvw]

This thread has been going on for years now. Is there ANY fix for this paste indentation issue? It's extremely annoying.

[AleksandrHovhannisyan]

@eliot-akira Seeing as how most people are able to undo the problem with ctrl+z, my best guess is that the bug lies somewhere in the trigger method that gets called on line 455. Notice that line 474 has this.editor.pushUndoStop();. , with another enclosing one on line 587. So I guess that narrows it down to "just" 112 lines... And any functions that get called in between. _Lol._ (Edit: It appears the line you mentioned does fall within that range; maybe you're onto something!)

It's just a little weird because the undo operation only reverts _part_ of the indentation operation and not the entire thing—the rest goes through. Maybe some of the functions called in trigger also set up their own undo stops and the last one is what we should be looking at? I don't really know 🤷‍♂

[eliot-akira]

@AleksandrHovhannisyan That's a good point how a _single_ undo fixes the indentation, so tracing back the undo stack (to the second to last operation, where the indent is correct) should help narrow down where the issue is coming from.

[shinebayar-g]

Vs Code: 1.36.1
Minimal example code to reproduce

Copy this:

body {
  background: #fafafa;
}

When I paste this:

body {
    background: #fafafa;
  }    <---- I get wrong indentation here

Known workarounds:

• If I set language mode to PLAIN TEXT then paste the sample code I get correct indentation.
• Or after copy paste, press CTRL+Z to get correct indentation.

Hope it helps someone and gets fixed soon!

[gothate]

This is the WOOOOOORRRRRRRRSSSSSSSSTTTTTTTTTT

[wottpal]

Editor in 2019: Work on remote servers, share live-sessions with others and audio-chat.
Also editor in 2019: Can't indent lines.

[hardensoft]

Click on "HTML" at the bottom right of the windows

Select "Configure 'HTLM' language based settings..."

Add the line :
"editor.formatOnPaste": false,

[tommai78101]

Hmmm, that looked like it's a nice fix, but it would also disable formatting the entire HTML when pasting even small snippets. Can anyone verify if this is a decent workaround?

[garretwilson]

As I reported in #67200, similar indenting issues still occur with "Format on Paste" turned off. And there are other formatting bugs such as #61510 that modify and erroneously format _already existing lines_.

It's an editor. This is part of its core functionality. Why can't someone simply fix it?

[AleksandrHovhannisyan]

I'd like to take a look at the bug and build VS Code locally so I can test any changes.

However, perhaps embarrassingly, I am unable to actually get the build to work (both on WSL and Windows itself). I am most likely doing something wrong.

Anyway, that's assuming I would be able to figure something out 🤷‍♂. I think it may be more efficient for one of the devs closer to the code base to investigate it. Understandably, they are probably tied up with working on new features and other high-priority fixes. This is basically a widespread annoyance/inconvenience.

For anyone interested, I think the points noted by @eliot-akira and myself may be a good place to start (since some people noted that the undo operation reverts the buggy indentation).

[jcc8HW]

VSCode is the best code editor. this is the only annoying bug it has

[tommai78101]

However, perhaps embarrassingly, I am unable to actually get the build to work (both on WSL and Windows itself). I am most likely doing something wrong.

@AleksandrHovhannisyan We should really focus on this first. Even I have trouble compiling the code.

[eliot-akira]

@AleksandrHovhannisyan I created a pull request #83386 with a possible fix in the auto-indent logic. It'd be great to have more eyes on it, to test and confirm.

As we discussed earlier, I believe I found the cause of the issue at the end of AutoIndentOnPaste.trigger in src/vs/editor/contrib/indentation/indentation.ts - specifically, where it loops and re-indents the second line and after of the pasted block. In the PR, I added a condition to prevent adding unnecessary indent if a pasted line had no indent to start with.

---

In setting up a dev build of VSCode, the tricky point was that Node.js 10.17.0 must be used. The contribution guide specifies >= 10.16.0, < 11.0.0. For switching Node versions, I use a tool called n. Also yarn is used throughout, not npm.

After Git clone and yarn to install dependencies, I ran yarn watch and ./scripts/code.sh in two different terminal windows. While making changes in the code base, it didn't seem to "hot reload", so Ctrl/Cmd+R to reload and see changes.

[brianmac]

I recently switched to VSCode from Atom, but this is a constant annoyance and it takes away from everything else that makes it great. It's quite unbelievable that a basic affordance like proper indentation has been neglected for so long in a text editor.

I have tried every solution I can find on the internet, and nothing gets things working as they should.

[AleksandrHovhannisyan]

@eliot-akira Wish I could take a look, but I've been swamped with other work. Best of luck in getting this fixed!

[eliot-akira]

@AleksandrHovhannisyan It's been tough, my original "solution" in the PR didn't completely solve it. That autoindent logic is complex and I don't fully understand it yet - I need to get more deeply familiar with every step. At least it seems to have got the attention of the core team/person, so there's hope on the horizon.

[gothate]

Your efforts are deeply appreciated, I've tried every possible add-on solution for this and nothing works. It can't be impossible because other editors seem to manage it without issue. Cruising my fingers, it's basically Code's only glaring annoyance.

[JamesIV4]

If this is really fixed by #83386, it would be a god-send. Please, Microsoft, expedite this pull request. This bug slows me down every day.

[nobreferreira]

It's just one of the most annoying and most time consuming bug ever!!!
Why it's not fixed yet?!

[stljeff1]

I just updated to 1.40.1. The initial issue seems to be fixed, although its a little hackish. When I paste a block of html, the end result is correct, but only after the Editor forces the block to be reversed-indented to get it in the "correct" position. In other words, I paste the block, the block initially has double the indentation, but quickly moves back one tab. If I do a ctrl + z after pasting, the block of html is two tabs over (And one more ctrl + z will completely undo the paste action.

This is an improvement, however, now when pasting a single line of HTML, the line is off one tab to the left (It starts out in correct position, but with the updated behavior, it moves to the left one tab).

Can my code just be pasted as is? no other behavior? if i need my pasted text to me indented or reverse-indented, let me do that, because this program is surely too dumb to do it.

[tommai78101]

@stljeff1 We welcome any PRs that can provide workarounds or directly fix the issue at hand.

[AleksandrHovhannisyan]

Still can't even get VS Code to build 😒 It fails towards the end of yarn watch. Oh well.

[lvegerano]

Tuesday April 14, 2020 @ 9:58 am VSCode version 1.44.0

THIS IS STILL AN ISSUE

[chihau]

I have the same issue programming with dart and flutter

Version: 1.44.2
Commit: ff915844119ce9485abfe8aa9076ec76b5300ddd
Date: 2020-04-16T17:07:18.473Z (1 wk ago)
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 18.7.0

[m1keil]

This is quite a nasty issue when dealing with indent sensitive modes like python or yaml and bite me more than once.

[shinebayar-g]

Yeah I work with lot of yamls and vscode is the worst editor at the moment to work with.

[tommai78101]

Just keep voting the first (top-most) post with a thumbs up. The higher the number it gets, the bot automation algorithm will sort the issue towards highest priority. Right now, with 47 votes, it's on the lower end of the spectrum, in comparison with a few issues with 300+ votes

[JirkaValtr]

I also have this issue when editing Matlab code. Please fix this.

[avicenna-developer]

It happens using vscode.typescript-language-feaures as default formatter.

[shepelevstas]

It bugged me for some years, but then two years ago I made an extension that does the same as ctrl+shift+v in Siblime Text. That was enough for me, and I forgot about this problem. This is surprising that the issue is still around. Try the extension "Dumb copy-paste". Maybe it can help at least partially.

[shinebayar-g]

It's still bugging me till today. I'll give that a try! @shepelevstas

[rebornix]

Hi all,

Thanks for all your feedback for this issue and great patience. The indentation adjustment is based on indentation rules (regex based so not semantic) with some heuristics. That means it has huge limitations but let's see what we can do to improve it.

After reading the whole thread, I found that you might be seeing different issues instead of the original one. So I'd love to ask a few questions and understand which category you are in:

• This issue should only happen when editor.autoIndent is set to full. Can you confirm after setting it to advanced, the paste is the same as other editors (which doesn't do indent adjustment on paste)?
  
  
  
  • If you are not seeing weird issue with "editor.autoIndent": "advanced", it means that the indentation adjustment on paste is the root cause. For this particular scenario, I would recommend to find a formatter you are satisfied with (e.g., Prettier) and turn on editor.formatOnPaste.
  
  
  • If the paste result is not as expected (say it's not the same as pasting in a simple notepad) after setting "editor.autoIndent": "advanced". Please run code --disable-extensions to see if you can still reproduce. If so, please file a separate issue, and it should be fixed real quick.
  
  
• If you prefer to use "editor.autoIndent": "full" and want this auto indent on paste to be improved, please provide following details to help troubleshoot
  
  
  
  • firstly, a minimal reproducible case is much better than a complex set up
  
  
  • before you paste
  
  
  • what's the content of the document
  
  
  • what's the value of setting editor.detectIndentation, editor.tabSize and editor.insertSpaces. Please also check if these settings are modified in your workspace settings
  
  
  • what's the value of the active indentation state of the active editor, you can get the value from the status bar, which looks like
    
    
  
  
  • what's the value of the clipboard. You can open a simple notepad and paste to see what's the result
  
  
  • after pasting, what's the content of the document
  
  

I know I might be asking too much from you but I would love to have above info to improve the code, case by case and see how far we can go with auto indent for pasting. Lastly, let me quickly summarize:

• "editor.autoIndent": "advanced" should disable this feature and paste just pastes
• having a formatter can make sure your pasted result has good indentation
• for auto indent, the logic will be on top of heuristics. It's not going to be perfect for everyone but let's improve it.

[shinebayar-g]

Looks like issue is fixed for me. At least I'm not getting indent bug with latest vs code version 1.51.1. Anyone confirm?

[sunilswain]

well i dunno people still having the same issue in 2020 but vscode has a lot of extensions that you can download .. and make sure to make it the default formatter for html .. and you are good to go now ..

[garretwilson]

I did a test a few days ago, and it seems that setting "editor.autoIndent": "advanced" will indeed stop VS Code from mangling my pasted <pre> sections; that is, if the overall HTML document uses tabs for indention, it will no longer convert the space indentions in a <pre> section into tabs. (Technically I suppose this that is the separate issue #67200 I filed, but it seems to be controlled by this same setting.) Not corrupting my HTML code is a good thing.

However it strains credulity to think that many users will know that "editor.autoIndent": "advanced" is the property/value combination to make the editor just do a normal paste like every editor since the stone age has been able to do. Do we expect users to do an Internet search, find this ticket, and read the pages of discussion, and pick out this magic incantation of "editor.autoIndent": "advanced"?

If only there were a setting that simply says "paste without doing any formatting whatsoever". Wouldn't that be cool! Users would instantly know what it meant: don't format when pasting! What an awesome idea! We could even shorten it to "editor.formatOnPaste" and have them set it to false. Wouldn't that be user-friendly! Oh, wait … that's what we started with, and that doesn't work. So now in addition to finding the magical "editor.autoIndent": "advanced" setting, users will also need to be persevering enough to ignore the other "decoy" "editor.formatOnPaste" setting.

So yes, as a power user who has spend hours reading and testing and researching and following this thread, this secret, magical incantation seems to turn off formatting on paste for me. I pity the poor normal user who just wants to use VS Code and has to track this setting down.

[tomastan]

The problem still exists. Hence I'm not sure if this is the same problem or worth another issue/ticket as I notice this across any language HTML, JS, PHP...

Format on paste: disabled
Auto indent: tried all options, neither produces satisfiable result compared to default Atom bahaviour.

Made a very dumb PHP example:

VSCode: 1.51.1

Atom: 1.53-beta