Vetur: Depend on js-beautify directly

Created on 6 Mar 2017 · 23Comments · Source: vuejs/vetur

vscode-html-languageservice depends on js-beautify directly. However, it's not aware of scss, less regions. It's also causing problems like #77.

js-beautify actually supports scss and less, so vetur will just depend on it directly.

Overall:

html/css/scss/less/js formatting will be supported using js-beautify
Have a default setting for each supported languages, but also expose settings passing to js-beautify, for example:
- "vetur.vue-html.format.config": ".htmlbeautifyrc"
- "vetur.css.format.config": ".cssbeautifyrc"
- "vetur.js.format.config": ".jsbeautifyrc"
Other languages don't have any reliable formatters yet, so just disable them all
If someone is interested in having formatting for a specific language, open a new issue with link to an actively maintained formatter

feature-request formatting

Source

octref

👍5

Most helpful comment

I really need the formatter too !~~~~

zengyiqun on 10 Mar 2017

👍11 😄5 🎉4 😕3 ❤2

All 23 comments

Will use https://github.com/mrmlnc/vscode-pugbeautify for jade/pug.

octref on 6 Mar 2017

wonderful~! waiting for the new version~~

beeplin on 6 Mar 2017

Formatters are temporarily disabled until this feature is addressed.

octref on 6 Mar 2017

Looking forward to the new version..
I really need the formatter..

zema1 on 9 Mar 2017

👍6 😕3 🎉3 😄3 ❤2

I really need the formatter too !~~~~

zengyiqun on 10 Mar 2017

👍11 😄5 🎉4 😕3 ❤2

sebastianmacias on 12 Mar 2017

@octref Couldn't you just disable the formatter per default and make it accessible per workspace settings? I don't think that the added new lines are such a big problem. Maybe just add it as "experimental" feature.

christianmalek on 13 Mar 2017

It was working fine for basic setups, wasn't it? Would like to see it enabled back.

rafaelpimpa on 13 Mar 2017

This is top on my list. Give me a day or two to work on it.

octref on 13 Mar 2017

❤2 🎉2 👍1

So here is how it goes. Notice html/css/js/scss/less are all formatted, whereas sass/stylus/pug are left alone.

format

Will add initial indentation to the template part and remove the initial indentation on js and make a release.

octref on 14 Mar 2017

🎉1

Stole these config from https://github.com/victorporof/Sublime-HTMLPrettify

const htmlOptions = {
  brace_style: 'collapse', // [collapse|expand|end-expand|none] Put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or just put end braces on own line, or attempt to keep them where they are
  end_with_newline: false, // End output with newline
  indent_char: ' ', // Indentation character
  indent_handlebars: false, // e.g. {{#foo}}, {{/foo}}
  indent_inner_html: false, // Indent <head> and <body> sections
  indent_scripts: 'keep', // [keep|separate|normal]
  indent_size: 2, // Indentation size
  max_preserve_newlines: 0, // Maximum number of line breaks to be preserved in one chunk (0 disables)
  preserve_newlines: true, // Whether existing line breaks before elements should be preserved (only works before elements, not inside tags or for text)
  unformatted: ['a', 'span', 'img', 'code', 'pre', 'sub', 'sup', 'em', 'strong', 'b', 'i', 'u', 'strike', 'big', 'small', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'], // List of tags that should not be reformatted
  wrap_line_length: 0 // Lines should wrap at next opportunity after this number of characters (0 disables)
};

const cssOptions = {
  end_with_newline: false, // End output with newline
  indent_char: ' ', // Indentation character
  indent_size: 2, // Indentation size
  newline_between_rules: true, // Add a new line after every css rule
  selector_separator: ' ',
  selector_separator_newline: true // Separate selectors with newline or not (e.g. 'a,\nbr' or 'a, br')
};

These will be used as initial default, let me know what you agree & don't agree with. (Indentation size & char is read from VSCode config).
I'll add capability to specify your own js-beautify config later.

octref on 14 Mar 2017

👍4

Check out 0.5.3 and let me know how it works.

Still yet to be done:

[ ] allow to specify own options
[ ] pug formatter

octref on 16 Mar 2017

👍2

pressing shift-alt-f for multiple times will increase the indentation of html  comments:

became

and became

beeplin on 16 Mar 2017

👍1

0.5.4 preserves new lines for html, and uses force-aligned to align attributes as @beeplin suggested in #77

Before:

After:

Seems css/scss/less preserve new lines option is being added this weekend, https://github.com/beautify-web/js-beautify/pull/1146

I'll add it once it lands in js-beautify.

octref on 16 Mar 2017

❤1 🎉1 😄1 👍1

v0.5.4 is wonderful :)

beeplin on 16 Mar 2017

0.5.6 brings CSS preserve_newlines from js-beautify, and is set as default:

format2

octref on 20 Mar 2017

❤1 🎉1 😄1 👍1

Thanks to @beeplin for submitting the bug, but please, please, please @octref find a way to be able to specify:
"html.format.wrapAttributes": "auto"
as you mentioned previously in this thread (allow to specify own options).
Thank you for your work!

danikane on 20 Mar 2017

@danikane Will do soon.

octref on 21 Mar 2017

@danikane This is already in master so closing. Also auto is set as default but people can set wrap_attributes to force-aligned if they want. Will be available in 0.6.

octref on 17 Apr 2017

Many thanks!

danikane on 17 Apr 2017

@octref Any news on status of pugbeautify integration?