pluginBeautify

ビルド時にHTML・CSS・JSを整形するプラグイン。

導入手順と使用例はガイドを参照してください。このページは設定値と制約をまとめています。

Table of Contents

• オプション
  • src
  • htmlOptions
  • cssOptions
  • jsOptions
• 出力整合性と制限
• preload設定の移行

オプション

pluginBeautify({
  src: ["**/*.{html,css,js}"],
  htmlOptions: {
    indent_size: 2,
    max_preserve_newlines: 0,
    indent_inner_html: true,
    extra_liners: [],
    inline: ["span", "strong", "b", "small", "del", "s", "code", "br", "wbr"],
  },
  cssOptions: {
    indent_size: 2,
    space_around_combinator: true,
  },
  jsOptions: {
    indent_size: 2,
  },
})

src

• 型: string[]
• デフォルト: ["**/*.{html,css,js}"]

対象ファイルをdistからのglob形式で指定します。対象ファイルはビルドパイプラインに含まれているものからpicomatchで選ばれます。

htmlOptions

• 型: HTMLBeautifyOptions

js-beautifyのHTMLフォーマットに関する設定。

cssOptions

• 型: CSSBeautifyOptions

js-beautifyのCSSフォーマットに関する設定。

jsOptions

• 型: JSBeautifyOptions

js-beautifyのJavaScriptフォーマットに関する設定。

出力整合性と制限

JavaScriptを整形する場合はbuild.rolldownOptions.output.minify: falseを指定してください。build.minify: falseだけではRolldownの後段のdce-only処理が整形を上書きします。JSのentryFileNames／chunkFileNamesには[hash]を使えます。

CSSを整形する場合はassetFileNamesを"assets/[name][extname]"などの[hash]を含まない文字列にします。CSSは名前の確定後に整形するため、ハッシュ付き名や関数形式の命名設定はMINISTA_BEAUTIFY_CSS_HASH_UNSUPPORTEDで停止します。

js-beautifyはソースマップを生成しないため、整形対象のJS／CSSとソースマップの併用はMINISTA_BEAUTIFY_SOURCEMAP_UNSUPPORTEDで停止します。CSSの外部mapとinline map参照も対象です。ソースマップを必要とする場合はsrc: ["**/*.html"]などで対象から除外してください。除外したJS／CSSとmapは変更しません。

後段のJS 圧縮との併用はMINISTA_BEAUTIFY_MINIFY_UNSUPPORTEDになります。これらの制限は、整形対象の出力がある場合に検証します。後続の独自プラグインによる再変換までは保証しません。

整形は納品物を読みやすくするための機能です。空白や改行で未圧縮サイズが増えるため、配信容量を優先する場合は対象をHTMLだけに絞るか、このプラグインを外してViteの圧縮を利用してください。

preload設定の移行

removeImagePreloadはpluginSsgへ移動し、既定値はtrueです。旧Beautify オプションは移行期間中のみ非推奨な型として残し、明示指定にはMINISTA_BEAUTIFY_OPTION_MOVEDを返します。同じ値をpluginSsgへ移し、Beautify側の指定を削除してください。詳細はpluginSsgを参照してください。