フォーマット

Vize は、Vue コンポーネントの <script>、<template>、<style> をまとめてフォーマットします。Vite+ のプロジェクトでは、Vize が .vue ファイルを、Oxfmt がそれ以外のファイルを担当するので、コマンドひとつでプロジェクト全体をフォーマットできます。

プロジェクトをフォーマットする

Vite+ 統合を使っている場合は、次のタスクを実行します。

vp run fmt:check
vp run fmt

vp run fmt:check は、変更が必要なファイルを報告し、1 つでもあれば失敗します。CI ではこちらを使います。vp run fmt は結果をファイルに書き込みます。プロジェクトの一部だけをフォーマットするには、-- の後ろにパスを指定します。

Vite+ を使わない場合は、CLI を直接実行します。対象は Vue、JavaScript、TypeScript、JSX、TSX、JSON、JSONC のファイルです。YAML と Markdown はフォーマットしません。

vize fmt --check src
vize fmt --write src

--check は対象のファイルを一覧し、フォーマットが必要なファイルがあると終了コード 1 で終了します。

Found 1 file(s)
Would reformat: src/Card.vue

Checked 1 file(s)
  1 file(s) would be reformatted

何が変わるか

次のコンポーネントを例にします。

<script setup lang="ts">
import { computed } from "vue";
const props = defineProps<{ title: string; count?: number }>();
const label = computed(() => `${props.title} (${props.count ?? 0})`);
</script>

<template>
  <article class="card" v-bind:aria-label="label">
    <h2>{{ label }}</h2>
    <slot />
  </article>
</template>

<style scoped>
.card {
  padding: 1rem;
  border: 1px solid #ddd;
}
</style>

vize fmt --write を実行すると、次のようになります。

<script setup lang="ts">
import { computed } from "vue";
const props = defineProps<{ title: string; count?: number }>();
const label = computed(() => `${props.title} (${props.count ?? 0})`);
</script>

<template>
  <article class="card" :aria-label="label">
    <h2>{{ label }}</h2>
    <slot />
  </article>
</template>

<style scoped>
.card {
  padding: 1rem;
  border: 1px solid #ddd;
}
</style>

スクリプトは、Oxfmt と同じ Oxc のフォーマッタで整形されます。テンプレートはインデントし直され、属性の間の空白がそろい、v-bind:、v-on:、v-slot: は省略記法に置き換わります。<pre>、<textarea>、v-pre の中の空白は、書いたとおりに残ります。

スタイルを設定する

Vite+ のプロジェクトでは、vite.config.ts の vue.formatter にオプションを書きます。

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({}).withVue({
  formatter: {
    printWidth: 100,
    singleQuote: true,
  },
});

fmt.ignorePatterns は両方のフォーマッタに適用されます。.vue ファイルも Oxfmt に任せるには、vue.formatter を省略し、fmt.vue: false を指定します。明示した vue.formatter はタスクの制御設定より優先されます。単独の CLI やエディターが同じ設定をどこから読むかは、設定を参照してください。

同じオプションは CLI のフラグでも指定できます。

個々の設定は、次のガイドで詳しく説明しています。

• Vue スクリプトの import を並べ替える
• インデント幅を設定する
• フォーマッタの改行コードを設定する
• プロパティの引用符を設定する
• JSX 属性の引用符を設定する

オプション

次のオプションはすべて vue.formatter で指定できます。指定しなかったオプションは preset の値を使い、preset もなければここに示す既定値を使います。

Node の native formatSfc API でも、Prettier 移行用の 5 つの真偽値 normalizeCssQuotes、normalizeInlineStyles、normalizeVForParens、 selfCloseVoidElements、reindentPreprocessorStyles を同じ名前で指定できます。 明示した値は false を含めて preset より優先されます。

スクリプトの引用符ポリシーも設定、CLI の直接上書き、Node で共有されます。 --jsx-single-quote[=false] は jsxSingleQuote、 --quote-props <as-needed|consistent|preserve> は quoteProps に対応します。

末尾のカンマのポリシーも同じように共有されます。 --trailing-comma <all|es5|none> は、型付きの Node・設定オプション trailingComma に対応します。CLI と Node の明示値は、選択したプリセットより優先されます。

アロー関数の引数の括弧も同じように公開されます。 --arrow-parens <always|avoid> は、型付きの Node・設定オプション arrowParens に対応し、明示値はプリセットより優先されます。

波括弧とタグの閉じ括弧の配置も同じように公開されます。 --bracket-spacing[=false] と --bracket-same-line[=false] は、型付きの Node・設定オプション bracketSpacing と bracketSameLine に対応します。 明示した true または false は、選択したプリセットより優先されます。

改行コードも同じように公開されます。 --end-of-line <lf|crlf|cr|auto> は、型付きの Node・設定オプション endOfLine に対応します。CLI の明示値は、設定と選択したプリセットより優先されます。

コンパクトなアプリケーションコード

アプリケーションのテンプレートを密に保ちつつ、ブロックや属性を書いた順序を変えたくない場合は compact プリセットを使います。

export default defineConfig({}).withVue({
  formatter: {
    preset: "compact",
  },
});

このプリセットは printWidth: 120 と bracketSameLine: true を設定し、属性と SFC ブロックの順序を保ちます。v-bind:id を :id にする省略記法の正規化は有効です。既存オプションに名前を付けた組み合わせだけなので、一緒に書いたオプションが優先されます。CLI では vize fmt --preset compact を使います。

ドキュメントの例

文章中の例を狭く読みやすく保つには、documentation プリセットを使います。

export default defineConfig({}).withVue({
  formatter: {
    preset: "documentation",
  },
});

このプリセットは printWidth: 80 と singleAttributePerLine: true を設定し、属性と SFC ブロックを書いた順に保ち、省略記法は正規化します。CSS、インライン style、v-for の別名、空要素、プリプロセッサのレイアウトに対する Prettier 移行用の正規化は有効にしません。CLI では vize fmt --preset documentation を使います。

Prettier から移行する

Vize の出力は Prettier や Oxfmt とほぼ同じですが、いくつかの既定値は意図して変えています。Vue ファイルを Prettier と同じように整形するには、prettier プリセットを指定します。

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({}).withVue({
  formatter: {
    preset: "prettier",
  },
});

このプリセットは属性とブロックを書いた順に残し（sortAttributes: false、sortBlocks: false）、さらに次の動作をまとめて指定します。

• 行幅を Prettier と同じ 80 にします。Vize の既定値は Oxfmt と同じ 100 です。
• v-bind:、v-on:、v-slot: は書いたとおりに残します。
• CSS、SCSS、Less の文字列をダブルクォートにします。--single-quote を付けるとシングルクォートにします。
• 1 行の style 属性を、末尾の ; を付けずに color: red; top: 0 の形で書きます。
• v-for の別名が複数あるときは、v-for="(item, i) in items" のように括弧で囲みます。
• 空要素を <img src="a.png" /> のように閉じます。
• SCSS と Less のブロックを入れ子の深さでインデントし直し、空行を整えます。

コマンドラインでは、vize fmt --preset prettier で同じプリセットを指定できます。オプションは、設定ファイルのプリセット、設定ファイルのその他のオプション、--preset、その他のフラグの順に適用されます。

Node API でも同じ vize、prettier、compact、documentation の4つを指定できます。

import { formatSfc } from "@vizejs/native";

const result = formatSfc(source, {
  preset: "prettier",
  singleQuote: true,
});

明示したオプションは false を含めてプリセットより優先されます。preset を省略すると従来の Vize の既定値を使い、未対応の名前を指定するとエラーになります。

sortAttributes: false のときは、<script>、<template>、<style>、カスタムブロックのタグの属性も書いた順のまま残ります。既定値では <script lang="ts" setup> が <script setup lang="ts"> になります。

次の違いはプリセットを使っても残ります。

• 要素内のテキストは改行位置を変えません。Prettier は長いテキストを行幅まで詰め直します。
• v-for 以外のテンプレートの式は書いた形のまま残ります。たとえば { open: boolean, close: () => void } のようなスロットの型の , 区切りはそのままです。Prettier は ; に置き換えます。
• SCSS と Less のブロックの値は書いたとおりに残します。プリセットが変えるのは引用符、インデント、空行だけです。Prettier は .2s を 0.2s にするなど、値も整形します。インデント構文の Sass と Stylus のブロックは書いたとおりに残し、Pug のテンプレートは外側のインデントだけを調整します。

保存時にフォーマットする

エディターの設定を行うと、Vue ファイルのフォーマッタとして Vize が選ばれます。その他のファイルには、これまでのフォーマッタがそのまま使われます。