WordPress Coding Standards
Photo by Chris Ried

Setting up WordPress Coding Standards in VS Code

Note: Here’s a more updated and simple guide.

Adhering to a certain set of coding standards is important when it comes to writing good quality code. It makes your code easier to maintain and read not only for yourself but other developers as well.

WordPress has its own set of coding standards and it is something you should to follow if you plan to contribute to Core, plugins or themes. Even if you are not, it’s still a good way to level up as a Developer.

Before we look at the steps, I’m going to assume you already have Composer installed. If not, here’s the official documentation on how to get it up and running.

Install PHP CodeSniffer (PHPCS)

composer global require "squizlabs/php_codesniffer=*"

PHPCS is a development tool that detects violations of coding standard and automatically corrects them. Do note that PHP 5.4 or greater is required.

Download WPCS

 git clone -b main https://github.com/WordPress/WordPress-Coding-Standards.git wpcs

cd to your desired directory and run the above command in your terminal. This will download WPCS into a folder called wpcs.

Personally, I’d create a Utilities folder and place coding standards, custom rulesets etc. inside.

Add WPCS to PHPCS

/path/to/composer/vendor/bin/phpcs --config-set installed_paths /path/to/WPCS, /path/to/another-standards

Now that we have WPCS and PHPCS in our system, we can run the above command and the latter know where our coding standard is located.

If you are getting the command not found: phpcs message, ensure that your path to PHPCS is correct. Since we installed it globally, the path should be something like /users/your_user_name/.composer/vendor/bin/phpcs

Also, do note that the installed_paths command overwrites any previously set installed_paths. If you have existing coding standards, please remember to include their paths together with whatever coding standards you are adding separated by a comma.

Check to ensure WPCS is added

/path/to/composer/vendor/bin/phpcs -i

If WPCS is added correctly, we should see the following output:

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

Congrats! We are done with the complicated part 🎉🎊. What’s left now is to configure VS Code!

Configuring VSCode

  1. Install phpcs and phpcbf extensions
phpcs extension
phpcbf extension

The phpcs extension enables linting for all “PHP files in our editor while phpcbf will try to beautify and fix our code according to the chosen coding standard.

  1. Configure settings.json

Once those two are installed, open up the editor settings under Code > Preferences > Settings. Toggle to the JSON view and add the following values:

"phpcs.enable": true,
"phpcs.executablePath": "/path/to/composer/vendor/bin/phpcs",
"phpcs.standard": "WordPress",
"phpcbf.enable": true,
"phpcbf.documentFormattingProvider": true,
"phpcbf.onsave": true,
"phpcbf.executablePath": "/path/to/composer/vendor/bin/phpcbf",
"phpcbf.standard": "WordPress",

Save the settings.json and restart VSCode.

  1. Test!

If everything is configured correctly, VSCode should start linting your PHP code. As seen in the above demo, our initial code violated the following rules:

  1. No spacing inside parenthesis
  2. Missing doc comment for function
  3. Not using Yoda conditions
  4. Not escaping output

Since we configured phpcbf.onsave: true, VSCode should auto fix some issues when we save the file (in our e.g., it fixed #1). If, for some strange reason, the auto save fails to work, try right click > Format Document.

As for the other issues, we can mouse over the underlined code to get more information and then fix them manually.

And that’s it. From now on, you should feel more confident about the quality of your code! 💪

Additional resources:

34 thoughts on “Setting up WordPress Coding Standards in VS Code”

  2. Hey Edmund,

    With this setup files aren’t getting saved and shows this message at the bottom right:

    > Saving ‘plugin.php’: Running ‘phpcbf’ Formatter (configure).

    Any idea?

    Reply

  6. Thank you.

    My settings.json file looks like this:

    “`json
    {
    “editor.insertSpaces”: false,
    “editor.wordWrap”: “on”,
    “prettier.useTabs”: true,
    “prettier.singleQuote”: true,
    “editor.formatOnSave”: false,
    “phpcs.enable”: true,
    “phpcs.executablePath”: “C:/Users/boxof/AppData/Roaming/Composer/vendor/bin/phpcs”,
    “phpcs.standard”: “WordPress”,
    “phpcbf.enable”: true,
    “phpcbf.executablePath”: “C:/Users/boxof/AppData/Roaming/Composer/vendor/bin/phpcbf.bat”,
    “phpcbf.documentFormattingProvider”: true,
    “phpcbf.onsave”: false,
    “phpcbf.standard”: “WordPress”,
    }
    “`

    Reply

  7. After I followed your instructions, I got this error: phpcs: Referenced sniff “WordPress.VIP” does not exist
    Can you please check and let me know the solution?

    Reply

  8. Hello Yin!

    It seems like your project has its own custom ruleset which includes WordPress.VIP. Could you check if your project folder (usually in the theme) includes either a phpcs.xml or phpcs.xml.dist file? If so, try removing it temporarily and see if it works. Custom rulesets will overwrite what is set in your VSCode settings.

    If it doesnt work could you show me your VSCode settings?

    Reply

    • Hey Ravi!

      It sounds like your PHPCS doesn’t know where the WPCS is located in your system (Step 3 – Add WPCS to PHPCS). Do make sure that the path to the WPCS folder is correct.

      If everything is configured properly u should see WPCS installed when you run /path/to/composer/vendor/bin/phpcs -i.

      Ed

      Reply

  10. Nice article Edmund.

    To fetch old phpcs config please execute this command:
    .config/composer/vendor/bin/phpcs –config-show

    Which list out older config paths.
    Therefore you can decide whichever older paths are need to be maintained then you can update the config command with new and old config set.

    With old coding standards:
    .config/composer/vendor/bin/phpcs –config-set installed_paths ~/code/wpcs,/home/username/oldcs1

    Ignore and override:
    .config/composer/vendor/bin/phpcs –config-set installed_paths ~/code/wpcs

    Unfortunately there is no append command therefore whenever updating you have to manually do this.

    Reply

  13. Hi,
    I have problem with the path [windows 10, vs code]
    PHPCBF: spawn C:/Users/Hayder/AppData/Roaming/Composer/vendor/bin/phpcbf ENOENT. executablePath not found.

    Reply

  14. Hi
    Thanks for an easy to follow article. I’m new convert from Brackets to VScode so please forgive me if there is an obvious fix to this.
    After following your article, when I now open some WP PHP in VScode it highlights a number of errors. For example, two of many are “Expected 1 spaces before closing parenthesis; 0 found phpcs” in my function calls and “Tabs must be used to indent lines; spaces are not allowed phpcs” at the start of lines.
    Both are easily fixed, which removes the red squiggly line and the report of an error.
    When I Format Document, either manually or upon file save, the changes I’ve made to resolve the two example issues are removed and the red squiggly lines (and error reports) return.
    It seems as though the formatter is changing my code and breaking it’s own rules.
    Everything seems to be set up OK. phpcbf -i returns
    The installed coding standards are MySource, PEAR, PSR1, PSR12, PSR2, Squiz, Zend, WordPress, WordPress-Core, WordPress-Docs and WordPress-Extra
    Any help would be greatly appreciated.

    experience a problem when using the

    Reply

    • Hello Phil!

      Sorry for the late response! It sounds like the default PHP formatter for your editor is not configured correctly. Here’s what I have in my VSCode settings:

      "[php]": {
      "editor.defaultFormatter": "persoderlind.vscode-phpcbf"
      }

      Can you try and see if it helps?

      Ed

      Reply

  16. Thank you! This helped me lot.

    The config.json is missing a comma behind
    “phpcs.standard”: “WordPress”

    Reply

  19. Hello Edmund,
    “Is there any configuration so that the echo text will also warn me when the translation is missing? Also, where can I find the ruleset for WPCS and PHPCS?”

    Would you like me to provide more information on the ruleset for WPCS and PHPCS?

    Thank you.

    Reply

Leave a Comment