Auto Indent / Code Formatting / Beautify

[waderyan]

This is an ongoing feedback issue from User Voice.

[waderyan]

From User Voice - Maintain indentation level on copy and paste
"When you cut a block of code and paste it somewhere with a different indentation level (i.e. inside nested ifs) it'd be nice to get it properly indented, automatically on paste."

[waderyan]

From User Voice - Auto indenting line based on language's standard
"In PyCharm, when you type ":" and press Enter then the next line is automatically indented to the appropriate level according to the chosen language's standard."

[waderyan]

From User Voice - Tab size per language
"One specific thing that I've came across though: I've set my tab size to 2 in my user settings file. That tab size is honored when I format a .ts or .js file. It is NOT honored when I auto format a .cs file - then it seems to go on a 4 space indent. Is this a separate setting?"

[waderyan]

From User Voice - CSS / Less indenting
"The only thing that's missing for me is the out of the box LESS indent functionality (all other file types I work with work just fine). I had to install a plugin that auto formats CSS but it's not exactly the same. It's also missing some features like preserving spaces/line breaks and so on... something that should be configurable if you're adding this support. "

[waderyan]

From User Voice - Format issues with C#
"This needs to be added. I want to write my C# code with the K&R style, but every time I try to format it it screws everything up."

[waderyan]

From User Voice - HTML / CSHTML editing capabilities
"Just look at VS2015's capabilities during editing of an HTML or CSHTML file - replicate that."

[waderyan]

From User Voice - Auto formatting
"It should pick up the type of language based on the choice you made at the bottom right of the screen. If I open a .log file for instance that has xml in it, I would like it to autoformat to the xml setting I changed it too. using the editor.action.format ONLY works based on the file name not what I have told it the contents are. Definitely should appear on the context menu"

[jreadytalk]

Currently there's no auto-indentation for CoffeeScript (e.g. function, condition, and loop bodies), and in some situations tab key produces 4 spaces in a 2 space file (default indentation settings).

[geomorillo]

Autoformat like netbeans does...

[waderyan]

@geomorillo can you be more specific? What exactly does Netbeans do that is missing?

[mrboring]

Powershell (I suspect this may be the same for other languages):
Heredoc text is not folded as the end tag must have no white space before it. Often heredoc text has no leading whitespace on any line.

Here is the code I used for testing:

function FunctionName  {
    $a = @"
This is some sample text to 
demonstrate a code folding issue
withing VS Code. 
"@
}

[stylemistake]

Sublime Text 3 has the feature to paste text with automatic indentation (Ctrl+Shift+V), which basically adds or removes levels and adjusts the first line to match the current block indentation.

UPD:
This behavior can be default for Ctrl+V (like in IntelliJ IDEA, afaik), and have Ctrl+Shift+V for HTML previews as it is right now.

UPD 2:
There is an extension that adds an extension.pasteAndFormat command, which can be used in keybindings.json (combination of editor.action.clipboardPasteAction and editor.action.format).

I thought why not allowing users to define keybindings with multiple commands using the array syntax, like this?

  ...
  {
    "key": "ctrl+shift+v",
    "command": [
      "editor.action.clipboardPasteAction",
      "editor.action.format"
    ]
  }
  ...

This would solve the problem and add a possibility to create mini-macros, sort of! 😃

[JVimes]

Ooo, pasting with correct indentation should be the default.

[cs04riva]

Formatting CSS doesn't seem to properly work anymore.

You use to be able to paste in a block of css in one line, hit the shift + alt +f and it would correctly format the code. This no longer works.

For example:
body{background-color:#FFF;}#test{position:absolute;}

Would turn into:

body{
    background-color:#FFF;
}
#test{
    position:absolute;
}

[wembernard]

Format code does not work on .scss files.

[cs04riva]

This is a standard CSS file.

[pdefreitas]

+1

[wembernard]

@cs04riva: Sorry for misleading. I was just adding another feature I'd love.

[ganeshkbhat]

The current one is quite good. The indenting leaves some tabs/spaces in the left sometimes. Specially in cases of HTML. Cases like a blank line/row is also left as is and is not removed. You can have visual studio code settings for this whether to remove blank lines/rows May be this is on purpose I guess. More, what is missing is in-file/active-file code minification/uglifying/removing blankspaces etc for all supported languages. A nice valueadd to have when having indenting/formating.

[alexgorbatchev]

I would really love to see an option to format on save

[gertcuykens]

Using polymer which is a mix of html and javascript, shift + option + f doesn't work on it.

You can use this as a test base for formating https://github.com/PolymerElements/polymer-starter-kit

[MaDDoXbr]

Just copy these guys and you'll be good to go:
http://www.wholetomato.com/
http://www.telerik.com/products/justcode.aspx
https://www.devexpress.com/Products/CodeRush/

Ok, that might be too much. Can we start with "Refactor > Change Signature" and "Extract Method from Selection"? Live code analysis is also a must, or else VSCode will keep feeling like a glorified text editor - which's not really what a serious production code IDE is supposed to be.

[stylemistake]

@MaDDoXbr but it is a text editor, not an IDE.

[MaDDoXbr]

I know, yet it could be a full-featured IDE if Microsoft wanted it to.

[JVimes]

No point in arguing text editor vs IDE (VSCode's selling points include features of both). Thin and popular features go into the base product, heavy or niche features into extensions.

Correct indentation on paste and formatting support for more languages are obvious candidates for base product.

[CherryDT]

The "paste and format" thing is only partly a solution for me. I would like to have the indention adjusted without any other modification of the pasted content - like it's in Sublime.

The thing is, I sometimes accidentally introduce "wrong coding style" into a file in a repo which uses different coding style than what VSCode is configured to use. For example, I paste-and-format a piece of JS and VSCode changes the if(condition) to if (condition) with a space.

Also I noticed that often the even indention is not correct, for example the first line is not enough indented. Again, I do compare this to Sublime Text 3 because I'm in the process of switching from it to VSCode because I like several aspects more, but there are still issues like this which are very annoying.

[Lichtjaeger]

I agree with @CherryDT .
I don't like the space between function and () (i.e. function (a, b) {...}) and would like to modify this behavier.

Sorry, found the options:
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions" does the job.

[markadrake]

Two things I want to report on.

1. I've noticed that the package.json file, when formatted, does not respect the configuration settings in place. For example, I use tabs, not spaces. Formatting works, but does not take into account my settings. All other files in my project do.
2. I've also noticed when placing inline SVGs into my HTML that the file will not format nicely, and toggling the outlines for the SVG element does not work as expected. Everything works as expected IF you have manually spaced/tabbed your SVG elements. This is hard for me to explain, I'd be happy to record my screen.

[dandrayan]

@halukkaramete I had the same problem for JavaScript files and got around it by changing the language mode to anything else (in this case, Batch file, because it was first on the list) before saving and then switching back after saving. I eventually got so annoyed by this that I disabled all extensions one by one and finally figured out that "vscode-json" was my culprit. I haven't had the issue since uninstalling it.

[sunpietro]

I'm also struggling with this autoformatting issue. Whenever I paste a piece of code in my SASS files the new extra line is added. It makes such a mess in my code. Is there a way to prevent such a behaviour?

[rlalance]

<3 how developers need there brackets at the right spot to feel sane :)

[hackuun]

This stil doesn't fixed? #43859

How to autoindent Stylus? Super frustrating...

[sam0x17]

Would be great if autoindent worked the same as in atom

[mityukov]

@rrd108 how were you even able to format a smarty template? I've just tried to format .tpl file using Alt+Opt+F, but it keeps saying "There is no document formatter for 'smarty'-files installed.". I'd be glad to apply ol'good-HTML formatting rules to this file (it doesn't have any smarty tags at this moment), but I don't see a way to do it…

[ToMakeSense]

related to this #48341

[absalan]

I have spend at least 2.5 hours to fix this auto formatting on save issue and I had no success. This is really frustrating. the is no settings to stop this.

[sam0x17]

Step 1. open op atom
Step 2: auto format
Step 3: open vscode back up

;)

[sam0x17]

But seriously, there should be some language-nonspecific way of converting say a 4-space indented file to a 2-space indented file.

[luchillo17]

@mityukov Have you tried changing the language mode for the file to HTML before formatting? i've had success formatting files after changing the language mode to any, didn't matter the file extension.

[luchillo17]

@sam0x17 There are plugins for such purpose, i'm not sure this is the best example but here's one: https://marketplace.visualstudio.com/items?itemName=Compulim.indent4to2

Also using auto-formatters like prettier should do the trick assuming you configure it correctly, though prettier might not be language agnostic.

[mityukov]

@luchillo17

Have you tried changing the language mode for the file to HTML before formatting

Nope. I've had such idea, but I couldn't find how :/

[luchillo17]

Sight...
Lower right corner, if that kind of file doesn't have a parser associated you'll see something like "Plain Text", if it does it will state the mode like "Html" or "JavaScript" or "TypeScript"...

Also anything you can do through interface can be done through the command palette, press Ctrl + Shift + P and type "Language", one of them should say "Change Language Mode".

Then is up to you which one you want to select, you said you want Html right? just type html and select one of the options.

[bexoss]

auto formatting jsx file is going crazy, How can I avoid this?

[sam0x17]

@sam0x17 There are plugins for such purpose, i'm not sure this is the best example but here's one: https://marketplace.visualstudio.com/items?itemName=Compulim.indent4to2

My point is you shouldn't have to worry about finding a plugin for something basic like this. Atom does this out of the box without any plugins, and automatically can do it for any language that has a syntax highlighting plugin. Prettier/eslint/rubocop/whatever might not respect my user-configured tab/spaces preference (2 spaces always in my case) so you're taking something that should be a basic editor feature and leaving it up to the third party ecosystem which is going to do a terrible, inconsistent job with it because there are no editor-level conventions that let a language specify how the editor should do auto-indenting for that language.

Right now my workflow is literally use vscode for most things, copy paste to and from atom whenever I need to mess with indents, because the vscode tools for that are that bad.

[clocksmith]

I have default settings with 2 spaces for indent. I want the the cursor to figure out where it should be when I hit enter, as I am typing it, like every other IDE (Intellij, Xcode, Android Studio, Eclipse, etc)

Stuff like this works fine.

if (x) {
  good();
}

Problems arise when I hit ENTER at the end of a statement on a multiline that ends in a diff column than it started, or hitting ENTER mid statement to break a longer line. For example:

I would like this to happen as I type and press ENTER (4 spaces, double my default indent)

const stream = getSomeSource()
    .map(...)
    .filter(...);

I would even settle for this (2 spaces, same as my default indent)

const stream = getSomeSource()
  .map(...)
  .filter(...);

But this is what I get before running the format command.

const stream = getSomeSource()
.map(...)
.filter(...);

I have spent hours with vscode settings and extensions but cannot get this simple behavior. The "formatOnType" option is close, but doesn't seem to work for ENTER key, and there are still no options for line-continuation, chained methods, etc.

Ideally:
A. The cursor always knows where it should be after hitting enter.
B. EditorConfig-like continuation_indent_size so that the above can be fine-tuned.

This is what the config looks like in Intellij:

[zenoven]

exactly the same issue with @clocksmith

spent too much time searching for a solution but none succeed

[stephengardner]

+1000 to what @clocksmith said.
That's EXACTLY what I came here hoping to find.

It's actually not possible?

Someone save us. I want to search for a plugin but seems like there have been many fruitless efforts and I've spent long enough configuring this to match the ease of use that WebStorm offered.

[sam0x17]

agree, what @clocksmith said, with the addition that "auto format" should be an editor-level option that works for any language plugin like it does in Atom.

[drdebmath]

Another thing I would like to point at is, when I am in a .php file, say it contains HTML. I can format the HTML by choosing the Language Mode to HTML. But it is better to have an option to directly format the php file without choosing to change the Language Mode option to HTML. It should be able to format the HTML in the php file.

[createdbyjurand]

Could you please add to Visual Studio Code some way to configure "Format Document" option.
It would really help us with work. When we work in teams where everyone uses different editor, VSC cannot be configured as the team decided the code should look like. So I am forced not to use VSC because this is not configurable. This is deal breaker for me. Using VSC makes my Git commits have so many differences that this makes other team crazy.

[sam0x17]

I second what @createdbyjurand says, this is a desperately needed feature. Eclipse has this, and Atom to a lesser extent.

[sanjayabc1234]

Hello,
I was checking copy pasting of Python code in a markdown editor such as stackedit.io, the code looses its indentation. Whereas if I copy the same code from Sublime, the indentation is preserved on such markdown editor.

Any idea how to resolve this issue?

Thanks,

[mjbvz]

Closing this aggregate issue as it is out of date and it is unclear what it is tracking

If you are running into an issue with formatting or indentation, or would like to suggest a feature related to formatting or indentation, please open a new issue