Typescript: New option to remove spaces around braces: insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces

[dbaeumer]

_From @aymone on July 8, 2016 17:59_

• VSCode Version: 1.3
• OS Version: Ubuntu 16.04
• Language: JS

Steps to Reproduce:

1.Create a simple object with functions shorthand like:

const x = {
    a(){}
};

2.Use VSCode auto format (ctrl+shift+i):

const x = {
    a(){ } // why vscode add this extra space between braces?
};

Any way to disable this?

_Copied from original issue: Microsoft/vscode#8965_

[dbaeumer]

Moving to TS team since the formatter comes from the tsserver.

[mhegazy]

This should be controled by insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets but looks like it is not being honored.

[saschanaz]

I think insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets is for 'brackets'.

https://github.com/Microsoft/TypeScript/blob/730f18955dc17068be33691f0fb0e0285ebbf9f5/tests/cases/fourslash/formattingOptionsChange.ts#L22 :

runTest("InsertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets", "[ 1 ];[];[];[ , ];", "[1];[];[];[,];");

Maybe a new option for braces is needed?

PS: Will the option finally make brace formatting rule consistent?

let ob = {}; // no space
interface A { }; // space

[aymone]

+1 New option for braces...

[alexanderby]

So, I'm using VSCode 1.8.1, I have the next workspace settings

{
     "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false
}

Still instead of

var x = {y: 5, z: 7};

I get this

var x = { y: 5, z: 7 };

Is this issue fixed?

[saschanaz]

Braces are not brackets and any new settings for this situation is not implemented yet. I'm not sure what should exactly be done there, will people want to incorporate rules for objects var a = {} and interfaces interface A { }?

Personally I do want to incorporate them and I really don't want to make two different rules to apply on those two different cases.

(The decision is not a super major factor for the delay, it's just that I had no time to visit here for months)

[alexanderby]

I think that majority of TypeScript projects use default format settings provided by TLS. At the same time JS guys use lots of different formatters, so I think this settings should influence JavaScript built-ins. There may be two settings. one for structuring objects

import {a} from 'abc';
var {x, y} = a;
var obj = {x: 5, y: 7};

and another one for functions and classes

function A() { }
class B { }

[saschanaz]

We already have two different options specific for template strings (`${x}` vs `${ x }`) and JSX expressions (<foo bar={x} /> vs <foo bar={ x } />) so I think it may be too much to add another multiple options including insertSpaceAfterOpeningAndBeforeClosingNonemptyBracesForGeneralCase (what general?) and insertSpaceAfterOpeningAndBeforeClosingNonemptyBracesForFunctionAndClasses.

BTW, I think the new title is wrong as OP said about "empty" braces rather than nonempty braces. @mhegazy

[saschanaz]

What does TS team think about this?

[mhegazy]

All the flags we have are for "non-empty" brackets, braces, parens,,, etc... this issue is about empty code blocks.

We treat code blocks differently from object literals and array literals. so we just need another option to InsertSpaceInEmptyCodeBlocks (default true); this should cover functions, classes, namespaces, constructors, getters/setters, try/catch/finally, etc..

this leaves the case for what if you want to add a space in an empty object/array literal, e.g.:

var x = { };
var y = [ ]; 

instead of

var x = {};
var y = []; 

We have not heard about this as a complain though, but if users ask for it, we can add insertSpaceInEmptyObjectLiteral and insertSpaceInEmptyArrayLiteral. i do not think this applies to template string, destructing patterns, imports, or JSX though, since you would not specify empty list in any of these.

on a related note, InsertSpaceAfterOpeningAndBeforeClosingNonemptyBraces does not seem to be working for destructuring patterns:

var {a, b} = foo();
function f({a, b}) { }

should be:

var { a, b } = foo();
function f({ a, b }) { }

[saschanaz]

Well, BTW, I didn't know #10447 already added a new brace formatting option. Opened #13111 to add destructuring support.

@alexanderby, try insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces and it should work for your example.

[saschanaz]

I feel slightly confused, shouldn't we be consistent for both types of destructuring?

var { a, b } = foo(); // spaces
var [a, b] = bar(); // no spaces

[alexanderby]

@SaschaNaz Unfortunately nothing happened, VS Code highlights this option as missing.
But I manually added this flag to
resources\app\extensions\html\server\out\modes\javascriptMode.js
resources\app\extensions\typescript\out\features\formattingProvider.js
resources\app\extensions\typescript\package.json
and it worked for objects and imports (didn't work for destructuring).

Finally I can now Code without pain, thanks.

[alexanderby]

@SaschaNaz Wait, it removes space inside inline function declaration.

function a(x) {return x;}

[saschanaz]

@alexanderby That behavior is the current implementation by #10447. It seems we need to add a new option to differentiate code blocks.

[alexanderby]

@SaschaNaz Maybe take a look at JSCS rules.

Anyway inline functions now are commonly replaced with arrow functions, so that is not a big problem.

[mhegazy]

I feel slightly confused, shouldn't we be consistent for both types of destructuring?

var { a, b } = foo(); // spaces
var [a, b] = bar(); // no spaces

do we need a new flag for distructuring patterns instead?

[saschanaz]

do we need a new flag for distructuring patterns instead?

That will again cause another inconsistency. If we choose to insert space by default then the former will occur, if not then the latter will:

var [ a, b ] = [0, 1];
var {a, b} = { a, b };

[mhegazy]

:D

[mhegazy]

let's say we have InsertSpaceAfterOpeningAndBeforeClosingDestructuringBracesAndBrackets (could find a better name). this way at least, var [a,b] will be have the same as var {a, b}. and then we are left of with the [a,b] being different from {a,b} as we are today.

[dumplings]

i wanna format

import React, {PropTypes} from 'react';

to

import React, { PropTypes } from 'react';

but

  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true

all doesn't work. how could i do?

[jibbers42]

Can someone edit the title to reflect the example given by the OP? I think @mhegazy had a good suggestion (https://github.com/Microsoft/TypeScript/issues/9613#issuecomment-268622636)

We have not heard about this as a complain though, but if users ask for it, we can add insertSpaceInEmptyObjectLiteral and insertSpaceInEmptyArrayLiteral. i do not think this applies to template string, destructing patterns, imports, or JSX though, since you would not specify empty list in any of these.

[takahser]

@chandler0415 this worked for me:

"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false

(you might want to set them to false in your case)

editor: VS Code 1.20.1

[alexanderby]

typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces: false is the only option at the moment, but I would prefer multiple options to make code look like:

import {item} from './item';    // remove space
const object = {...item, x: 5}; // remove space
const o = {};                   // remove space
const a = [5, 6, 7];            // remove space
const fn = () => { };           // add space
const f = () => { fn(); };      // add space
interface Item { x: number; }   // add space
interface Obj { }               // add space
if (item.x === 5) { fn(); }     // add space

So, I would prefer having no space inside objects, arrays and destructurings, but having space inside functions, interfaces, scopes.

[fochkun]

when i use "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false
on this

import { Observable, of } from 'rxjs';
@ViewChild('modal', {static: false}) private modal: ModalComponent;

I expect vscode to not change anything, but got this

import {Observable, of} from 'rxjs';
@ViewChild('modal', {static: false}) private modal: ModalComponent;

How can I turn of this rule?