したくない？
2018.1.10 追記
Prettier 1.10で公式にvueファイルがサポートされるもよう。
遠からずサポートされるとは思ってたけど、思ったよりも早かった。
https://github.com/prettier/prettier/pull/3563
format.js
なのでちょっとしたスクリプトを用意しました。prettierを使ってVueファイルにフォーマットかけるやつです。
インストール方法(というほどでもないけど)
依存関係をインストールして、上のファイルを適当な場所に置く
> npm install prettier glob chalk -D
使い方
こんな感じで処理対象のファイルを指定する(複数可)
> node ./format.js "src/**/*.{vue,js}" "test/**/*.js"
仕様
*.vue以外のファイルは、単にprettierに処理を任せる。
*.vueについては、<script>タグと<style>タグの中身に対してそれぞれprettierを適用する。
適用結果はそのままファイルに上書きする(prettier --write 相当)
注意事項
タグの切り出しは正規表現で雑にやってるだけなので、こんな感じの意地悪データを食わせると普通に死にます。
<script>
/*
</script>
*/
export default {
...
}
</script>
lang (<script lang="これ">) の値については、それを拡張子として追加したファイル名をprettierに渡しているので、それがprettierにとってWell-knownである必要があります。
知らないフォーマットが来たらいさぎよく死にます。
いろいろ
Q. Vetur(vue-language-service)のAuto formatting機能を使えばよいのでは？
使ってます。
ただ、エディタの機能を使うのはいいけどエディタの機能に依存するのは避けたいというのと、npmスクリプトから呼びたいのでCLIで動いてほしいというのがあります。
Q. eslint + eslint-plugin-vue でよいのでは？
上の通りVeturと併用していて、Veturがデフォルトでprettierを使うのでそれと合わせておきたいのと、eslint + typescriptの組み合わせでインデントの扱いが一部おかしいところがあるので、eslintはlintだけにして、フォーマットはprettierでするようにしています。
Q. 他にいい方法は？
ここを見ると、いろんな人がいろんなやり方でやっていて参考になります。
Vue support