{"id":20330,"library":"prettier-no-jsx-parens","title":"prettier-no-jsx-parens","description":"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.","status":"active","version":"3.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/qpwo/prettier-no-jsx-parens","tags":["javascript","typescript"],"install":[{"cmd":"npm install prettier-no-jsx-parens","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-no-jsx-parens","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-no-jsx-parens","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This is a fork of prettier, so the same runtime peer dependencies apply, though it bundles its own prettier code.","package":"prettier","optional":false}],"imports":[{"note":"Package exports an ESM module. Requires Node >=14. Use import syntax or dynamic import().","wrong":"const prettier = require('prettier-no-jsx-parens')","symbol":"prettier-no-jsx-parens","correct":"import { format } from 'prettier-no-jsx-parens'"},{"note":"Same as prettier API, but with JSX paren removal behavior.","wrong":"const { resolveConfig } = require('prettier-no-jsx-parens')","symbol":"resolveConfig","correct":"import { resolveConfig } from 'prettier-no-jsx-parens'"},{"note":"Namespace import works but default import is preferred. TypeScript types are included.","wrong":"import * as prettier from 'prettier-no-jsx-parens'","symbol":"default (prettier-no-jsx-parens)","correct":"import prettier from 'prettier-no-jsx-parens'"}],"quickstart":{"code":"npm install --save-dev prettier-no-jsx-parens\n\n# In package.json scripts:\n{\n  \"scripts\": {\n    \"fmt\": \"prettier-no-jsx-parens --write .\"\n  }\n}\n\n# Usage:\nimport { format } from 'prettier-no-jsx-parens';\n\nconst code = `function Comp() { return (<><span>Hi</span></>); }`;\nconst formatted = await format(code, { parser: 'babel' });\nconsole.log(formatted);\n// Output:\n// function Comp() {\n//   return <>\n//     <span>Hi</span>\n//   </>;\n// }\n","lang":"typescript","description":"Installs the package, adds a formatting script, and shows how to use the API to format JSX without extra parentheses."},"warnings":[{"fix":"Uninstall prettier and use prettier-no-jsx-parens as the sole formatter, or alias the command as shown in README.","message":"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.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Check repository for newer versions or switch to official Prettier with a plugin like @prettier/plugin-parens if available.","message":"Based on Prettier v3.4.0. May not receive updates matching upstream Prettier releases.","severity":"deprecated","affected_versions":"<=3.4.0"},{"fix":"Use import or dynamic import(). Or use a build step that handles ESM.","message":"The package is ESM-only and requires Node >=14. Using require() will fail.","severity":"gotcha","affected_versions":">=3.0.0"},{"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/","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Change require() to import or use dynamic import(). If using TypeScript, set \"module\": \"ESNext\" or use ts-node with --esm flag.","cause":"The package is ESM-only, but the code uses require() to load it.","error":"Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /path/to/node_modules/prettier-no-jsx-parens/index.js"},{"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.","cause":"The package is not installed in the expected node_modules directory.","error":"Cannot find module 'prettier-no-jsx-parens'"},{"fix":"Use import instead of require, or rename file to .mjs, or set \"type\": \"module\" in package.json.","cause":"Running a CommonJS script that tries to import an ESM module directly without using import() or an ESM context.","error":"SyntaxError: Unexpected token 'export'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}