Previously proposed in #1303 and locked as resolved by bot .

Description

This applies only to JavaScript/TypeScript code. It would be similar to the new Enforce Single Attribute Per Line option introduced with #5501 in Prettier 2.6.0.

WordPress JavaScript coding conventions for spacing for historical reasons promote different formatting styles around spaces in JavaScript. The short version of the approach looks as follows:

Use spaces liberally throughout your code. “When in doubt, space it out.”

This is the only feature that isn't supported by Prettier.

In practice, code formatting in WordPress projects look as follows:

Always include extra spaces around elements and arguments:

array = [ a, b ];
foo( arg );`
foo( 'string', object );
foo( options, object[ property ] );
foo( node, 'property', 2 );
prop = object[ 'default' ];
firstArrayElement = arr[ 0 ];

if ( condition ) {
   doSomething( 'with a string' );
} else if ( otherCondition ) {
    otherThing( {
        key: value,
        otherKey: otherValue
    } );
} else {
    somethingElse( true );
}

// Unlike jQuery, WordPress prefers a space after the ! negation operator.
// This is also done to conform to our PHP standards.
while ( ! condition ) {
    iterating++;
}

let i;
for ( i = 0; i < 100; i++ ) {
    object[ array[ i ] ] = someFn( i );
    $( '.container' ).val( array[ i ] );
}
 
try {
    // Expressions
} catch ( e ) {
    // Expressions
}

Alternative approaches considered

Using Prettier's fork and npm aliases

This is where we are now for WordPress projects with Prettier's fork that adds a --paren-spacing option. We've been maintaining it for over 4 yours now.

It's possible to use all powerful integration from Prettier ecosystem with npm aliases:

https://github.com/WordPress/gutenberg/blob/d48b6bb7f2324db82ac6d3bc87b9a71e542d107f/packages/scripts/package.json#L75

"dependencies": {
    "prettier": "npm:[email protected]"
}

However npm aliases are completely unreliable in npm, and it became only worse since new behavior for peer dependencies was added in npm 7. More details in WordPress/gutenberg#21872. I guess npm aliases are fine for a consuming project as a workaround, but using them in packages distributed on npm creates random errors.

Changing coding conventions in WordPress projects

It was suggested in a few places in other issues in Prettier repository. It didn't seem a viable option so far despite several tries like WordPress/gutenberg#37607 and Proposal: Changes to JavaScript Coding Standards for Full Prettier Compatibility.

Plugins: allow overriding internal plugins, e.g., printer for JS or CSS

It was filed in #5919. The idea would be to create a plugin that exports a custom printer for JS/TS that replaces what Prettier offers in the core. This way, we could customize the formatted code. It isn't ideal, but that removes the maintenance work from the Prettier project for custom options like the one proposed. We've been maintaining a Prettier's fork that adds a --paren-spacing option for the last four years. We could turn it into a plugin and publish it to NPM as prettier-plugin-wordpress.