auto align colons in object literals, variables, and equals like WebStorm

[waderyan]

From @kinergy on October 17, 2016 2:56

• VSCode Version: 1.6.1
• OS Version: macOS 10.12

Using Format Code on a js file:

var abcde = 'abcde',
    def   = {
      a : 'aaa',
      bb: 'b'
    };

turns into:

var abcde = 'abcde',
  def = {
    a: 'aaa',
    bb: 'b'
  };

It would be really nice to have a setting to align the beginning of var names, align the equals, and align the colons in object literals like WebStorm. I tried looking for an extension, but wasn't able to identify one.

Copied from original issue: Microsoft/vscode#13841

[waderyan]

@kinergy thank you for opening this issue.

@jrieken is this issue related to the formatting stab you are doing?

[waderyan]

From @jrieken on October 25, 2016 7:12

Nah, the actual formatting smarts must come from an extension - TypeScript/JavaScript in this case. What we do it just calling into those formatters and apply their results

[RyanCavanaugh]

This issue is now awaiting more feedback. This means we'd like to hear from more people who would be helped by this feature, understand their use cases, and possibly contrast with other proposals that might solve the problem in a simpler way (or solve many other problems at once).

If this feature looks like a good fit for you, please use the :+1: reaction on the original post. Comments outlining different scenarios that would be benefited from the feature are also welcomed.

[kinergy]

recommend making compatible with http://eslint.org/docs/rules/indent

[ARAtlas]

Good feature. I also find it easier to read code when as much is aligned as possible from one line to the next (colons, equals, etc).

[AlexeyRyashencev]

+1

[jfconde]

Another +1. We are really struggling to keep a good formatted code in our project, and we need to do it by hand in VSCode, as opposed to WebStorm :'(.

By the way, you can get a temporal fix with this extension: https://marketplace.visualstudio.com/items?itemName=annsk.alignment

Although the behaviour is different, and it uses the maximum indent "width" for the whole document.

[alialtun14]

Most of the time, it's needed to format some part of code manually by developers to align the code vertically.

For example: in the following code that is formatted by typescript formatter,

constructor (public http: Http, public chd: ChangeDetectorRef) {
    this.ctx.customer_exp = { sel: { "new0.customer": "id" } };
    this.ctx.perso_exp = { sel: { "new0.perso": "id" } };
    this.ctx.car_exp = { sel: { "new0.car": "id" } };
}

I changed format of some part to improve readability of the formatted code, After changing the code is like this

constructor (public http: Http, public chd: ChangeDetectorRef) {
    this.ctx.customer_exp = {sel: { "new0.customer": "id" }};
    this.ctx.perso_exp    = {sel: { "new0.perso"   : "id" }};
    this.ctx.car_exp      = {sel: { "new0.car"     : "id" }};
}

It would be nice, typescript formatter remember code that manually formatted part and protect them.

According to my opinion if this is possible, no longer needed to align colons automatically.

In connection with this property, following value can be added to settings file.

typescript.format.rememberManuallyFormattedCodePart = true;

Otherwise to find a common solution that will be a solution for everyone is very difficult.

Copied from issue: TypeScript/issues/14601

[vhb56]

Really need this!

[johnsba1]

+1 On this as well. I tested VSCode to see if we could use it as a replacement to Intellij/Webstorm and found this as a pretty key issue. Most of our codebase uses colon/equal alignment as the formatting preference and I gave up on VSCode when I found this.

I would really love to use VSCode in development once this is fixed.

[ARAtlas]

I have to agree with johnsba1. The code formatting is one of the key issues that makes it really hard to switch over from WebStorm. I know VSCode lets people write all these third party plugins that supposedly help with formatting, but I haven't been able to find one that's particularly good.

[RezaRahmati]

Would you please name other editors which is doing it on type script files?

[Serzh470]

Hi, are there any changes in issue? It would be nice, if we can configure document format according to ESLint indend rules.

[abernal-edvisors]

Would you please name other editors which is doing it on type script files?

WebStorm, PHPStorm, ...

[ddonahoevibrenthealth]

Any yes, no maybe on this one?

Missing a parallel feature set to eslint indent is the only thing keeping my TS code an ugly zit in other wise really clean code.

[David-van-der-Sluijs]

I'm here because I wanted to switch from IntelliJ/Webstorm as well. VSCode just doesn't provide this feature. It's quite a shame.

Are you guys still awaiting more feedback?

[AlbinoGeek]

+1 need. This is a standard in Golang and it aids readability greatly.

[DevEliasKh]

+1, really need this feature in the next update

[mzvast]

How is this issue going?

[acrobaticcow]

Pls make this come true

[abubakarasifmughal]

So are we having this auto align feature in objects? Really want something like Golang or Prisma schema formatter.

[agorushkin]

Bump

[anasbarg]

I would really love to see this table-like formatting for object types and interfaces:

export interface RawPerson {
  cc_email:     CcEmail;
  active_flag:  boolean;
  id:           number;
  organization: DatumOrganization | null;
  org_id:       number | null;
  name:         string;
  email:        Email[];
  phone:        Phone[];
}