Configure Brackets Beautify extension to add new line before curly braces

user_3829526 0
Viewed 3833

I'm using Brackets Beautify extension, and having an issue while beautifying my code.

Let's say I have this code:

function test(arg1, arg2)
{
    var a = arg1 + arg2;
    return a;
}

var object = 
{
    "some" : 123,
    "some2" : 13123
}

When I click Ctrl + Alt + B in order to beautify my code, the function above will look like this:

function test(arg1, arg2) {
    var a = arg1 + arg2;
    return a;
}

var object = {
    "some": 123,
    "some2": 13123
}

But I want it to keep look like the first one (where the curly braces are in new line), because it's more readable for me.

I tried searching for solution, but no success.

BTW, I'm talking about JavaScript. The PHP code is OK.

Any ideas?

Sorry for any English mistakes, I'm not a native speaker.

EDIT: Found a partial solution. I changed "brace_style" to "expand" in "default.jsbeautifyrc" file (somehow it didn't work while doing this in the ".jsbeautifyrc" file).

Anyway, it still doesn't work for arrays and objects.

EDIT 2: Just noticed that it happens also in CSS code.

adobe-brackets curly-braces code-formatting
4 Answers

I've been running into the same situation.

I tweaked my css beautifier code locally to get around it.

It's the beautify-css.js file located in the Third Party folder of your extension installation directory.

On my Elementary OS it's here :

~/.config/Brackets/extensions/user/brackets-beautify-2.4.0/thirdparty/beautify-css.js

Change the lines of code, reload Brackets, and it's done.

Here are my tweaks (base on brackets-beautify-2.4.0) :

The first two are in the print["{"] method. This function becomes :

 print["{"] = function(ch) {
        print.newLine(); //instead of print.singleSpace(); 
        indent();//since indent removed at 383
        output.push(ch);
        print.newLine();
    };

This change consists in :

  • l 255 print.singleSpace(); becomes print.newLine();

  • l 256 becomes a new line and contains indent();

Then go to line 383 and comment it.

  • l 383 indent(); is removed

Adding a real brace-style option for CSS would be a more elegant solution.

This aims to help anyone looking for a quick fix to make it work locally.

user_86347410

Using a .jsbeautifyrc with the following content achieves the desired brace placement for JS:

{
    "js": {
        "brace_style": "expand"
    }
}

For CSS, this option is not (yet) supported by the underlying library.

The configuration file should be in the root folder of your project (the folder you open in Brackets). That way you can check it into version control so every contributor has the same formatting settings.

If you want the same settings globally, you could change the default.jsbeautifyrc file in the extension folder, but it would be reverted on update.

user_14690280

After reading the answer of @redpanda, I tried changing the code myself.

I changed some lines in the beautify-css.js file, which is located in windows inside C:\Users\userName\AppData\Roaming\Brackets\extensions\user\brackets-beautify\thirdparty directory.

This is my solution:

Go to line 463 in beautify-css.js file, and change it from this:

 indent();
 output.space_before_token = true;
 print_string(ch);

 if (!eatWhitespace(true)) {
      output.add_new_line();
 }

To this:

  //indent(); // removed, we will indent later
  output.space_before_token = true;
  output.add_new_line(); // added, in order to add new line before '{'
  print_string(ch);

  if (!eatWhitespace(true)) 
  {
      output.add_new_line();
  }
  indent(); //added, in order to indent, since we removed it before

Of course this is a temporary solution, and i hope that real brace-style option will be added.

user_38295260

Found a solution for css (beautify version 2.10.0)

File beautify-css.js (Path: ~\AppData\Roaming\Brackets\extensions\user\brackets-beautify\thirdparty)

Line ~1411

Find "else if (this._ch === '#' && this._input.peek() === '{')"

Sample code

} else if (this._ch === '#' && this._input.peek() === '{') {
  this.preserveSingleSpace(isAfterSpace);
  this.print_string(this._ch + this.eatString('}'));
} else if (this._ch === '{') {
  if (insidePropertyValue) {
//this._output.add_new_line();
    insidePropertyValue = false;
    this.outdent();
  }
  this.indent();
  this.__add_space_before_token();
  //this._output.space_before_token = true;
  this.print_string(this._ch);

Change to

} else if (this._ch === '#' && this._input.peek() === '{') {
  this.preserveSingleSpace(isAfterSpace);
  this.print_string(this._ch + this.eatString('}'));
} else if (this._ch === '{') {
  if (insidePropertyValue) {
    insidePropertyValue = false;
    this.outdent();
  }
  this.print_string('\n');  // this line has been changed
  this.outdent();           // this line has been changed
  this.print_string(this._ch);
  this.indent();            // this line has been changed
user_134628240
Related