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?

Answer 1

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