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! :smiley:

[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.

[yufanyufan]

The current API OnEnterRule and IndentationRule are too simple for language like C++ and C#. They need to go back multiple lines to decide the right indentation, but the API can only support one line lookback. And it does not support bracket alignment indent.

[JVimes]

A more accommodating API would be a good priority, then.

[cole-gillespie]

Maybe i am being naive but this feature already exists. With javascript I am able to auto format my code. The issue I am seeing is that I can only auto format with 4 spaces. Is there a way to change this?

[JVimes]

@coleGillespie But you have to run it yourself. This topic is about making it run automatically as appropriate.

[cole-gillespie]

@JVimes understood

[nathanosdev]

The lack of auto correcting tabs is probably the biggest downfall of this editor, I dread any time that I have to move code around because it always ends up in me having to re format everything

[markadrake]

This was brought to my attention over here:

// When opening a file, `editor.tabSize` and `editor.insertSpaces` will be detected based on the file contents.
"editor.detectIndentation": true,

What this does, by default, is try to intelligently guess what the document is already using - before applying your own settings of tabs -vs- spaces and the size or count of spaces. If you are finding it annoying that some of your files won't format correctly, set this to false.

[andradei]

Isn't this discussion rich enough for the dev team to carry on with the appropriate changes? (Shouldn't it be locked at this point just like #224)?

[gazmania]

I might have missed this but I'd really like a formatting option to have JSON formatting not insert a new line after the comma in an array of objects. e.g.

[
    {
        "name": "value1"
    },{
        "name": "value2"
    }
]

[Guema]

Hi. i wanted to add a very modest idea : could be nice to have a line padding preference, defining the space between each line like in sublime text. at the moment we can only define line height, it also change caret and line hightlight size, even if font size remain the same, that is not really nice to read. it could be nice to have an option to change the margin beween each line.

Also, the availability to toggle visibility of line hightlight could be good.

"editor.LinePadding" : float value "editor.ShowHighlightCurrentLine" : boolean

for exemple

[prog-rajkamal]

I don't know if it is the right place to ask, but does anyone know how to prevent vscode to STOP formatting html code like

<table 
      id="tablps" 
      name="tableHeadings" 
      onclick="sel" 
      class="table-striped table table-responsive"
>
</table>

to this version.

<table id="tablps" name="tableHeadings" onclick="sel" class="table-striped table table-responsive">
 </table>

[MJLHThomassen]

+1

[markadrake]

I noticed it doesn't play well with some inline tags like or especially when they are chained together. Not only does VSCode not format these properly (in terms of indention) but the outlining functionality (toggle a block of code) is ruined by this too.

[gertcuykens]

I may have missed a part somewhere in the documentation but I think formating for javascript doesn't care about eslint? Is it possible that formatting can check eslint settings how to format? Basicly let plugins like eslint overwrite formating. Also a auto format flag on save would be nice.

[awebdeveloper]

Add support for editorconfig

[JVimes]

(@awebdeveloper, in the meantime there's an editorconfig extension that supports some of the most useful .editorconfig properties.)

[wclr]

• webstorm does a great job for keeping code formated, VSCode yet is quite bad at it, hope for the best!

[virgafox]

if "Format Code" could take rules from .eslintrc.json, it would be awesome.

[wprater]

respecting indent while editor.action.moveLinesUpAction and editor.action.moveLinesDownAction

[awebdeveloper]

@JVimes I know a plugin exits but having builtin support will be excellent

[webluke]

Just adding the basic functionality of Visual Studio's "Edit->Advanced->Format Document" would save most people a lot of time keeping their code looking clean. If keeping things light weight at least put it out as an extension.

[rmunn]

I'm going to be a voice of dissent, because there are many times when I do NOT want the code that I pasted to be adjusted in any way. Particularly when I'm working in a language like F#, which has significant indentation like Python but, unlike Python, doesn't have a clear syntactical marker like return to signal that the previous function has ended. In other editors that indent code for you, I'm constantly having to "fix" the editor's incorrect guess. For example, if I have the following function:

let f x =
    if x % 2 = 0 then
        x / 2
    else
        (x * 3) + 1

And now I try to paste this code below it:

let someOtherFunction () =
    printfn "Some code that I'm pasting"

In Atom, which does currently adjust your indentation for you, I get the following, which is not what I wanted:

let f x =
    if x % 2 = 0 then
        x / 2
    else
        (x * 3) + 1

        let someOtherFunction () =
            printfn "Some code that I'm pasting"

In VS Code 1.4.0, I get this instead, which is exactly what I wanted:

let f x =
    if x % 2 = 0 then
        x / 2
    else
        (x * 3) + 1

let someOtherFunction () =
    printfn "Some code that I'm pasting"

I realize that my use case is in the minority, and being able to auto-adjust the indentation is useful to many people. So I'm NOT asking for it not to be done, only for it to be a configurable option that I can turn off. Or better yet, for the option to be dependent on the language -- because when I'm working in C#, where the closing brace which marks the end of a function also helpfully marks the correct indentation for the next line of code, I will want the indentation adjusted for me. So I'd like to be able to have it automatically turned off in an F# source file, but turned on in a C# source file.

Another possibility that could help would be an option to, after pasting, have the just-pasted text start out selected so that Tab and Shift-Tab can immediately adjust it to the right indentation level. This would be inconvenient for paste-and-type, though, because if you paste and the pasted text is still selected after pasting, then when you start typing you'd overwrite the pasted text. But if there was a command to "Select the text I just pasted", then you could hit Ctrl-V, Ctrl-Something, Tab to fix incorrect indentation after pasting.