Depend on js-beautify directly #82

octref · 2017-03-06T04:24:52Z

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

The text was updated successfully, but these errors were encountered:

octref · 2017-03-06T04:29:26Z

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

beeplin · 2017-03-06T06:52:36Z

wonderful~! waiting for the new version~~

octref · 2017-03-06T16:41:08Z

Formatters are temporarily disabled until this feature is addressed.

zema1 · 2017-03-09T13:49:52Z

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

zengyiqun · 2017-03-10T00:25:28Z

I really need the formatter too !~~~~

sebastianmacias · 2017-03-12T07:21:09Z

+1

christianmalek · 2017-03-13T14:05:25Z

@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 · 2017-03-13T17:59:23Z

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

octref · 2017-03-13T18:45:27Z

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

octref · 2017-03-14T05:16:00Z

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

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

octref · 2017-03-14T05:18:39Z

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 · 2017-03-16T12:33:18Z

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 · 2017-03-16T16:30:03Z

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

became

and became

octref · 2017-03-16T16:32:32Z

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, beautifier/js-beautify#1146

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

beeplin · 2017-03-16T16:36:08Z

v0.5.4 is wonderful :)

octref · 2017-03-20T15:05:46Z

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

danikane · 2017-03-20T19:30:25Z

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 · 2017-03-21T02:18:01Z

@danikane Will do soon.

octref · 2017-04-17T18:00:59Z

@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 · 2017-04-17T18:04:31Z

Many thanks!

x8x · 2017-11-09T03:59:17Z

@octref Any news on status of pugbeautify integration?

octref · 2017-11-09T18:22:59Z

@x8x I forgot that. You can track #527.

x8x · 2017-11-09T22:40:20Z

@octref Amazing! Thx! :-)

octref added the lsp:formatting label Mar 6, 2017

This was referenced Mar 6, 2017

Use pugbeautify for formatting when lang=pug/jade #20

Closed

Code format for sass in .vue file #68

Closed

format bugs: html attr wrap #77

Closed

format bugs: not supporting stylus in <style> #78

Closed

octref added the feature-request label Mar 6, 2017

octref mentioned this issue Mar 6, 2017

in@0.5.0, every time format will add a new line! #84

Closed

This was referenced Mar 7, 2017

New line before next CSS selector every beautify run HookyQR/VSCodeBeautify#114

Closed

New line before next CSS selector every beautify run beautifier/js-beautify#1152

Closed

Cannot format *.vue files #86

Closed

octref mentioned this issue Mar 16, 2017

CSS error checking inactive #91

Closed

octref closed this as completed Apr 17, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Depend on js-beautify directly #82

Depend on js-beautify directly #82

octref commented Mar 6, 2017

octref commented Mar 6, 2017

beeplin commented Mar 6, 2017

octref commented Mar 6, 2017

zema1 commented Mar 9, 2017

zengyiqun commented Mar 10, 2017

sebastianmacias commented Mar 12, 2017

christianmalek commented Mar 13, 2017 •

edited

Loading

rafaberaldo commented Mar 13, 2017

octref commented Mar 13, 2017

octref commented Mar 14, 2017 •

edited

Loading

octref commented Mar 14, 2017 •

edited

Loading

octref commented Mar 16, 2017 •

edited

Loading

beeplin commented Mar 16, 2017

octref commented Mar 16, 2017

beeplin commented Mar 16, 2017

octref commented Mar 20, 2017

danikane commented Mar 20, 2017 •

edited

Loading

octref commented Mar 21, 2017

octref commented Apr 17, 2017

danikane commented Apr 17, 2017

x8x commented Nov 9, 2017

octref commented Nov 9, 2017

x8x commented Nov 9, 2017

Depend on js-beautify directly #82

Depend on js-beautify directly #82

Comments

octref commented Mar 6, 2017

octref commented Mar 6, 2017

beeplin commented Mar 6, 2017

octref commented Mar 6, 2017

zema1 commented Mar 9, 2017

zengyiqun commented Mar 10, 2017

sebastianmacias commented Mar 12, 2017

christianmalek commented Mar 13, 2017 • edited Loading

rafaberaldo commented Mar 13, 2017

octref commented Mar 13, 2017

octref commented Mar 14, 2017 • edited Loading

octref commented Mar 14, 2017 • edited Loading

octref commented Mar 16, 2017 • edited Loading

beeplin commented Mar 16, 2017

octref commented Mar 16, 2017

beeplin commented Mar 16, 2017

octref commented Mar 20, 2017

danikane commented Mar 20, 2017 • edited Loading

octref commented Mar 21, 2017

octref commented Apr 17, 2017

danikane commented Apr 17, 2017

x8x commented Nov 9, 2017

octref commented Nov 9, 2017

x8x commented Nov 9, 2017

christianmalek commented Mar 13, 2017 •

edited

Loading

octref commented Mar 14, 2017 •

edited

Loading

octref commented Mar 14, 2017 •

edited

Loading

octref commented Mar 16, 2017 •

edited

Loading

danikane commented Mar 20, 2017 •

edited

Loading