Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vnphanquang/vite-plugin-beautify
Beautify code using js-beautify
https://github.com/vnphanquang/vite-plugin-beautify
beautify build plugin vite
Last synced: 16 days ago
JSON representation
Beautify code using js-beautify
- Host: GitHub
- URL: https://github.com/vnphanquang/vite-plugin-beautify
- Owner: vnphanquang
- License: mit
- Created: 2022-10-06T01:11:36.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2022-10-06T06:20:48.000Z (about 2 years ago)
- Last Synced: 2024-10-11T12:54:41.020Z (about 1 month ago)
- Topics: beautify, build, plugin, vite
- Language: TypeScript
- Homepage: https://github.com/vnphanquang/vite-plugin-beautify
- Size: 51.8 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-beautify
[![MIT][license.badge]][license] [![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia]
[Vite plugin][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][vite.build.options.minify]. You can turn it off `minify: false`, but the output won't be super legible.
## Table of Contents
- [vite-plugin-beautify](#vite-plugin-beautify)
- [Table of Contents](#table-of-contents)
- [Installation](#installation)
- [Configuration](#configuration)
- [Defaults](#defaults)
## Installation
1. Install the package
```bash
npm install -D vite-plugin-beautify
```
```bash
yarn add -D vite-plugin-beautify
```
```bash
pnpm add -D vite-plugin-beautify
```
2. Add to your `vite.config.ts`
```typescript
// 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][defaults].
### Customization
```typescript
// 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.
```typescript
// 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,
},
},
}),
],
});
```
[vite]: https://vitejs.dev/
[vite.plugin]: https://vitejs.dev/guide/api-plugin.html
[vite.build.options.minify]: https://vitejs.dev/config/build-options.html#build-minify
[js-beautify]: https://github.com/beautify-web/js-beautify
[license.badge]: https://img.shields.io/badge/license-MIT-blue.svg
[license]: ./LICENSE
[npm.badge]: https://img.shields.io/npm/v/vite-plugin-beautify
[npm]: https://www.npmjs.com/package/vite-plugin-beautify
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/vite-plugin-beautify?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/vite-plugin-beautify
[defaults]: https://github.com/vnphanquang/vite-plugin-beautify/blob/main/src/plugin.constants.ts