Use pugbeautify for formatting when lang=pug/jade
See original GitHub issueVisual Studio Code version - 1.8.1 Platform - Windows 8 Vetur version - 0.2.0 Pug beautify version - 1.0.2
Format document option works fine for plain HTML but if I am trying to use lang="pug"
for template, it garbles the template.
Before:
<template lang="pug">
.hello
h1 {{ msg }}
h2 Essential Links
ul
li: a(href='https://vuejs.org', target='_blank') Core Docs
li: a(href='https://forum.vuejs.org', target='_blank') Forum
li: a(href='https://gitter.im/vuejs/vue', target='_blank') Gitter Chat
li: a(href='https://twitter.com/vuejs', target='_blank') Twitter
br
li: a(href='http://vuejs-templates.github.io/webpack/', target='_blank') Docs for This Template
h2 Ecosystem
ul
li: a(href='http://router.vuejs.org/', target='_blank') vue-router
li: a(href='http://vuex.vuejs.org/', target='_blank') vuex
li: a(href='http://vue-loader.vuejs.org/', target='_blank') vue-loader
li: a(href='https://github.com/vuejs/awesome-vue', target='_blank') awesome-vue
</template>
After:
<template lang="pug">
.hello h1 {{ msg }} h2 Essential Links ul li: a(href='https://vuejs.org', target='_blank') Core Docs li: a(href='https://forum.vuejs.org',
target='_blank') Forum li: a(href='https://gitter.im/vuejs/vue', target='_blank') Gitter Chat li: a(href='https://twitter.com/vuejs',
target='_blank') Twitter br li: a(href='http://vuejs-templates.github.io/webpack/', target='_blank') Docs for This Template
h2 Ecosystem ul li: a(href='http://router.vuejs.org/', target='_blank') vue-router li: a(href='http://vuex.vuejs.org/',
target='_blank') vuex li: a(href='http://vue-loader.vuejs.org/', target='_blank') vue-loader li: a(href='https://github.com/vuejs/awesome-vue',
target='_blank') awesome-vue
</template>
I have installed pugbeautify but am not able to figure out how to delegate the document format to pugbeautify from .vue files.
Issue Analytics
- State:
- Created 7 years ago
- Reactions:2
- Comments:8 (5 by maintainers)
Top Results From Across the Web
Pug beautify - Visual Studio Marketplace
Usage. Press F1 and run the command named Beautify pug/jade . Supported languages. Jade; Pug. Supported ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
To add to that, I was also able to use jsbeautify for the Vue files… That works well with html, js and css.
Closing in favor of #82.