Indentation of multi-line function in JavaScript

[helgatheviking]

This is probably more of a question, so here goes:

Bug Description

Cannot format the following JavaScript/React to pass standards:

Minimal Code Snippet

The issue happens when running this command:

addAction(
	`${actionPrefix} - cart - remove - item`,
	namespace,
	( {
		product,
		quantity = 1,
	} ) => {
		console.debug( 'item removed!', product );
	}
);

The above throws the following error on the console.debug line:

Multi-line function call not indented correctly; expected 4 spaces but found 8

But if I edit the line with the console.debug to be

addAction(
	`${actionPrefix} - cart - remove - item`,
	namespace,
	( {
		product,
		quantity = 1,
	} ) => {
	console.debug( 'item removed!', product );
	}
);

Then I get the following error:

Line indented incorrectly; expected at least 2 tabs, found 1

So I'm stumped on how it expects this to be formatted since either way trips the sniffer.

The file was auto-fixed via phpcbf to:

// Place your code sample here.

... while I expected the code to be fixed to:

// Place your code sample here.

Custom Ruleset

<?xml version="1.0"?>
<ruleset name="KathyIsAwesome-CS">
	<description>Kathy is Awesome Coding Standard</description>
    
    <!-- Exclude paths -->
	<exclude-pattern>*/tests/</exclude-pattern>
	<exclude-pattern>*/node_modules/*</exclude-pattern>
	<exclude-pattern>*/vendor/*</exclude-pattern>
	<exclude-pattern>*/build/*</exclude-pattern>
	<exclude-pattern>*/includes/customizer/controls*</exclude-pattern>
	<exclude-pattern>*/assets/dist*</exclude-pattern>

    <!-- Rules -->
	<rule ref="WordPress-Extra">
		<exclude name="Generic.Files.LineEndings.InvalidEOLChar" />
		<exclude name="Squiz.Commenting.FunctionComment" />
	</rule>
	
    <!-- Configs -->
	<config name="minimum_supported_wp_version" value="4.7" />
	<config name="testVersion" value="5.6-" />

	<!-- Rules -->
	<rule ref="WooCommerce-Core">
        <exclude name="Core.Commenting.CommentTags.AuthorTag" />
		<exclude name="WordPress.PHP.DontExtract" />
    </rule>

	<rule ref="WordPress.WP.I18n">
		<properties>
			<property name="text_domain" type="array" value="woocommerce-mix-and-match-products" />
		</properties>
	</rule>

	<rule ref="PHPCompatibility">
		<exclude-pattern>tests/</exclude-pattern>
	</rule>
</ruleset>

Environment

PHP 8.1.12-1ubuntu4.3 (cli) (built: Aug 17 2023 17:37:48) (NTS)

composer/installers                               dev-main 2a91702                                  A multi-framework Composer library installer
dealerdirect/phpcodesniffer-composer-installer    v0.7.2                                            PHP_CodeSniffer Standards Composer Installer Plugin
phpcompatibility/php-compatibility                9.3.5                                             A set of sniffs for PHP_CodeSniffer that checks for PHP cross-version compatibility.
phpcompatibility/phpcompatibility-paragonie       1.3.2                                             A set of rulesets for PHP_CodeSniffer to check for PHP cross-version compatibility issues in projects, while a...
phpcompatibility/phpcompatibility-wp              2.1.4                                             A ruleset for PHP_CodeSniffer to check for PHP cross-version compatibility issues in projects, while accountin...
phpcsstandards/phpcsextra                         dev-develop 746c319                               A collection of sniffs and standards for use with PHP_CodeSniffer.
phpcsstandards/phpcsutils                         dev-develop 77a6aa4                               A suite of utility functions for use with PHP_CodeSniffer
squizlabs/php_codesniffer                         dev-master 7566b4d                                PHP_CodeSniffer tokenizes PHP, JavaScript and CSS files and detects violations of a defined set of coding stan...
woocommerce/qit-cli                               0.3.4                                             A command line interface for WooCommerce Quality Insights Toolkit (QIT).
woocommerce/woocommerce-sniffs                    dev-renovate/wp-coding-standards-wpcs-3.x 19ddb07 WooCommerce sniffs
wp-coding-standards/wpcs                          3.0.1                                             PHP_CodeSniffer rules (sniffs) to enforce WordPress coding conventions

Additional Context (optional)

Tested Against develop Branch?

• I have verified the issue still exists in the develop branch of WordPressCS.

Using a dev version of WooCommerce-Sniffs which is updated to use 3.0 of this repo

[dingo-d]

Just a suggestion, but maybe it would be better to check JavaScript files using JS linters such as ESLint? I know that that is the official tool used by Gutenberg project (https://developer.wordpress.org/block-editor/reference-guides/packages/packages-eslint-plugin/).

Support for checking JS files will be removed in PHPCS 4.0.0, so better to leave PHPCS for PHP files imo 🤷🏼‍♂️

[helgatheviking]

Thanks, that's a great idea. Though I thought there was linting included in @wordpress/scripts. I know this is out of scope, but do you know if you have to also install that plugin you mentioned?

[dingo-d]

The eslint plugin from my link should have a dependency on eslint so once you've installed that package you should be ok