DEV Community

Mahbub Rabbani
Mahbub Rabbani

Posted on • Edited on

VS Code- configure WordPress coding standards

#vscode #wordpress #codingstandards #plugins

You may need to configure different coding standards e.i PSR4, WordPress, etc. in VS Code for different projects. Here, I will discuss about project specific CS configuration. I hope that you are familiar with WordPress Coding Standards and PSR-4 autoload.

VS code PHP sniffer Extension:

Add this extension and configure your coding standard. The sample configuration of VS code settings.json is as follows:

 "editor.formatOnSave": true, "phpSniffer.autoDetect": true, "[php]": { "editor.defaultFormatter": "wongjn.php-sniffer" }
Enter fullscreen mode Exit fullscreen mode

You checkout available settings of this extension.

Open plugin in VS Code

There are two options to open your plugin in VS Code.

  • Option 1: Open plugin as a separate project.
  • Option 2: Add plugin in existing workspace. Goto File -> Add Folder to Workspace...

Dev package dependency

Add the following packages to composer.json file of your plugin and run composer update command.

 { ..... "require-dev": { "wp-coding-standards/wpcs": "dev-develop", "dealerdirect/phpcodesniffer-composer-installer": "^0.7.2", "tareq1988/wp-php-cs-fixer": "dev-master", "phpcompatibility/phpcompatibility-wp": "dev-master", "phpunit/phpunit": "~8.5", "wp-phpunit/wp-phpunit": "^6.1", "yoast/phpunit-polyfills": "^1.0" }, "scripts": { "phpcs": [ "vendor/bin/phpcs -p -s" ], "phpcs:report": [ "vendor/bin/phpcs --report-file='phpcs-report.txt'" ], "phpcbf": [ "vendor/bin/phpcbf -p" ] }, }
Enter fullscreen mode Exit fullscreen mode

Run ./vendor/bin/phpcs -i command from your plugin directory to see the available coding standards.

Available coding standards

Set Standard and Rules

Add a new file name phpcs.xml into your plugin so that you can customize the rules and standard as follows:

 <?xml version="1.0"?> <ruleset name="WordPress Coding Standards"> <description>Generally-applicable sniffs for WordPress plugins.</description> <!-- What to scan --> <file>.</file> <exclude-pattern>*/.git/*</exclude-pattern> <exclude-pattern>*/.githooks/*</exclude-pattern> <exclude-pattern>*/.make/*</exclude-pattern> <exclude-pattern>*/assets/*</exclude-pattern> <exclude-pattern>*/src/*</exclude-pattern> <exclude-pattern>*/lib/*</exclude-pattern> <exclude-pattern>*/dist/*</exclude-pattern> <exclude-pattern>*/build/*</exclude-pattern> <exclude-pattern>*/node_modules/*</exclude-pattern> <exclude-pattern>*/vendor/*</exclude-pattern> <exclude-pattern>*/tests/*</exclude-pattern> <exclude-pattern>*.js</exclude-pattern> <exclude-pattern>*.mo</exclude-pattern> <exclude-pattern>*.twig</exclude-pattern> <exclude-pattern>*.css</exclude-pattern> <exclude-pattern>*.scss</exclude-pattern> <exclude-pattern>languages/*</exclude-pattern> <!-- How to scan --> <!-- Usage instructions: https://github.com/squizlabs/PHP_CodeSniffer/wiki/Usage --> <!-- Annotated ruleset: https://github.com/squizlabs/PHP_CodeSniffer/wiki/Annotated-ruleset.xml --> <arg value="sp"/> <!-- Show sniff and progress --> <!-- <arg name="basepath" value="./"/> --> <!-- Strip the file paths down to the relevant bit --> <arg name="colors"/> <arg name="extensions" value="php"/> <arg name="parallel" value="12"/><!-- Enables parallel processing when available for faster results. --> <!-- Rules: Check PHP version compatibility --> <!-- https://github.com/PHPCompatibility/PHPCompatibility#sniffing-your-code-for-compatibility-with-specific-php-versions --> <config name="testVersion" value="7.4-"/> <!-- Rules: Check PHP version compatibility--> <!-- https://github.com/PHPCompatibility/PHPCompatibilityWP --> <!-- <rule ref="PHPCompatibilityWP"/> --> <rule ref="WordPress"/> <!-- Rules: WordPress Coding Standards --> <!-- https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards --> <!-- https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/wiki/Customizable-sniff-properties --> <config name="minimum_supported_wp_version" value="5.4"/> <rule ref="WordPress-Extra"/> <rule ref="WordPress"> <exclude name="Generic.WhiteSpace.DisallowSpaceIndent"/> </rule> <rule ref="WordPress.WP.I18n"> <properties> <!-- Value: replace the text domain used. --> <property name="text_domain" type="array" value="plugin-text-domain"/> </properties> </rule> <rule ref="WordPress.WhiteSpace.ControlStructureSpacing"> <properties> <property name="blank_line_check" value="true"/> </properties> </rule> <rule ref="Squiz.Commenting"> <severity>0</severity> </rule> <rule ref="PEAR.Functions.FunctionCallSignature.MultipleArguments"> <severity>0</severity> </rule> <rule ref="Generic.Commenting.DocComment.SpacingBeforeTags"> <severity>0</severity> </rule> <rule ref="WordPress.Files.FileName"> <severity>0</severity> </rule> <rule ref="WordPress.PHP.DevelopmentFunctions"> <severity>0</severity> </rule> <rule ref="WordPress.NamingConventions.ValidFunctionName.MethodNameInvalid"> <severity>0</severity> </rule> <rule ref="WordPress.Arrays.MultipleStatementAlignment.DoubleArrowNotAligned"> <severity>0</severity> </rule> <rule ref="Generic.Formatting.MultipleStatementAlignment.NotSameWarning"> <severity>0</severity> </rule> <rule ref="Generic.Commenting.DocComment.MissingShort"> <severity>0</severity> </rule> <rule ref="WordPress.PHP.YodaConditions.NotYoda"> <severity>0</severity> </rule> <rule ref="Generic.Functions.OpeningFunctionBraceKernighanRitchie.ContentAfterBrace"> <severity>0</severity> </rule> <rule ref="WordPress.WhiteSpace.ControlStructureSpacing.NoSpaceAfterCloseParenthesis"> <severity>0</severity> </rule> <rule ref="WordPress.Arrays.ArrayDeclarationSpacing.AssociativeArrayFound"> <type>warning</type> </rule> <rule ref="WordPress.DB.DirectDatabaseQuery.NoCaching"> <severity>0</severity> </rule> <rule ref="WordPress.PHP.StrictInArray.MissingTrueStrict"> <type>error</type> </rule> <rule ref="Universal.Operators.StrictComparisons"> <type>error</type> </rule> <rule ref="WordPress.DB.DirectDatabaseQuery.DirectQuery"> <severity>0</severity> </rule> <rule ref="WordPress.DB.PreparedSQL.NotPrepared"> <type>warning</type> </rule> <rule ref="WordPress.Security.EscapeOutput.OutputNotEscaped"> <severity>0</severity> </rule> <rule ref="WordPress.PHP.DevelopmentFunctions.error_log_var_export"> <severity>0</severity> </rule> <rule ref="Universal.Arrays.DisallowShortArraySyntax"> <severity>0</severity> </rule> <rule ref="WordPress.Security.ValidatedSanitizedInput"> <properties> <property name="customSanitizingFunctions" type="array"> <element value="wc_clean"/> </property> </properties> </rule> <rule ref="Squiz.PHP.CommentedOutCode.Found"> <severity>0</severity> </rule> </ruleset>
Enter fullscreen mode Exit fullscreen mode

Do not forget to replace the plugin-text-domain.

The phpcs.xml file has exactly the same format as a normal ruleset.xml file, so all the same options are available in it.

Sample plugin folder structure as follows:
Plugin folder structure

Youtube Video: https://youtu.be/bKFQy3psNIo

Top comments (0)