esbuild-plugin-prettier

1.0.0 verified Fri May 01 auth: no javascript

An esbuild plugin that automatically formats processed files with Prettier. Version 1.0.0 is the initial release. It runs Prettier on each file that matches the filter regex (default: /[jt]sx?|s?css/) and writes changes back. This plugin is useful in watch mode to keep code formatted without manual intervention. It is lightweight and configurable, but note that Prettier rewriting may conflict with esbuild's incremental build caching.

Common errors

error Error: Cannot find module 'prettier' ↓

cause Missing peer dependency 'prettier'

fix

Run: npm install prettier

error TypeError: prettier.format is not a function ↓

cause Using a version of prettier that does not export 'format' (prettier v3+ uses ESM default export)

fix

Use prettier v2 or configure the plugin to work with prettier v3 (requires plugin update)

error Error: No matching files found for filter: /[jt]sx?|s?css/ ↓

cause Plugin filter regex does not match any input files

fix

Specify a custom filter that matches your file extensions

Warnings

gotcha Prettier rewriting files can invalidate esbuild's cache on every rebuild, slowing down watch mode. ↓

fix Consider disabling the plugin for production builds or using onEnd instead of onLoad.

deprecated The plugin uses prettier's sync API internally; large files may block the event loop. ↓

fix Use prettier's asynchronous API if performance is critical; consider an alternative plugin.

gotcha Default filter includes CSS and SCSS files, but prettier may not have a parser for them unless configured. ↓

fix Set filter to only include file types you have prettier plugins installed for.

Install

npm install esbuild-plugin-prettier

yarn add esbuild-plugin-prettier

pnpm add esbuild-plugin-prettier

Imports

default

wrong

const esbuildPluginPrettier = require('esbuild-plugin-prettier')

correct

import esbuildPluginPrettier from 'esbuild-plugin-prettier'

Package ships as ESM. Use dynamic import if in CommonJS context.

esbuildPluginPrettier (default)
wrong
```
import { plugin } from 'esbuild-plugin-prettier'
```
correct
```
import plugin from 'esbuild-plugin-prettier'
```
The default export is the plugin function; no named exports.
type Options
```
import type { Options } from 'esbuild-plugin-prettier'
```
Options type is exported for TypeScript users, but not required.

Quickstart

Demonstrates using the plugin in an esbuild build with custom filter and Prettier options.

import esbuild from 'esbuild';
import prettierPlugin from 'esbuild-plugin-prettier';

await esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  plugins: [
    prettierPlugin({
      filter: /\.js$/,
      prettierOptions: {
        semi: false,
        singleQuote: true,
      },
    }),
  ],
});
console.log('Build complete with Prettier formatting!');