Depend on js-beautify directly

octref commented 7 years ago

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

octref commented 7 years ago

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

beeplin commented 7 years ago

wonderful~! waiting for the new version~~

octref commented 7 years ago

Formatters are temporarily disabled until this feature is addressed.

zema1 commented 7 years ago

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

zengyiqun commented 7 years ago

I really need the formatter too !~~~~

sebastianmacias commented 7 years ago

+1

christianmalek commented 7 years ago

@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.

rafaberaldo commented 7 years ago

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

octref commented 7 years ago

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

octref commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

Check out 0.5.3 and let me know how it works.

Still yet to be done:

[ ] allow to specify own options
[ ] pug formatter

beeplin commented 7 years ago

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

octref commented 7 years ago

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.

beeplin commented 7 years ago

v0.5.4 is wonderful :)

octref commented 7 years ago

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

format2

danikane commented 7 years ago

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!

octref commented 7 years ago

@danikane Will do soon.

octref commented 7 years ago

@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.

danikane commented 7 years ago

Many thanks!

x8x commented 6 years ago

@octref Any news on status of pugbeautify integration?

octref commented 6 years ago

@x8x I forgot that. You can track https://github.com/vuejs/vetur/issues/527.

x8x commented 6 years ago

@octref Amazing! Thx! :-)

vuejs / vetur

Depend on js-beautify directly #82