brackets-beautify / brackets-beautify

Beautify HTML, CSS, and Javascript in Adobe Brackets

Brackets Beautify

Brackets Extension that formats open HTML, CSS, and JavaScript files using js-beautify version 1.13.13.

Installation

Latest Release

To install the latest release of this extension use the built-in Brackets Extension Manager which downloads the extension from the extension registry.

Latest Commit

To install the latest commit of this extension use the built-in Brackets Extension Manager which has a function to Install from URL... using this link:

https://github.com/brackets-beautify/brackets-beautify/archive/master.zip

Brackets npm Registry

The latest release of this extension is also available on the Brackets npm Registry.

Usage

Brackets Beautify can be run manually on the whole file or on a selection. Use the Toolbar Button with the wand icon, the menu entry Edit > Beautify, the context-menu entry Beautify, or one of the keyboard shortcuts Ctrl-Alt-B (Windows/Linux), Ctrl-Shift-L (Windows), Cmd-Shift-L (Mac), or define your own.

Alternatively it can be enabled to run automatically on save. Use the menu entry Edit > Beautify on Save or the more advanced settings to activate.

Configuration

Beautifier Options

Brackets Beautify supports the same options as js-beautify with the exception of indentation-based options (indent_size, indent_char, and indent_with_tabs) which are taken from the current settings in Brackets. The options can be specified in a .jsbeautifyrc file on project level and will be merged with the default. The default is defined in default.jsbeautifyrc and looks like this:

{
    "js": {
        "eol": "\n",
        "preserve_newlines": true,
        "max_preserve_newlines": 10,
        "space_after_anon_function": true,
        "brace_style": "collapse",
        "keep_array_indentation": true,
        "keep_function_indentation": false,
        "space_before_conditional": true,
        "break_chained_methods": false,
        "eval_code": false,
        "unescape_strings": false,
        "wrap_line_length": 0,
        "wrap_attributes": "auto",
        "end_with_newline": true,
        "comma_first": false
    },
    "css": {
        "eol": "\n",
        "end_with_newline": true,
        "preserve_newlines": true,
        "selector_separator_newline": true,
        "newline_between_rules": true,
        "space_around_selector_separator": true
    },
    "html": {
        "eol": "\n",
        "end_with_newline": true,
        "preserve_newlines": true,
        "max_preserve_newlines": 10,
        "indent_inner_html": false,
        "brace_style": "collapse",
        "indent_scripts": "normal",
        "wrap_line_length": 0,
        "wrap_attributes": "auto"
    }
}

File Options for Beautify on Save

Brackets Beautify leverages Brackets preferences, which means that you can specify per project settings by defining a .brackets.json in the root directory of your project. With Brackets preferences you can even define per file settings, which is really handy when dealing with third party libraries or minified resources.

Brackets Beautify also support per language settings, which enables you to enable/disabled Beautify on Save for your documents using the Brackets language layer.

The sample .brackets.json below generally enables Beautify on Save and disables it for any JavaScript file in thirdparty, any JavaScript file whose filename contains min, and any PHP file.

{
    "bb.beautify.onSave": true,
    "path": {
        "thirdparty/**.js": {
            "bb.beautify.onSave": false
        },
        "**min**.js": {
            "bb.beautify.onSave": false
        }
    },
    "language": {
        "php": {
            "bb.beautify.onSave": false
        }
    }
}

User Key Map for Beautify

Open the keymap.json with the menu entry Debug > Open User Key Map and add an overrides entry. For example:

{
    "documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings",
    "overrides": {
        "Ctrl-Alt-F": "bb.beautify.beautify"
    }
}

Configure languages

Brackets Beautify comes with beautifiers for JavaScript, HTML, and CSS:

{
    "css": "css",
    "ejs": "html",
    "handlebars": "html",
    "html": "html",
    "javascript": "js",
    "json": "js",
    "jsx": "js",
    "less": "css",
    "php": "html",
    "scss": "css",
    "svg": "html",
    "vue": "html",
    "xml": "html"
}

You can add languages or change their assigned beautifiers by adding their language ids to the bb.beautify.languages setting:

{
    "bb.beautify.languages": {
        "<LANGUAGE_ID>": "<BEAUTIFIER_ID>"
    }
}

The language id for the current document can be found by using the following command in the Brackets Developer Tools:

brackets.getModule('document/DocumentManager').getCurrentDocument().getLanguage().getId();

The beautifier id has to be either one of the bundled beautifiers (js, css, or html) or one that was defined as external formatter.

External formatters

Additionally, external formatters can be added to Brackets Beautify by modifying the bb.beautify.beautifiers setting:

{
    "bb.beautify.beautifiers": {
        "<BEAUTIFIER_ID>": {
            "<COMMAND>": "/path/to/file --with args"
        }
    },
    "bb.beautify.languages": {
        "<LANGUAGE_ID>": "<BEAUTIFIER_ID>"
    }
}

The key is a name that can be use to configure the language where this formatter should be used. The <COMMAND> is executed on a shell and gets the filename as last command line argument.

See the Wiki for help on common configurations.

Issues

Brackets Beautify uses js-beautify to beautify files and is therefore limited to its capabilities. For any issues concerning the actual formatting please refer to the js-beautify issues.

License

Brackets Beautify is licensed under the MIT license. js-beautify is also licensed under the MIT license.

brackets-beautify's Issues

Use tab/space settings

I expected it to use my tab/space settings in the beautify and it doesn't appear to.

Plugin deletes important whitespaces

On "beautification" plugin removes necessary whitespaces like:
Initial code:

<a href="#"><i class="fa fa-picture-o"></i> Lablel</a>

After beautification:

<a href="#">
     <i class="fa fa-picture-o"></i>Lablel</a>

It should leave whitespace between </i> and Label.

Also I think that it should leave whitespaces between all inline elements like li,span, etc. if they were present in original code.

use .editorconfig for settings

It would be great if this extension could use .editorconfig for settings.
See: http://editorconfig.org/

Saving deletes file contents

Using both sprint 37 and the latest build, when I have no other extensions installed, saving a file deletes its contents. Is there a log file or something I can send you to help debug?

I'm using OS X 10.9.2.

This extension will break in Sprint 22 due to a recent change to Editor

Drew,

I want to give you a head's up that this extension will break in Sprint 22 due to a recent change to Editor. The getIndentUnit() function was removed. I'm not sure if you want to use the new getSpaceUnits() or use CodeMirror.getOption("indentUnit").

You can test this against the current master in Brackets. Sprint 22 will be posted probably on Monday.

Regards,
Randy

Version 22(21?) issue with tabs->spaces

Hi. (I'm working with the version that is currently labelled as for Sprint 21 but is internally marked as suitable for sprint 22 - it only works with 22 anyway..)

There seems to be an issue with using this extension with other extensions that perform tab to space conversions eg https://github.com/davidderaedt/tabtospace-extension or https://github.com/dsbonev/whitespace-normalizer

Specifically I've found that beautify is adding too many tabs to indented text that has been converted to space indendation (appears to keep the spaces and add the equivalent amount of tabs)

Only appears to happen on js embedded in html (not with plain .js files)

eg try this

<html>
<head>
<script type="text/javascript">
var p,
f=2,
d;
s=1;
</script>
</head>
<body></body> 
</html>

After beautify - convert tabs to spaces and then beautify again.. I get three additional tab chars added to the variable declarations. (thies can be repeated) Also getting some odd behaviour where beautify wont format the text at all

eg the below won't format the "f=2" if the indent at "var p," uses tabs, but will if the indent uses spaces

<html>
    <head>
        <script type="text/javascript">
            var p,
f=2,
        </script>
    </head>
    <body></body>
</html>

(comment -I've checked using manually entered tabs and spaces and it appears the problem still occurs, not just on when using the extensions)

Bold tags don't format correctly

Bold tags are moved to a new line and spacing is removed. It is the same result with bold tags. I would say that <strong>, <b>, <i>, and similar tags should be left alone as they usually need to retain their spacing within paragraphs. Just my thoughts. Would others agree?

<h3 style="text-shadow: 0 1px #000">The <b>simplest, most reliable</b> catalog of <b>glass &amp; framing</b> solutions</h3>

becomes

<h3 style="text-shadow: 0 1px #000">The <b>simplest, most reliable</b>catalog of <b>glass &amp; framing</b>solutions</h3>

Alt + Crtl + L shot key si not working in windows

Alt + Crtl + L shot key is not working in windows frequently but if we click edit menu its working properly.

I am using windows 7

Can't install the plugin

I am on Brackets 36 and I tried to install this. Brackets said there was an error installing the extension. So I don't know what is going on.

Line splitting within a single line <input> code

There is an issue with some built in HTML5 validation attributes for that is causing lines to be split into two lines instead of staying as one line.

Pastebin link: http://pastebin.com/TysgJB6J

For whatever reason, and I think it's because of the 'required' attribute in the tag it forces it into two lines..

As you can see, line #4 is prior to executing the "Beautification" of the code. After the execution is complete, line #4 now becomes two lines. This is shown on lines 10 and 11 of the pastebin link.

A current list of HTML5 attributes that are supported by can be viewed here:
http://www.w3schools.com/html/html5_form_attributes.asp

I would like to thank you in advance for your time reading this and an upcoming fix or solution to this.

EDIT #1: Even "self closing" the tag, like such.. does not change the problem that is occurring.
EDIT #2: The bug also exists whilst using http://jsbeautifier.org/

Ken

Master branch should have your latest code

Starting in Sprint 22, there's a new feature in Brackets: File > Install Extension.... This is the start of the Extension Manager stuff.

The way it works now, you paste in a github url for the extension and it downloads, unzips, installs, and refreshes Brackets (so you don't have to restart).

But it grabs from master, so I just tried it on your extension, but it grabbed the wrong version.

Request: php support

Doesn't work in Sprint 19

I followed the instructions and do not find the option to Beautify the code.

Alignment issue in function chaining

I tried to format the following code snippet, and i found some alignment issue

but the result was like

But in online http://jsbeautifier.org/ its aligned properly

CSS Double linespace

Hi,

thanks a lot for this extansion, it's awesome.

I have just a small question about CSS beautifying, whenever i use it all my properties are getting a double line break like this

 img {

    height: 25px;

    width: auto;

}

Is it an expected behavior or it is something that can be fixed in the beautify-css.js ?

adding extra newlines in css after beautify

Have version 0.0.10, when I beautify it adds one or more carriage returns after every line, i.e.:

reportContent {

position: absolute;
top: 40px;
left: 10px;
right: 10px;
bottom: 10px;

}

becomes:

reportContent {

position: absolute;

top: 40px;

left: 10px;

right: 10px;

bottom: 10px;

}

Feature request: Beautify JSON

JSON beautify is identical to Javascript beautify other than a quirky exception.

If there isn't a JSON beautify script readily available that you can hook up, then maybe just make the extension recognize the .json file extension as a Javascript file.

Use a better beauitifer

I've just found this JS beautifier:
https://github.com/austincheney/Pretty-Diff

I've tested a bit it with CSS, LESS, JS, HTML and PHP and it works well with all of them.
Couldn't it be used instead of the bugged beautify-js that is uses at the moment?

Single property

Single property need to be format in one line.

doesn't format css anymore

after updating to version 0.9 it doesn't format css anymore

Indentation of var statements not fully working

If a multiple var statement contains fields without assignment, or just assignment to an empty object the indent isn't triggered..

eg See example - self explain hopefully:

var name,
id,
date,
size,
dat, xxx;

var name,
id,
date = 0, //assignment triggers indent
    size,
    dat, xxx;

var name,
id,
date = {}, //assignment to an empty object doesn't trigger indent 
size,
dat, xxx;

var name,
id,
date = [], //assignment to an empty array does triggeer indent
    size,
    dat, xxx;

This is what I get after using beautify (Sprint 21). Current version of http://jsbeautifier.org/ doesn't appear to have this issue. Thanks.

Conflict with Grunt indentation

Grunt's jsHint reports indentation warnings whenever it deals with brackets-beautify'ed code.
Any best practice to follow? Who has more right/priority than the other; jsHint or brackets-beautify?

Could not determine file type

With Brackets21, I get this error message "Could not determine file type" only with html files when I try to use Beautify.
It used to work OK with the same files. Then I added some extensions.
But if I remove all other extensions; problem stands.
Same things after uninstalling and reinstalling Brackets21.
When I use Brackets20 with the same extensions and try to use beautify on the same files that don't work with Brackets21, everything works OK.

[BUG] Multiple saving a file with "beautify on save" in Sprint 36

Hi! When I press ctrl+S, Brackets enters cyclic saving (about 5-10 times...).This is especially annoying if i use LiveReload). If I disable the function "beautify on save", Brackets does saving normal.

Sorry for my English :)

Sass &:hover wrong formatting

When beautifying .scss files, the plugin adds space between nested "state/selector" -> &: and the state e.g. (hover, active, before, after etc.)

Allow configuring different shortcut key?

It would be nice to be able to map a different shortcut key to the beautify function. Ctrl + Alt + L by default is the global lock function in Linux KDE.

Reference to EditorUtils needs to be removed

I tried to use your extension in my Sprint 20/21 hybrid and it failed to load because of the following line of code in main.js:

EditorUtils = brackets.getModule("editor/EditorUtils") .

It looks like editor/EditorUtils.js is either already gone, or is soon to be gone, from the Brackets codebase.

I suggest removing this line since you don't appear to be using the EditorUtils module in your code anymore anyway. After I commented it out everything worked fine.

scripts and styles formatting in html files doesn't work

Lets say I have following html document:

<style>
    div {
        display: block;
                    visibility: hidden;
    }
</style>

<script>
    jQuery(function(){
                jQuery('div').show();
            jQuery('a').remove();
    });
</script>

It should be beautified (and it worked fine in previous versions of this extension) after I press Ctrl+Alt+L, but it doesn't. It just stays as it was typed.
The same code separated into css and js files is beautified without any problems

CSS Font Single Quotation Problem

If you beautify css code, it converts font property to
body {
font:11px'arial', 'serif';
}.

Pseudo-element CSS issue

I've got some issue when working with Pseudo-element. if I prettifying this rule

a.panel:hover{background:red;} it will becomes
a.panel: hover{background:red;}. there's an extra space after :
which mean it would give an error if we work with LESSCSS.

.scroller::-webkit-scrollbar-track{background:red;} will becomes
.scroller: :-webkit-scrollbar-track{background:red;}.

[FEATURE] Load settings from file

https://github.com/einars/js-beautify mentions a possibility of using .jsbeautifyrc for setting beautifier options.

Could this extension do the same ?

Something similar is done here https://github.com/cfjedimaster/brackets-jshint/ for file .jshintrc

html beautify removes spaces

<strong>testing </strong> (mind the space after testing)

results in 
<strong>testing</strong> after beautify...

I guess this shouldn't be happening....

Doesn't work in Brackets Sprint 19

The menu entry for Beautify is visible, but clicking on it does not do anything. Opening the same file in Brackets Sprint 18 (installed side by side) works as expected.

Change keyboard shortcut

Please change the keyboard shortcut from Ctrl-Alt-L to e.g. Ctrl-Alt-B, because combinations Ctrl-Alt-{A,C,E,L,N,O,S,Z,X} are used to type Polish letters. Therefore I cannot put the "ł" character in Brackets with your plugin.

CSS beautifing breaks when css starts with new line.

Reproduction:
Copy this snippet to a css file:

html,body,table{
    margin:0;padding:0;
    font-size:13px;
    font-family: Verdana,Arial,Helvetica,sans-serif,sans;
    color:black;
}

Beautifying works perfectly.
Hit an enter before the content, and beautify it again. Beautifier puts a double linebreak after every line.

inline elements incorrectly spaced

The same problem has been discussed also in this jsbeautifier issue. This issue is one year old, so I'm wondering why the same problem still happens here?
brackets-beautify doesn't use one of the newest versions of beautify-html?

deleting spaces

hi, there's one problem when beautifying things like this one:

{p}Something {span} Example Text {/span} more{/p}

after beautifying i received like this

{p}Something{span}Example Text{/span}more{/p}

Beautifier is messing with the content ! That's not good :)

Beside that, Good Work !

{omg how to put comment with html code on github??!}

Create a package.json file

It would probably be a good idea to create a package.json file so that users don't have to look at the ugly repo name. (Who wants to install a beautify extension if the name is ugly. 😄 )

Trailing newline makes git happy

Love the plugin

A humble request: don't strip the last newline in the doc

Git likes this 😄

Ctrl+Alt+L in Ubuntu logs you out and the javascript does not get cleaned up

Ctrl+Alt+L is reserved in Ubuntu. We would require a different command.

Shortcut being taken by Brackets core

Hi,

As part of our work to implement multiple selection functionality in Brackets, we need to add a few keyboard shortcuts for new commands. Unfortunately, one of these shortcuts, Ctrl-Alt-L, conflicts with a shortcut being used by brackets-beautify.

If it's possible for you to change this shortcut, that would be great. Otherwise, you can unregister the default Brackets shortcut using KeyBindingManager.removeBinding() before registering your own, though that means users wouldn't be able to access the Brackets functionality that uses it.

In this case, the new functionality ("Split Selection into Lines") is probably not the most commonly used multi-select related feature, so it might be fine for you to just go ahead and override it.

beautify uglifies pre blocks

This is a beautiful extension, but I've found one ugly feature -- when you run it on an HTML file that contains

blocks, it strips all line breaks within the block.

some php codes won't work after beautifyîng html codes.

When I "beautify", i recognise that some of the php codes won't work. This feature should be improved.

Breaks Django templates

It currently breaks some Django templates constructions.

{% if cpage == 'main' %} becomes {% if cpage=='main' %}

but spaces are required in this statement.

Retain comments on current line after Beautify

This might hopefully be something you can tell me how to achieve myself.

I like to add a lot of comments to my code during development, and always place comments at he end of a line where a section starts and ends. Beautify by default moves them to the next line down.

How can I change this behaviour?

Thankyou

js literal / json Array data indentation

Array variable literal/json data isn't properly indented.

Typical code snippet below, jslint error is typically "Expected '[' at column 13, not column 5." and variants

var ct = -1 / 3, 
    st = Math.sqrt(1 - ct * ct),
    c120 = -1 / 2,
    s120 = Math.sqrt(3) / 2,
    tetrahedron = {
        "description": "Tetrahedron",
        "vertices": [
    [0, 0, 1], //top
    [st, 0, ct],
    [st * c120, st * s120, ct],
    [st * c120, -st * s120, ct]
   ],
        "faces": [ 
    [0, 2, 1], [0, 3, 2], [0, 1, 3],
    [1, 2, 3]
   ]
    };

When I paste into http://jsbeautifier.org/ it appears to indent correctly.

It appears that when on a newline the beutifier ignores the indentation of the nested array -ie it doesn't re-indent at all.

Thanks. Please ask if need more info.

ignore php tags

STR:
Open any php file and try to beautify
All code inside "" tag placed in one line.

Could you please ignore this tag.
I'm working on javascript project with php server code and i'ts really annoying to enable/disable "Beautify on Save" option.

Spaces are added to :hover, :after, :before causing these elements to break

example:

label:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

after beautify will be:

label :after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

Skip stuff between @ and {{ ... }} (Laravel Blade templates)

I'm using Brackets to work with Laravel projects, however the blade language used in their views is not something that can be beautified.

Stuff like:

@section('stylesheets')
    <!-- stylesheets here -->
@stop

is being turned into

@section('stylesheets')<!-- stylesheets here -->@stop

If you have multiple blocks (e.g. for head-scripts) it turns it in to one big sentence making it hard to work with.

Is it possible to skip (or adjust) beautifying these parts? Blade files are always ending in .blade.php in case you want to use that to detect whether its a blade file.

A blade file can however contain anything: HTML, PHP, embedded javascripts or even embedded CSS and the Blade-tags.

Live Preview doubles elements when html is beatufied

When I beautify my html, live preview doubles the active tags, only refresh fixes it.