VS Code- configure WordPress coding standards

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"
  }

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"
        ]
    },
}

Run ./vendor/bin/phpcs -i command from your plugin directory to see the 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>

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:

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