vite-plugin-beautify

Vite plugin for beautifying build output with js-beautify

💡 You shouldn't be beautifying your output. Always minify if possible. But sometimes you just need to, and that's when this plugin comes in handy.

💡 Be aware that vite does provide a minifiy build option. You can turn it off minify: false, but the output won't be super legible.

Table of Contents

• vite-plugin-beautify
  • Table of Contents
  • Installation
  • Configuration
    • Defaults

Installation

1. Install the package

   npm install -D vite-plugin-beautify

   yarn add -D vite-plugin-beautify

   pnpm add -D vite-plugin-beautify

2. Add to your vite.config.ts

   // vite.config.ts
   import { defineConfig } from 'vite';
   import beautify from 'vite-plugin-beautify';
   
   export default defineConfig({
     plugins: [beautify({ inDir: 'build' })],
   });

Configuration

Defaults

vite-plugin-beautify provides some sensible defaults options to js-beautify. See them here.

Customization

// vite.config.ts
import { defineConfig } from 'vite';
import beautify from 'vite-plugin-beautify';

export default defineConfig({
  plugins: [
    beautify({
      inDir: 'custom-build-directory',
      html: {
        enabled: false,
      },
      js: {
        glob: 'immutable/**/*.js',
      },
      css: {
        options: {
          indent_size: 4,
        },
      },
    }),
  ],
});

⚠️ If options for js-beautify (JS, HTML / CSS) is provided, it'll override instead of being merged with the defaults. To access the default options, use the config resolver callback.

// vite.config.ts
import { defineConfig } from 'vite';
import beautify from 'vite-plugin-beautify';

export default defineConfig({
  plugins: [
    beautify((defaultConfig) => {
      css: {
        options: {
          ...defaultConfig.css.options,
          indent_size: 4,
        },
      },
    }),
  ],
});