DEV Community

Mahbub Rabbani
Mahbub Rabbani

Posted on • Edited on

1

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


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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay