Prettier Plugin React

0.0.1 verified Sat Apr 25 auth: no javascript

Prettier plugin for React (v0.0.1, experimental). Reformats JSX/TSX with custom options. Not yet stable; limited adoption. Differentiates by providing React-specific formatting beyond built-in Prettier JSX support.

Common errors

error Error [ERR_REQUIRE_ESM]: require() of ES Module not supported. ↓

cause Using CommonJS require() on ESM-only package.

fix

Use import prettierPluginReact from 'prettier-plugin-react' or dynamic import.

error TypeError: prettierPluginReact is not a plugin ↓

cause Plugin not included in plugins array or wrong import.

fix

Ensure plugin is imported and passed in plugins array when calling prettier.format.

Warnings

breaking Plugin may not work with Prettier v3+ ↓

fix Use Prettier v2.x or check compatibility.

gotcha No stable release; API may change ↓

fix Pin to exact version and test upgrades.

deprecated ESM-only; no CommonJS bundle ↓

fix Use dynamic import or ESM project.

Install

npm install prettier-plugin-react

yarn add prettier-plugin-react

pnpm add prettier-plugin-react

Imports

default

wrong

const prettierPluginReact = require('prettier-plugin-react')

correct

import prettierPluginReact from 'prettier-plugin-react'

ESM-only; no CJS support.

options

import { options } from 'prettier-plugin-react'

Named export for plugin options object.

Plugin

wrong

import { Plugin } from 'prettier-plugin-react'

correct

import type { Plugin } from 'prettier-plugin-react'

TypeScript: use `import type` to avoid runtime import.

Quickstart

Shows how to use the plugin with Prettier API to format JSX code with custom options.

import prettier from 'prettier';
import prettierPluginReact from 'prettier-plugin-react';

const code = `const App = () => <div>Hello</div>;`;

prettier.format(code, {
  parser: 'babel',
  plugins: [prettierPluginReact],
  jsxSingleQuote: true,
}).then(result => console.log(result));
// Output: const App = () => <div>Hello</div>;