Vetur: Could not format vue file correctly

[cangzhang]

As shown in the gif, other extensions have been disabled.

[octref]

Will look into it. Probably a bug from js-beautify.

[csicky]

Just came here to report exactly this. It indents parts of html on each save.

THX for making this extension, it greatly improves Vue.js development.

[c7ming]

@octref Any progress of this issue?
I found that the issue only happens when html contains ‘mustache’.

[adamgoose]

I'm experiencing something similar. Screencast: http://d.enge.me/qEW4

Truncated code from said screencast:

                    <h4 class="media-heading">
                        {{ ticket.title }}
                        <small class="pull-right">{{ ticket.created_at | timestamp }}</small>
                    </h4>
                    <button class="btn btn-xs"
                            :class="{'btn-success': form.public, 'btn-danger': !form.public}"
                            @click="form.public = !form.public">
                        <span v-show="!form.public">
                            <i class="fa fa-lock"></i> Private
                        </span>
                        <span v-show="form.public">
                            <i class="fa fa-unlock"></i> Public
                        </span>
                    </button>

[adamgoose]

Of course, setting "html.format.enable": false prevents this issue from happening.

[octref]

@adamgoose

Of course, setting "html.format.enable": false prevents this issue from happening.

Sorry that's a bug that has been fixed on master. config under html shouldn't affect vetur now...

js-beautify is working as expected -- this bug comes from mixing VSCode's html formatter with js-beautify. Will push a fix tonight with formatter options for 0.6 release.

[tziuka]

@octref Hi, any update on the issue? Thank you

[octref]

This is not fixed with 0.6 yet. I'll look into it later...

[adamgoose]

Any updates on this? When you made it so that html.format.enable no longer affects vetur, my code is continuously indented improperly, and I can't turn it off! ><

[csicky]

@octref Please don't forget about this :)

[HADB]

Something goes wrong when set "vetur.format.html.wrap_attributes" to "force-expand-multiline".

[octref]

@HADB Can you try again with 0.6.5. Or post the code.

@adamgoose Your problem is fixed with 0.6.5.

@cangzhang The original issue is not resolved yet due to js-beautify's bug.

[HADB]

@octref still not work in 0.6.7.

works fine in force-aligned:

<template>
    <div class="gz-uploader"
         @click="uploaderClicked">
        <input ref="fileInput"
               v-if="inputType===0"
               type="file"
               :multiple="multiple"
               @change="fileInputChanged">
        <div class="bottom-area">
            <span>上传图片</span>
        </div>
    </div>
</template>

not good in force-expand-multiline:

<template>
    <div
        class="gz-uploader"
        @click="uploaderClicked"
    >
        <input
            ref="fileInput"
            v-if="inputType===0"
            type="file"
            :multiple="multiple"
            @change="fileInputChanged"
        >
            <div class="bottom-area">
                <span>上传图片</span>
            </div>
            </div>
</template>

expected in force-expand-multiline:

<template>
    <div
        class="gz-uploader"
        @click="uploaderClicked"
    >
        <input
            ref="fileInput"
            v-if="inputType===0"
            type="file"
            :multiple="multiple"
            @change="fileInputChanged"
        >
        <div class="bottom-area">
            <span>上传图片</span>
        </div>
    </div>
</template>

[octref]

@HADB Then that's a bug for js-beautify which I can't help much with. force-aligned seems to work well so maybe just stick to it.

[HADB]

@octref OK, thanks

[HADB]

@octref Does this problem link to this issue? https://github.com/beautify-web/js-beautify/issues/1103

[octref]

Opened an issue for force-expand-multiline: https://github.com/beautify-web/js-beautify/issues/1186

[csicky]

"vetur.format.html.wrap_attributes": "auto", "vetur.format.css.preserve_newlines": true
These are not working. force and force-aligned only are working but both are too extreme. Pushing with these enabled would make the entire team jump on me. Most important, if it does not work to auto align only if needed (auto setting), at least to let me insert newlines. It's so frustrating to format a big component with many attributes only to save and lose it.

[joezimjs]

Why does vetur take on so much of the formatting on it's own? Can't you just find a way to offload formatting to the other appropriate formatters (e.g. letting VS Code's HTML formatter format the HTML parts, let my installed Prettier plugin format the JS, let a stylus formatter plugin format the style tag with a lang=stylus attribute, etc.). Trying to handle all the formatting yourself requires you to work with formatters for 10+ language syntaxes, which doesn't sound maintainable.

[octref]

@joezimjs VS Code's HTML formatter uses the same formatter as Vetur do (js-beautify), so it has this problem too.

[ffxsam]

This might be related, but I'm still having issues. This template code:

        <el-button type="text" size="small">Edit</el-button>
        <el-button type="text" size="small">Refresh Count</el-button>
        <el-button type="text" size="small">Delete</el-button>

gets formatted into this mess:

        <el-button
          type="text"
          size="small"
        >Edit</el-button>
          <el-button
            type="text"
            size="small"
          >Refresh Count</el-button>
            <el-button
              type="text"
              size="small"
            >Delete</el-button>

Relevant settings:

 "html.format.wrapLineLength": 80,
  "vetur.format.html.wrap_line_length": 80,
  "vetur.format.html.wrap_attributes": "force-expand-multiline",

[octref]

I don't see any hope in js-beautify fixing it soon.
New release is out with prettier.

You can see the changelog, but just to reiterate, js-beautify is deprecated. I plan to direct effort to making prettier support html and eventually removing js-beautify.

[ffxsam]

@octref Thank you for your work & time on this!! I _just_ saw this and tried the format command in a Vue component. Sure enough, the HTML was left alone, and all the script code was prettified.

[sosoriov]

@octref thanks for the info. Plugins have been updated. I use this configuration and it works perfectly.

"vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // js-beautify-html settings, see https://github.com/vuejs/vetur/blob/master/server/src/modes/template/services/htmlFormat.ts
      "wrap_attributes": "force-aligned"
    }
  }

[ffxsam]

I wouldn't say it works perfectly, though. The indentation of js-beautify-html is totally broken. This code is not a bunch of nested items:

[joezimjs]

@ffxsam I wonder if it's because of the self-closing tags (e.g. <menu-icon ... />). Does it work right if you use a separate closing tag? (e.g. <menu-icon ...></menu-icon>)