Atom-beautify: Vue nested templates formatted incorrectly

[hDeraj]

Description

The results of beautification are not what I expect.

Input Before Beautification

This is what the code looked like before:

<template>
<div>
  <template v-for="item in items">
    <p>{{item}}</p>
  </template>
  <p>this should be indented</p>
</div>
</template>

Expected Output

The beautified code should have looked like this:

<template>
<div>
  <template v-for="item in items">
    <p>{{item}}</p>
  </template>
  <p>this should be indented</p>
</div>
</template>

Actual Output

The beautified code actually looked like this:

<template>
<div>
  <template v-for="item in items">
    <p>{{item}}</p>
</template>
  <p>this should be indented</p>
</div>
</template>

Steps to Reproduce

1. Add code to Atom editor
2. Run command Atom Beautify: Beautify Editor
3. This beautified code does not look right!

Debug

Here is a link to the debug.md Gist: https://gist.github.com/hDeraj/b2cc699ac6a1caa4de9ff40a146ede90

Checklist

I have:

• [x] Tried uninstalling and reinstalling Atom Beautify to ensure it installed properly
• [x] Reloaded (or restarted) Atom to ensure it is not a caching issue
• [x] Searched through existing Atom Beautify Issues at https://github.com/Glavin001/atom-beautify/issues
  so I know this is not a duplicate issue
• [x] Filled out the Input, Expected, and Actual sections above or have edited/removed them in a way that fully describes the issue.
• [x] Generated debugging information and added link for debug.md Gist to this issue

[joturako]

Hi, I used vue-format and it doesn't have this problem with nested template tags. Unfortunately it doesn't have the option to beautify on save.

Is there any chance it will be added in the list of supported vue beautifiers?

[prettydiff]

This might be similar to https://github.com/Glavin001/atom-beautify/issues/1175

[ericcirone]

I have this same issue. Would love a fix.

[Glavin001]

The implementation for vue-format and Atom-Beautify's vue-beautifier are different, although they follow the same idea. See:

• https://github.com/LeslieYQ/vue-format/blob/master/lib/vue-format.coffee#L27-L66
• https://github.com/Glavin001/atom-beautify/blob/master/src/beautifiers/vue-beautifier.coffee#L14-L48

I would be happy to review and merge a Pull Request from someone else implementing a fix. Let me know if you have any questions!

[Glavin001]

I've switched from third-party-bug to bug because the code for vue-beautifier resides within Atom-Beautify. It will eventually be separated from the core after #1174 is complete.

[kaven276]

 12   beautify: (text, language, options) ->
 13     return new @Promise((resolve, reject) ->
 14       #regexp = /(<(template|script|style)[^>]*>)((\s|\S)*?)<\/\2>/gi
 15       regexp = /(^<(template|script|style)[^>]*>)((\s|\S)*?)^<\/\2>/gim

• <template> and </template> only at start of a line will take as vue template boundary, all nested template that have indent will treat as normal html tags.
• so as <script></script>

the following code do not have nested problem

<template>
  <template>
  ...
  </template>
</template>

<script>
document.write('<script>alert()</script>');
</script>

[Glavin001]

Merged PRs https://github.com/Glavin001/atom-beautify/pull/1437 and https://github.com/Glavin001/atom-beautify/pull/1577

[Glavin001]

Published to v0.29.19