Vetur: Add prettier as an alternative formatter for style/script sections

Created on 2 Jun 2017 · 9Comments · Source: vuejs/vetur

https://github.com/prettier/prettier/releases/tag/1.4.0

Now with support for js/ts and css/scss/less.

feature-request formatting

Source

octref

👍7 🎉2 😕1

Most helpful comment

Should start the work, since prettier can't handle sass/stylus/jade anyway we can't run prettier through the whole doc.

So the new approach is still

Dividing doc into multiple regions
Run prettier as the preferred formatter for a region, if prettier works with that lang
Otherwise, use alternative formatter

Waiting for prettier html support but css/scss/less/js/ts can already be reworked.

octref on 5 Aug 2017

👍8 ❤1

All 9 comments

Will wait a bit since it seems prettier wants to add support for vue files directly:
https://github.com/prettier/prettier/issues/2097

octref on 19 Jun 2017

Should start the work, since prettier can't handle sass/stylus/jade anyway we can't run prettier through the whole doc.

So the new approach is still

Dividing doc into multiple regions
Run prettier as the preferred formatter for a region, if prettier works with that lang
Otherwise, use alternative formatter

Waiting for prettier html support but css/scss/less/js/ts can already be reworked.

octref on 5 Aug 2017

👍8 ❤1

Just a thought: If people currently use beautify to format their components on save, a switch to prettier would result in a reformatted template in practically any .vue file that people touch, even if it's just for a code- or stylefix - unless it could somehow be ensured that prettier formats like beautify did before.

Otherwise, people end up with commits that have big "changes" to their templates that are only concerned with formatting, which might not always be desirable.

It should be addressed how to best deal with this (if possible) once a version with prettier support is released ...

LinusBorg on 19 Sep 2017

👍2

We'll make it selectable, prettier being the default.

octref on 19 Sep 2017

🎉1 👍1

Cool!

LinusBorg on 19 Sep 2017

A high level picture of upcoming changes. Leave feedback if you have any.

New settings

vetur.format.*

- defaultFormatter: {
  "html": "js-beautify-html",
  "css": "prettier",
  "js": "prettier",
  "ts": "typescript",
  "stylus": "stylus-supremacy"
}
- formatterOptions.*
  - "js-beautify-html": {
    printWidth,
    tabWidth,
    ...
  }
  - "stylus-supremacy": {
    insertColons,
    insertBraces,
    ...
  }

The goal is still to have as little config as possible in Vetur, so settings for prettier, stylus-supremacy, TS Language Service formatter will be read from:

prettier: esbenp.prettier-vscode | prettier.*
stylus-supremacy: thisismanta.stylus-supremacy | stylusSupremacy.*
typescript: typescript.*

Options will be overridable from vetur.formatterOptions.<formatter-name>.

Available formatters:

| lang | default | available |
| --- | --- | --- |
| html | js-beautify | js-beautify |
| pug / jade | :x: | :x: |
| slm | :x: | :x: |
| css | prettier | prettier |
| postcss | prettier | prettier |
| scss | prettier | prettier |
| sass | :x: | :x: |
| less | prettier | prettier |
| stylus | stylus-supremacy | stylus-supremacy |
| js | prettier | prettier, typescript |
| ts | prettier | prettier, typescript |
| coffee | :x: | :x: |

octref on 10 Oct 2017

👍6

Published in 0.10.0.

octref on 18 Oct 2017

How can I format js file with js-beautify?

yesvods on 20 Oct 2017

There's an option in prettier (prettier.eslintIntegration),
when this is enable, I don't know why, but vue script zone is not formated the same way
https://i.imgur.com/MZfmKE8.png