prettierX - a less opinionated fork of Prettier

An unofficial fork of the Prettier code formatter, intended to provide some additional options to help improve consistency with "Standard JS" (feross/standard) and Flet/semistandard. This fork is an attempt to pick up where arijs/prettier-miscellaneous left off.

Major THANKS

Major thanks is due to @adalinesimonian for contributions in PR #603 that enabled updates from Prettier 2.3.2.

prettierX as a Prettier plugin

prettier-plugin-x - provides the additional formatting options in a prettier plugin

CLI Usage

Quick CLI usage:

prettierx <options> <file(s)>

Additional prettierX options

• --align-object-properties (alignObjectProperties: true): Align colons in multiline object literals (not applied with any of the JSON parsers).
• --offset-ternary-expressions (offsetTernaryExpressions: true): Indent and align ternary expression branches more consistently with "Standard JS" (similar to the corresponding eslint option).
• --space-before-function-paren (spaceBeforeFunctionParen: true): Put a space before function parenthesis in all declarations (similar to the corresponding eslint option). (Default is to put a space before function parenthesis for untyped anonymous functions only.)
• --generator-star-spacing (generatorStarSpacing: true): Put spaces around the star (*) in generator functions (before and after - similar to the corresponding eslint option). (Default is after only.)
• --yield-star-spacing (yieldStarSpacing: true): Put spaces around the star (*) in yield* expressions (before and after - similar to the corresponding eslint option). (Default is after only.)
• --no-indent-chains (indentChains: false): Disable indents at the start of chained calls.
• --break-before-else (breakBeforeElse: true): Always add a line break before else.
• <code>--import-formatting <auto|oneline></code> (<code>importFormatting: "<auto|oneline>"</code>): Formatting of import statements, may be oneline to avoid conflict with VSCode "Organize Imports" feature.
• --html-void-tags (htmlVoidTags: true): Format void HTML elements as void tags.
• --break-long-method-chains (breakLongMethodChains: true): Break method chains with more than 3 method calls, like Prettier 1.x.
• --array-bracket-spacing (arrayBracketSpacing: true): Put spaces between array brackets (similar to the corresponding eslint option). Status: experimental, with limited testing.
• --css-paren-spacing (cssParenSpacing: true): Put spaces between parens in CSS, WordPress style. Status: experimental, with limited testing.
• --computed-property-spacing (computedPropertySpacing: true): Put spaces between computed property brackets (similar to the corresponding eslint option). Status: experimental, with limited testing.",
• --space-in-parens (spaceInParens: true): Print spaces in between parens, WordPress style (similar to the corresponding eslint option). Not recommended in combination with the default arrowParens: "always" option. Status: experimental, with limited testing.
• --space-unary-ops (spaceUnaryOps: true): Put spaces after unary operator symbols, except in the middle of !! (similar to the corresponding eslint option). Status: experimental, with limited testing.
• --template-curly-spacing (templateCurlySpacing: true): Put spaces between template curly brackets (similar to the corresponding eslint option). Status: experimental, with limited testing.
• --type-angle-bracket-spacing (typeAngleBracketSpacing: true): Put spaces between type angle brackets. Status: experimental, with limited testing.
• --type-bracket-spacing (typeBracketSpacing: true): Put spaces between type brackets. Status: experimental, with limited testing.
• --no-export-curly-spacing (exportCurlySpacing: false): Put or disable spaces between export curly braces.
• --no-import-curly-spacing (importCurlySpacing: false): Put or disable spaces between import curly braces.
• --no-object-curly-spacing (objectCurlySpacing: false): Disable spaces between object curly braces (similar to the corresponding eslint option).
• --no-graphql-curly-spacing (graphqlCurlySpacing: false): Disable spaces between curly braces for GraphQL.
• --no-yaml-bracket-spacing (yamlBracketSpacing: false): Disable spaces between brackets / curly braces for YAML.
• --no-type-curly-spacing (typeCurlySpacing: false): Disable spaces between type curly braces.

(See docs/options.md for more information.)

"Standard JS" formatting options

The following options should be used to format the code as consistently as possible with "Standard JS":

• --arrow-parens avoid (arrowParens: "avoid")
• --generator-star-spacing (generatorStarSpacing: true)
• --space-before-function-paren (spaceBeforeFunctionParen: true)
• --single-quote (singleQuote: true)
• --jsx-single-quote (jsxSingleQuote: true)
• --no-semi (semi: false)
• --offset-ternary-expressions (offsetTernaryExpressions: true)
• --yield-star-spacing (yieldStarSpacing: true)
• --trailing-comma none (trailingComma: "none")

Note that this tool does not follow any of the other "Standard JS" rules. It is recommended to use this tool together with eslint, in some form, to archive correct formatting according to "Standard JS".

Any known conflicts with "Standard JS" will be tracked in open issues with the conflict-with-standard tag.

some recommended options

• --arrow-parens avoid (arrowParens: "avoid"), especially in combination with --space-in-parens (spaceInParens: true).
• --break-long-method-chains (breakLongMethodChains: true)
• --offset-ternary-expressions (offsetTernaryExpressions: true)

options removed

• --no-align-ternary-lines - replaced with: --offset-ternary-expressions
• --paren-spacing - replaced with finer-grained options:
  • --array-bracket-spacing
  • --css-paren-spacing
  • --computed-property-spacing
  • --space-in-parens
  • --space-unary-ops
  • --template-curly-spacing
  • --type-angle-bracket-spacing
  • --type-bracket-spacing
• no-bracket-spacing - replaced with finer-grained options:
  • --no-export-curly-spacing
  • --no-import-curly-spacing
  • --no-object-curly-spacing
  • --no-graphql-curly-spacing
  • --no-yaml-bracket-spacing
  • --no-type-curly-spacing

<!-- - FUTURE TBD prettierx vs prettier (???): ## Prettier 2.0 This is the branch containing code for Prettier’s 2.0 release. See [the `master` branch](https://github.com/prettier/prettier) for the 1.x code/docs. ---  <h2 align="center">Opinionated Code Formatter</h2> <p align="center"> <em> JavaScript · TypeScript · Flow · JSX · JSON </em> <br /> <em> CSS · SCSS · Less </em> <br /> <em> HTML · Vue · Angular </em> <br /> <em> GraphQL · Markdown · YAML </em> <br /> <em> <a href="https://prettier.io/docs/en/plugins.html"> Your favorite language? </a> </em> </p> <p align="center"> <a href="https://github.com/prettier/prettier/actions?query=workflow%3AProd+branch%3Amain"> <img alt="Github Actions Build Status" src="https://img.shields.io/github/workflow/status/prettier/prettier/Prod?label=Prod&style=flat-square"></a> <a href="https://github.com/prettier/prettier/actions?query=workflow%3ADev+branch%3Amain"> <img alt="Github Actions Build Status" src="https://img.shields.io/github/workflow/status/prettier/prettier/Dev?label=Dev&style=flat-square"></a> <a href="https://github.com/prettier/prettier/actions?query=workflow%3ALint+branch%3Amain"> <img alt="Github Actions Build Status" src="https://img.shields.io/github/workflow/status/prettier/prettier/Lint?label=Lint&style=flat-square"></a> <a href="https://codecov.io/gh/prettier/prettier"> <img alt="Codecov Coverage Status" src="https://img.shields.io/codecov/c/github/prettier/prettier.svg?style=flat-square"></a> <a href="https://twitter.com/acdlite/status/974390255393505280"> <img alt="Blazing Fast" src="https://img.shields.io/badge/speed-blazing%20%F0%9F%94%A5-brightgreen.svg?style=flat-square"></a> <br/> <a href="https://www.npmjs.com/package/prettier"> <img alt="npm version" src="https://img.shields.io/npm/v/prettier.svg?style=flat-square"></a> <a href="https://www.npmjs.com/package/prettier"> <img alt="weekly downloads from npm" src="https://img.shields.io/npm/dw/prettier.svg?style=flat-square"></a> <a href="#badge"> <img alt="code style: prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square"></a> <a href="https://gitter.im/jlongster/prettier"> <img alt="Chat on Gitter" src="https://img.shields.io/gitter/room/jlongster/prettier.svg?style=flat-square"></a> <a href="https://twitter.com/PrettierCode"> <img alt="Follow Prettier on Twitter" src="https://img.shields.io/twitter/follow/prettiercode.svg?label=follow+prettier&style=flat-square"></a> </p> - --> <!-- FUTURE TBD improved description of feature from WordPress Prettier fork somewhere: