Skip to content

Instantly share code, notes, and snippets.

@kingkool68
Last active July 15, 2022 14:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kingkool68/8771a593c0796a4c55ceaf7ab82f9a7b to your computer and use it in GitHub Desktop.
Save kingkool68/8771a593c0796a4c55ceaf7ab82f9a7b to your computer and use it in GitHub Desktop.
Configure WordPress Coding Standards Linting/Formatting in VSCode

This assumes you're editing a WordPress theme which is the root of your VSCode workspace. In other words if your theme lived in /wp-content/themes/my-awesome-theme. You would drag the directory my-awesome-theme into VSCode and start editing files from there. This also assumes you're using Composer.

If this doesn't work for you check out https://www.edmundcwm.com/setting-up-wordpress-coding-standards-in-vs-code/ which details installing the PHP Code Sniffer tools globally instead of in a project.

We need to require dependencies in our project.

composer require --dev squizlabs/php_codesniffer
composer require --dev dealerdirect/phpcodesniffer-composer-installer
composer require --dev wp-coding-standards/wpcs

The Composer Installer package will automagically make PHPCS aware of coding standards/rulesets (aka WPCS). You should see the following added to your composer.json file:

  "config": {
		"allow-plugins": {
			"dealerdirect/phpcodesniffer-composer-installer": true
		}
	}

Let's make sure PHPCS is aware of the WPCS rules:

vendor/bin/phpcs -i
The installed coding standards are MySource, PEAR, PSR1, PSR2, PSR12, Squiz, Zend, PHPCompatibility, PHPCompatibilityParagonieRandomCompat, PHPCompatibilityParagonieSodiumCompat, PHPCompatibilityWP, WordPress, WordPress-Core, WordPress-Docs and WordPress-Extra

You should see WordPress listed there. If so, you're good.

Add the phpcs.ruleset.xml file to your project.

Install the PHP Sniffer & Beautifier VSCode extension.

Open a PHP file from your theme, add the following, and save the file:

$test = array(
	'a' => 'b',
	'cat' => 'dog',
);

You should see a warning that the array items aren't aligned. There is a squiggle under the ' in 'b',. Right click and select Format Document. Your alignment issue should now be fixed:

$test = array(
	'a'   => 'b',
	'cat' => 'dog',
);
<?xml version="1.0"?>
<ruleset name="russellh">
<!-- See https://github.com/squizlabs/PHP_CodeSniffer/wiki/Annotated-ruleset.xml -->
<!-- See https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/blob/develop/WordPress-Core/ruleset.xml -->
<!-- Set a description for this ruleset. -->
<description>A custom set of code standard rules to check for WordPress themes.</description>
<file>.</file>
<exclude-pattern>node_modules/*</exclude-pattern>
<exclude-pattern>vendor/*</exclude-pattern>
<exclude-pattern>lib/*</exclude-pattern>
<exclude-pattern>*.js</exclude-pattern>
<exclude-pattern>*.css</exclude-pattern>
<!-- Include the WordPress ruleset, with exclusions. -->
<rule ref="WordPress">
<!-- File comments are optional -->
<exclude name="Squiz.Commenting.FileComment.Missing"/>
<!-- It's ok if comments don't end in a full stop -->
<exclude name="Squiz.Commenting.InlineComment.InvalidEndChar"/>
<exclude name="Squiz.Commenting.FunctionComment.ParamCommentFullStop"/>
<!-- It's ok if @throws doc block tag doesn't end in a full stop -->
<exclude name="Squiz.Commenting.FunctionComment.ThrowsNoFullStop"/>
<exclude name="Generic.Commenting.DocComment.LongNotCapital"/>
<!-- We automatically handle static asset versioning based on when the file was last modified -->
<exclude name="WordPress.WP.EnqueuedResourceParameters.MissingVersion"/>
<!-- Any kind of formatting for hook names is fine -->
<exclude name="WordPress.NamingConventions.ValidHookName.UseUnderscores"/>
<!-- I don't think in Yoda speak. See https://github.com/humanmade/WordPress-Importer/blob/7fa0a24c12818e60f70d73293b79a277e742b2f1/phpcs.ruleset.xml#L25-L44 -->
<exclude name="WordPress.PHP.YodaConditions" />
</rule>
</ruleset>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment