New option to remove spaces around braces: insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces

Marcelo Aimone (@aymone)

From Marcelo Aimone (@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

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

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

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

+1 New option for braces...

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?

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)

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 { }

Mohamed Hegazy (@mhegazy)

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. Mohamed Hegazy (@mhegazy)

What does TS team think about this?

:D

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.

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?

Mohamed Hegazy (@mhegazy)

Can someone edit the title to reflect the example given by the OP? I think Mohamed Hegazy (@mhegazy) had a good suggestion (#9613 (comment))

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.

@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

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.

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?

The insertion of spaces during import autocompletion is very annoying, e.g. type import item<tab>, result is:

import { item } from './item';
        ⬆️   ⬆️

Both the insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces and insertSpaceAfterOpeningAndBeforeClosingEmptyBraces options have no effect.

PS: Should this issue be moved to the VSCode repo?

Reported the import issue in VSCode repo at #57834

Closing language service bugs related to the 6.0 implementation. For more information, see #62827

Navigation Menu

Repository navigation

New option to remove spaces around braces: insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces #9613

9 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

New option to remove spaces around braces: insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces #9613

Description

Activity

dbaeumer commented on Jul 11, 2016

mhegazy commented on Jul 11, 2016

saschanaz commented on Jul 31, 2016

aymone commented on Aug 2, 2016

alexanderby commented on Dec 21, 2016

saschanaz commented on Dec 21, 2016

alexanderby commented on Dec 21, 2016

saschanaz commented on Dec 21, 2016

saschanaz commented on Dec 21, 2016

9 remaining items

mhegazy commented on Dec 22, 2016

mhegazy commented on Dec 22, 2016

dumplings commented on Apr 17, 2017

jibbers42 commented on Jun 9, 2017

takahser commented on Mar 7, 2018

alexanderby commented on Mar 7, 2018

fochkun commented on Apr 14, 2020

silverwind commented on Mar 15, 2024

silverwind commented on Mar 15, 2024

RyanCavanaugh commented on Dec 3, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions