Format document doesn't format

[ajmas]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: macOS 10.13.3 - MacBookAir6,2
• Vetur version: 0.11.7
• VS Code version: 1.20.0

Problem

Inside a .vue file, context-clicking and selecting 'format document' has no effect. Have tried selecting the code in a <template> or <script> block and that doesn't help either.

The only work around is to create a temp.js and temp.html file, paste in the code from the appropriate code blocks and then format there, and the copy/paste the code back into the .vue file. Very time consuming and usually leads to formatting not being done by our programmers :(

Reproducible Case

Any single file .vue file with template and script blocks. For example (bad formatting intended):

<template>
<div>
<h1>Hello {{name}}</h1>
           <div>This should really be
<span>formatted</span>
 </div>
</div>
</template>

<script>
export default {
  props: {
    name: {
             type: String,
default:                  'no name'
          }
}

}
</script>

[octref]

We only have a formatter for the whole document. So you can't select a part of the document and format.

HTML formatter is disabled by default. See: https://vuejs.github.io/vetur/formatting.html

[octref]

You need to put them this way:

{
  "vetur.format.defaultFormatter.css": "prettier",

  // Default formatter for <template> region
  "vetur.format.defaultFormatter.html": "none",

  // Default formatter for <script> region
  "vetur.format.defaultFormatter.js": "prettier",

  // Default formatter for <style lang='less'> region
  "vetur.format.defaultFormatter.less": "prettier",

  // Default formatter for <style lang='postcss'> region
  "vetur.format.defaultFormatter.postcss": "prettier",

  // Default formatter for <style lang='scss'> region
  "vetur.format.defaultFormatter.scss": "prettier",

  // Default formatter for <style lang='stylus'> region
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",

  // Default formatter for <script> region
  "vetur.format.defaultFormatter.ts": "prettier"
}

[ajmas]

Should the documentation make this clear?

[octref]

Here is the doc for changing settings: https://code.visualstudio.com/docs/getstarted/settings

[ajmas]

Sorry, what I meant is that going from the example on https://vuejs.github.io/vetur/formatting.html , it is not obvious that you need to decompose the default configuration into single line entries, at least for someone coming onto vetur for the first time.

[octref]

I updated the doc: https://vuejs.github.io/vetur/formatting.html

[Dacredible]

@octref and then how can I configure the format settings for prettier css to indent 4 spaces

[peerbolte]

@octref I have the same issue as @Dacredible Vetur formats my scss code to 2 spaces, while I would like to have four spaces (html and javascript, both indent to 4)

[octref]

@peerbolte

  "prettier.tabWidth": 4

For the default formatters, which are prettier for scss and javascript.

For html, you can set

  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {}
  }

With js-beautify options.