prettier-no-jsx-parens

3.4.0 verified Sat Apr 25 auth: no javascript

A fork of Prettier that removes unnecessary parentheses around JSX fragments and elements, providing a cleaner output for JSX/TSX code. Version 3.4.0 is based on Prettier v3.4.0 and is released infrequently, tracking upstream Prettier versions. It aims to address the common complaint of Prettier adding extra parentheses in JSX, resulting in more compact formatting similar to standard React patterns. Unlike Prettier plugins that modify behavior through options, this is a complete fork that replaces the prettier binary, so it cannot be used as a plugin alongside official Prettier.

Common errors

error Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /path/to/node_modules/prettier-no-jsx-parens/index.js ↓

cause The package is ESM-only, but the code uses require() to load it.

fix

Change require() to import or use dynamic import(). If using TypeScript, set "module": "ESNext" or use ts-node with --esm flag.

error Cannot find module 'prettier-no-jsx-parens' ↓

cause The package is not installed in the expected node_modules directory.

fix

Run 'npm install --save-dev prettier-no-jsx-parens' in the project root, or ensure the package is globally installed and the PATH is correct.

error SyntaxError: Unexpected token 'export' ↓

cause Running a CommonJS script that tries to import an ESM module directly without using import() or an ESM context.

fix

Use import instead of require, or rename file to .mjs, or set "type": "module" in package.json.

Warnings

breaking This package is a fork of Prettier, not a plugin. It replaces the prettier binary entirely. If you have both prettier and prettier-no-jsx-parens installed, you must use the correct binary or API path. ↓

fix Uninstall prettier and use prettier-no-jsx-parens as the sole formatter, or alias the command as shown in README.

deprecated Based on Prettier v3.4.0. May not receive updates matching upstream Prettier releases. ↓

fix Check repository for newer versions or switch to official Prettier with a plugin like @prettier/plugin-parens if available.

gotcha The package is ESM-only and requires Node >=14. Using require() will fail. ↓

fix Use import or dynamic import(). Or use a build step that handles ESM.

gotcha VSCode's prettier extension must be configured with the correct path to this package's node_modules. Using a global install may require absolute path. ↓

fix Set prettier.prettierPath in VSCode settings to the absolute path of the package, e.g., /usr/local/lib/node_modules/prettier-no-jsx-parens/

Install

npm install prettier-no-jsx-parens

yarn add prettier-no-jsx-parens

pnpm add prettier-no-jsx-parens

Imports

prettier-no-jsx-parens
wrong
```
const prettier = require('prettier-no-jsx-parens')
```
correct
```
import { format } from 'prettier-no-jsx-parens'
```
Package exports an ESM module. Requires Node >=14. Use import syntax or dynamic import().

resolveConfig

wrong

const { resolveConfig } = require('prettier-no-jsx-parens')

correct

import { resolveConfig } from 'prettier-no-jsx-parens'

Same as prettier API, but with JSX paren removal behavior.

default (prettier-no-jsx-parens)
wrong
```
import * as prettier from 'prettier-no-jsx-parens'
```
correct
```
import prettier from 'prettier-no-jsx-parens'
```
Namespace import works but default import is preferred. TypeScript types are included.

Quickstart

Installs the package, adds a formatting script, and shows how to use the API to format JSX without extra parentheses.

npm install --save-dev prettier-no-jsx-parens

# In package.json scripts:
{
  "scripts": {
    "fmt": "prettier-no-jsx-parens --write ."
  }
}

# Usage:
import { format } from 'prettier-no-jsx-parens';

const code = `function Comp() { return (<><span>Hi</span></>); }`;
const formatted = await format(code, { parser: 'babel' });
console.log(formatted);
// Output:
// function Comp() {
//   return <>
//     <span>Hi</span>
//   </>;
// }