Wrong indent char when beautify <template lang='pug'> part in vue files.

[suienzan]

Description

When beautify <template lang='pug'> part in .vue files, indent char will be force to tab.

Input Before Beautification

This is what the code looked like before:

<template lang='pug'>
div
··div
</template>

Expected Output

The beautified code should have looked like this:

<template lang='pug'>
div
··div
</template>

Actual Output

The beautified code actually looked like this:

<template lang='pug'>
div
» div
</template>

It changes the two space to a tab. While if use file extension .pug, the output will be as expected.

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/midori-tooyama/8e7909f1b98bc54677cc0cb8a9ffd2f6

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 by executing Atom Beautify: Help Debug Editor command in Atom and added link for debug.md Gist to this issue

[amandamcg]

+1, I can confirm I am seeing this same issue. I tried adding additional general settings of:

general:
      indent_char: " "
      indent_size: 4

which did not fix the problem.

(If you need a workaround until this bug is fixed, you can also install tabs-to-spaces and have it run after the code is beautified.)

[10aboskin]

I was able to fix this a little jankily by changing the default values in the code

In ~/.atom/packages/atom-beautify/node_modules/pug-beautify/index.js, at lines 6-9, I changed:

var fill_tab = (typeof opt.fill_tab !== 'undefined') ? opt.fill_tab : true;
var omit_div = (typeof opt.omit_div !== 'undefined') ? opt.omit_div : false;
var tab_size = (typeof opt.tab_size !== 'undefined') ? opt.tab_size : 4;
var debug = (typeof opt.debug !== 'undefined') ? opt.debug : false;

To:

var fill_tab = (typeof opt.fill_tab !== 'undefined') ? opt.fill_tab : false;
var omit_div = (typeof opt.omit_div !== 'undefined') ? opt.omit_div : false;
var tab_size = (typeof opt.tab_size !== 'undefined') ? opt.tab_size : 2;
var debug = (typeof opt.debug !== 'undefined') ? opt.debug : false;

so the default fill_tab option is now false and the tab_size is 2 (which you can change to your preference)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If this is still an issue, please add a comment. It will be closed if no further activity occurs. Thank you for your contributions.