How can we customize Wordpress coding standards and use them in VSCode?

Question

How can we customize Wordpress coding standards on Windows and use them with VSCode? I am trying to do this globally so I don't have to do it for every project (I don't think currently that this is a bad idea?) but I guess the same thing can be applied to local project, only paths should be changed.

First, I have installed them in C:\wamp64\www\_standards\wpcs and I have set correct path using:

phpcs --config-set installed_paths C:\wamp64\www\_standards\wpcs

Now when I do phpcs -i I can see that WordPress standards are installed

The installed coding standards are MySource, PEAR, PSR1, PSR12, PSR2, Squiz, Zend, WordPress, WordPress-Core, WordPress-Docs, WordPress-Extra and WordPress-VIP

and in VSCode User Settings I did

"phpcs.enable": true,
"phpcs.standard": "WordPress"

So far everything seems to be working nicely. Now, how do I customize them and disable few things, like Spaces must be used to indent lines; tabs are not allowed?

There is something written about using custom rules and here is their sample file, so I created C:\wamp64\www\_standards\phpcs.xml file

<?xml version="1.0"?>
<ruleset name="Custom">

     <!-- Enable colors in report -->
     <arg name="colors"/>

     <!-- Add source codes in the report -->
     <arg value="s"/>

     <!-- Load WordPress Coding standards -->
     <rule ref="WordPress"/>

     <!-- Customize -->
     <rule ref="WordPress">
          <exclude name="Generic.WhiteSpace.DisallowSpaceIndent.SpacesUsed" />
     </rule>

</ruleset>

This way nothing shows up after I do phpcs -i (not even WordPress standards show up)

phpcs --config-set installed_paths C:\wamp64\www\_posao\_standards\wpcs,C:\wamp64\www\_posao\_standards

But, if I rename phpcs.xml to ruleset.xml and I repeat previous code for installing paths I get this

The installed coding standards are MySource, PEAR, PSR1, PSR12, PSR2, Squiz, Zend, WordPress, WordPress-Core, WordPress-Docs, WordPress-Extra, WordPress-VIP and _standards

So I changed User Settings in VSCode

phpcs.standard": "_standards"

Now, how do I rename this _standards to a better name and how do I load WordPress standards first and overwrite it with custom rules? Because contents of file, if they are even loaded, aren't used - I still get Spaces must be used to indent lines; tabs are not allowed when I manually call phpcs page.php.

EDIT: So, since I had WPCS installed outside of projects with config-set already pointing to that folder, I have placed only phpcs.xml file inside Wordpress theme and now I can manually call phpcs page.php - it works nice. But now is the problem that I can't set it in VSCode so that it automatically runs after saving file?

Note that you don't need to install an XML file like you did as you haven't written any custom sniff classes. You can just use the full path to the file as the "standard" argument. E.g., `phpcs --standard=/path/to/ruleset.xml ...`. Hopefully, you can just type that path into VSCode as the `standard` and it would work as well. — Greg Sherwood, Jul 19 '18 at 23:05

score 1 · Accepted Answer · answered Aug 22 '18 at 19:16

A couple of pointers:

The phpcs.xml file (can also be phpcs.xml.dist and other similar variations that have a preferred order) (not ruleset.xml), should be in the root of your project code, not in the directory you installed WPCS.
The VS Code config would then be the path (absolute or relative) to that phpcs.xml file:

"phpcs.standard": "/path/to/project/phpcs.xml"

or

"phpcs.standard": "./phpcs.xml"

You'll still need to ensure that the phpcs executable you're referring to has got the WordPress standards registered.

Reference: https://marketplace.visualstudio.com/items?itemName=ikappas.phpcs

Mayeenul Islam · Answer 2 · 2019-08-29T02:15:27.280

I enabled WordPress Coding Standards (WPCS) after a long searching and try-outs. Here's what I did in a Windows 10 (Home) machine.

Please note, I activated WPCS only in Visual Studio Code, and not in project scope using composer.json and ./vendor/

Steps I followed:

In cmd or git bash run composer global require "squizlabs/php_codesniffer=*"

The installation path would be:

C:\Users\{YOUR USER}\AppData\Roaming\Composer\vendor\bin

Install the phpcs VSCode Extension (by Ioannis Kappas)
In VSCode, File » Preferences » Settings (ctrl + ,)
Search "phpcs"
Now in Phpcs: Executable Path put: C:\Users\{YOUR USER}\AppData\Roaming\Composer\vendor\bin\phpcs (don't forget to add phpcs at the tail)
Somewhere in your computer, create a directory for storing WordPress Coding Standards (eg. coding-standards) (ref: tommcfarlin)
Inside the directory (eg. coding-standards/) run the command: composer create-project wp-coding-standards/wpcs:dev-master --no-dev
Open a command window and run: C:/Users/{YOUR USER}/AppData/Roaming/Composer/vendor/bin/phpcs --config-set installed_paths H:/coding-standards/wpcs (H:/coding-standards/wpcs would be your path, you did in step 6)

The installed_paths is updated (overridden) in C:\Users\{YOUR USER}\AppData\Roaming\Composer\vendor\squizlabs\php_codesniffer\CodeSniffer.conf. If your command in step 7 failed somehow, you can manually edit this file and add the path to the WPCS here.

Add a phpcs.xml or phpcs.xml.dist in your project root with content like:

<?xml version="1.0"?>
<ruleset name="YOURPROJECT">
    <config name="minimum_supported_wp_version" value="4.4.0" />
    <!-- <config name="testVersion" value="0.6-"/> -->

    <rule ref="WordPress-Core" />
    <rule ref="WordPress-Docs" />
    <rule ref="WordPress-Extra" />

    <rule ref="WordPress.WP.I18n">
        <properties>
            <property name="text_domain" type="array" value="your-text-domain" />
        </properties>
    </rule>

    <!-- Check all PHP files in directory tree by default. -->
    <arg name="extensions" value="php"/>
    <file>.</file>

    <exclude-pattern>/docker/*</exclude-pattern>
    <exclude-pattern>/node_modules/*</exclude-pattern>
    <exclude-pattern>/tests/*</exclude-pattern>
    <exclude-pattern>/vendor/*</exclude-pattern>
</ruleset>

It's a template. Don't forget to update the minimum_supported_wp_version with your project's data. For a sample template, See phpcs.xml.dist.sample - WordPress Coding Standard

If it's necessary, restart VSCode, and you are done

How can we customize Wordpress coding standards and use them in VSCode?

2 Answers2