Vue Pug Enhanced

Features

• Code snippets for .vue files with pug template.
• Transform html to pug or pug to html.
• Format pug document or format pug selection.
• Autocomplete.

Supported languages

• Pug/Jade
• Vue

Usage

Transform

1. Create a selection.
2. Press F1 or Ctrl + Shift + P.
3. Run the command named Html to Pug or Pug to Html to transform.

Format Pug

1. Open a pug/jade/vue file.
2. Press Ctrl + Shift + P
3. Enter Format Pug

Autocomplete

Vue Events

Code Snippets

v-for

v-if

Create Elements

Supported settings

vscode-vue-pug-enhanced.useTab

Type: Boolean
Default: false
Description: Indent with Tabs, if false, with spaces.

vscode-vue-pug-enhanced.tabSize

Type: Number
Default: 2
Description: The number of spaces to indent generated files with. Default is 2 spaces. When `fillTab` is false, fill `tabSize` spaces.

vscode-vue-pug-enhanced.doubleQuotes

Type: Boolean
Default: true
Description: Use double quotes for attributes.

vscode-vue-pug-enhanced.omitDiv

Type: Boolean
Default: false
Description: Omit div tag when it has id or class.

vscode-vue-pug-enhanced.omitCommas

Type: Boolean
Default: true
Description: Omit attribute separating commas.

Known issues

• Must undo twice after transform code if you want to recover your code.

Based On

• vetur
• pug
• html2pug
• html2jade
• pug-beautify

References

• formatter-pug
• vscode-html-pug-convertor
• vue-pug-snippets
• vscode-jade-snippets
• vscode-angular-pug

Enjoy!