Versions:
beautify - 0.4.1
vsCode - 1.5.2

Settings:

"beautify.onSave": true,
    "beautify.JSfiles": [
        "html",
        "js",
        "json",
        "jsbeautifyrc",
        "jshintrc"
    ]

Before Formatting:

After Formatting:

As you can see, the alignment/formatting of js code inside the html file is not working. Where as if its in a .js file, its working like charm.

Why my'.hbs'can not be beautify... please help.

the chekEmail function and checkPhone function in the same level, but have indent.
how can I do with it?

Hi, thanks for your extension. it's really useful.

But there is a problem, I'm using Vash and I defined .vash extension to be an html file (because vscode doesn't support vash yet). also I using your extension as well.

In vash file when I try to beautify, the js blocks combines together. (I know it's not a real bug, but not really good for me), btw when I try to beautify the same content using jsbeautifier.org, the result is too better and more readable (of course the result is not perfect).

Is there any way to prevent combining vash blocks on beautify?

Example of vash (that I wish after beautify still I see this structure)

@html.extend('layout',function(model){
    @html.block('body',function(model){
        <h1>@model.title</h1>
        <p>@model.content</p>
    })
})

Result (using VSCodeBeautify)

@html.extend('layout',function(model){ @html.block('body',function(model){
<h1>@model.title</h1>
<p>@model.content</p>
}) })

Result (using jsbeautifier.org)

@html.extend('layout', function(model) {
    @html.block('body', function(model) { <
        h1 > @model.title < /h1> <
            p > @model.content < /p>
    })
})

For more complex structure the result will be really unreadable.

I was testing js beautify on typescript files .
the results were pretty good.

in the pr #37 i solved the issue of manually selecting js for formatting every time.

without this ,it would always popup a selector menu to select from js , html & css.

I am using beautify 0.0.3 with VSCode 0.10.3 and getting
"No handler found for the command: 'HookyQR.beautify'" warning whenever trying to run Beautify. Extention isn't working as well through it works if I used js-beautify through cmdline.

When formatting code via context menu > 'Format Code', the last line of the file is being duplicated.

This was occurring in both html and js files.

Had to uninstall the extension so can't provide any examples

Hey there,

although I defined "newline_between_rules": true in my .jsbeautifyrc, the Beautify extension removes those new lines and thus would transform this

.state:hover {
    .btn-variant();

    &.state-lead {
        .btn-variant(warning);
    }

    &.state-proposed {
        .btn-variant(info);
    }
}

into this:

.state:hover {
    .btn-variant();
    &.state-lead {
        .btn-variant(warning);
    }
    &.state-proposed {
        .btn-variant(info);
    }
}

… which is not what I wanted, of course. Did I configure something wrong or is this a bug?

Here's my complete .jsbeautifyrc:

{
    "end_with_newline": true,
    "indent_level": 0,
    "indent_with_tabs": true,
    "max_preserve_newlines": 2,
    "preserve_newlines": true,
    "wrap_line_length": 0,
    "js": {
        "brace_style": "collapse",
        "break_chained_methods": false,
        "indent_with_tabs": true,
        "jslint_happy": false,
        "jslint_happy_align_switch_case": false,
        "space_after_anon_function": false,
        "space_before_conditional": true,
        "space_in_empty_paren": false,
        "space_in_paren": false
    },
    "html": {
        "brace_style": "collapse",
        "wrap_attributes_indent_size": 4,
        "unformatted": ["a", "sub", "sup", "b", "i", "u"]
    },
    "css": {
        "convert_quotes": "single",
        "newline_between_rules": true,
        "selector_separator_newline": true,
        "space_around_selector_separator": true
    }
}

Mac os, visual code up to date, in the .jsbeautifyrc, "space_in_paren": true, has no effect.

warning from [eslint].

that's correct

beautify: 0.1.8
vs code: 1.4.0
os: macOS Sierra 10.12 Beta

I know VS Code does some beautification as text it entered into the editor but a beautify on save feature would be great for files that are opened but not changed. Can this be added to this extension or is it more suited as a feature in the main VSCode app? If it is something easy to add then it would be great to have it in your extension.

Can't Correct format .ejs <% %>

in my cordova js app, in the index.html file, when I call beautify it copies the entire content from the index.html to the end of file again.
I attached the file with the cloned content
index.html.zip

add editorconfig support

I've had a look through the documentation and the issues here but I can't seem to find how to add a single global .jsbeautifyrc file for all projects. Is this possible? In particular I prefer no space between an anonymous function and its parentheses. Thank you

I don't know if this can be solved within the scope of this project, since it seems to be typescript specific. But whenever i place a use something like: let myArray :Array<string> = [] and i beatify it it changes to 'let myArray :Array < string > = []'

I am trying to make VSCodeBeautify take my .jsbeautifyrc file into account inside a Node.JS project.
I cannot seem to find the right place.
I've tried putting it at the root of the folder opened in VSCode.
I've tried putting it inside the .vscode folder.
I've tried putting it at the same level as the package.json.
I've tried restarting VSCode couple times.

None of theses locations seems to do anything.

Here's my .jsbeautifyrc file

// Documentation: https://github.com/einars/js-beautify/
{
    "indent_size": 2,
    "indent_char": " ",
    "eol": "\n",
    "indent_level": 0,
    "indent_with_tabs": false,
    "preserve_newlines": true,
    "max_preserve_newlines": 10,
    "jslint_happy": false,
    "space_after_anon_function": false,
    "brace_style": "collapse",
    "keep_array_indentation": false,
    "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",
    "wrap_attributes_indent_size": 4,
    "end_with_newline": false
}

Can you add your license file to the project root directory

Format for #region / #endregion command became

region

endregion

and it don't work please fix it

Thanks

Enabe Enable js-beautify in VS Code

Why I haven't any keyboard shortcut (Alt+Shift+F doesn't work) in my VSCode?

Hi, when I use beautify in visual studio code on mac the comment tag goes into the line, I would like to have inline as the current code. Is possible to change it? Any ideas?

current:

</li><!-- /Dropdown -->

after beautify

</li>
<!-- /Dropdown -->

I tried to unminify the deafult semantic.min.css from semantic-ui.com. After 5 minutes of trying VSCode just crashed.
It's a big 537 kb css file though
semantic.min.css.txt

beautifier/js-beautify@b58562b

They should have made this the default instead of 'force' or 'auto'.

I prefer tabs with everything I edit, but Beautify converts these to spaces when I beautify my file. Most of the time I am editing loose files around my filesystem, so I can't create a .jsbeautifyrc.

Is there a way/can there be a feature to use the spacing preferences set up within VS Code?

Either this, or a way to have default preferences set up in settings.json?

Dear developer,

Could you pleae try to beautify the following less file:

@sbtChatMessageDialogFooterHeight: 80px;
.sbtChatMessagePopupList {
    overflow: auto;
    height: ~"calc( 100% - @{sbtChatMessageDialogFooterHeight} )";
}

Once saved it removes very important space here:
height:~"calc(

that leads to LESS compiler error.

Could you please solve that?

I had to deactive your extension temporarily.

Looking forward to having it back

Thanks!

Petr.

Basically, it's the same as JS, with some exceptions:

private const int SPIF_SENDWININICHANGE = 2; is beautifyied to

private
const int SPIF_SENDWININICHANGE = 2;

but should remain the same.

Same thing for @"Control Panel\Desktop" beautifyied as @ "Control Panel\Desktop"

There might be more, but I didn't found them.

Why does my code get uglified and broken on auto save?

This:

return ( 
    <div>
      <SearchBar />
    </div>
);

becomes this:

return ( <
    div >
    <
    SearchBar / >
    <
    /div>
  );

{
    "beautify.onSave": true
}

Am I missing something in the settings? Or does it not work with jsx?

Manually formatting with Shift + Opt + F works fine though...

can't only beautify the selected code like atom, instead it will beautify the whole file

Adding "beautify.JSfiles": [] to settings.json doesn't stop Beautify from formatting js files

From previous editors I always got a space before and after > in css.

This works on http://jsbeautifier.org/ :

.main.row > .column.segment {
  width: 100 % ;
  flex: 1;
  overflow: auto;
  margin - bottom: 0!important;
}

but not with beautifier in vscode:

.main.row>.column .segment {
  width: 100%;
  flex: 1;
  overflow: auto;
  margin-bottom: 0 !important;
}

I tried with only the "indent_size": 2, and also all default settings from js-beautify git hub instruction.

I would like to just select the text i want , and then apply just to that selection the beautify.

let refType = doc.languageId;

if (refType === 'javascript') refType = 'js';
if (['json', 'js', 'html', 'css'].indexOf(refType) === -1) return;

It looks like the above lines of code need to be altered to used the "beautify.HTMLfiles", "beautify.CSSfiles", "beautify.JSfiles" user settings. I have the following in my settings file but the saving the handlebars file does not run the beautifier:

"beautify.HTMLfiles": [
    "htm",
    "html",
    "hbs"
]

Would it be possible to allow .jade files formatting as for jade-beautify?

I'm trying to figure out why this extension seems to ignore my .jsbeautifyrc file settings for scss files. Right now, I have this:

{
    "end_with_newline": true,
    "indent_level": 0,
    "indent_with_tabs": true,
    "max_preserve_newlines": 2,
    "preserve_newlines": true,
    "wrap_line_length": 0,
    "newline_between_rules": true,
    "convert_quotes": "single",
    "js": {
        "brace_style": "collapse",
        "break_chained_methods": false,
        "indent_with_tabs": true,
        "jslint_happy": false,
        "jslint_happy_align_switch_case": false,
        "space_after_anon_function": false,
        "space_before_conditional": true,
        "space_in_empty_paren": false,
        "space_in_paren": false
    },
    "html": {
        "brace_style": "collapse",
        "wrap_attributes_indent_size": 4,
        "unformatted": ["a", "sub", "sup", "b", "i", "u"]
    },
    "css": {
        "convert_quotes": "single",
        "newline_between_rules": true,
        "selector_separator_newline": true,
        "space_around_selector_separator": true,
        "indent_size": 16
    }
}

So I have newline_between_rules set to true by default. But when I save my scss file, it removes all the new lines. Also it doesn't convert my quotes to single quotes. I have the .jsbeautifyrc file in the same directory as my .scss file. What am I doing wrong?

Also, this extension seems to be Beautifying my .scss files on save even if I remove them from the array:

"beautify.CSSfiles": [
    "css"
],

Also I tried this:

"beautify.onSaveIgnore": [
        //don't beautify any file in any 'minified' directory, at any depth:
        "**/minified/**",
        //don't minify any file that contains '.min.', '_min.', '-min.' in the filename (This is the default ignore setting):
        "**/*+(.|_|-)min.*",
        "scss"
    ]

And my SCSS files are STILL being Beautified on save.

Can anyone give me some insight here? Am I hitting some bugs or just completely misunderstanding how this thing works?

I tried adding the .vue extension to beautify.onSave but this warns me that this isnt an acceptable value and it won't auto beautify vue files on save. Manually running beautify does work.

When in set
"beautify.onSave": true

on save vscode starts to constantly save and change the file repedeatly times. Only way to stop it, is to switch to another file.
This is really annoying since the file is constantly marked as saved/nonsaved and also clears the undo history.

Currently reads:
"Couldn't determine type to beautify, pleae choose."
Please is misspelled.

• OS Version: OS X El Capitan 10.11.4
• VSCode Version: 1.1.0-insider
  
• onSave: false
  
• onSave: true
  

in html pages the formatter automatically added a space at the end of all the property values

After formatting see the input type attribute

it's a bug
please fix this

How can I help you to support .erb files?

Hi,

Seems like your extension doesn't support SASS/SCSS files, right, or I missed something?

I'm using latest version of VSCode & VSCodeBeautify

Thanks !

It would be good if I could place the .jsbeautifyrc-file in the .vscode-folder together with other extension files. The root would be cleaner.

However I'm not sure if .vscode is a standard folder but "Spelling and Grammar Checking" by Sean McBreen is using that path.

Versions

• beautify - 0.1.9
• vscode - 1.5.1
• os - ubuntu 16.04.1

Steps to reproduce

• f1
• beautify

Result
`command 'HookyQR.beautify' not found

Screenshot

I work with ReactNative, and I see Beautify destroys JSX code when it's embedded in the .js file

Seeing as how Visual Studio Code is such a great Typescript editor, it'd be great to be able to beautify Typescript files.

If I have this section in my .jsbeautifyrc file:

    "html": {
        "allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg"]
         }

I still get prompted every time I try to format an xml file:

Couldn't determine type to beautify, please choose.

Hello,
I wirte example before and after code formating:
before:
import { Mongo } from 'meteor/mongo;
after:

import { 
  Mongo
} from 'meteor/mongo;

This problem occurred also available for atom verssion.

Best Regards,
Paul

How can I configure it to don on those tags as it is done on div and others.

        <span>
         <span>
          <span>This is a </span>
         </span>
        </span>

I've run into a small issue with this extension regarding commented-out code. Say I have a block of code like this:

const a
const b
// const c
const d
const e

Upon running Beautify, it is formatted to look like this:

const a
const b
  // const c
const d
const e

I don't want the commented code to be indented, I want it to remain in line with the code surrounding it. Is there any way to prevent this behavior?