WordPress Standards for JavaScript and CSS in VSC

In previous articles I have talked about WordPress standards for PHP, how to install PHP CodeSniffer and the different WordPress standards (general, documentation, WooCommerce…), which you can see here:

• Installing WordPress standards on the development server
• Installing WordPress standards on Windows 10/11

We are now going to focus on its use with Visual Studio Code and especially JavaScript and, SASS (SCSS) and CSS.

phpcs in VSC

Once we have verified that phpcs works correctly in the command line and with the WordPress standards that we are going to use, to be able to use them in our editor, we install the extension.

Until recently, the most suitable choice was the phpcs extension by Ioannis Kappas, but he has stopped maintaining it, so if you use it, I recommend you to change it.

The most suitable choice is shevaua’ s phpcs extension which you can find at https://marketplace.visualstudio.com/items?itemName=shevaua.phpcs.

Then it depends if you have it activated globally or you want to activate it per project, in which case you will put it in the .vscode/settings.json file of the project:

    // PHPCS.
    "phpcs.enable": true,
    "phpcs.executablePath": "/root/.config/composer/vendor/bin/phpcs",
    "phpcs.standard": "WordPress",
    "phpcs.showWarnings": true,
    "phpcs.autoConfigSearch": true,

With the first line to activate it and the third one to define the standard, it would be enough, but we can configure, for example, where the executable is located if it is not available globally, etc.

The other options related to the project, I configure them in the .phpcs.xml file to indicate for example the text-domain or the PHP version to check.

JavaScript Standards

Like PHP and HTML, WordPress has its own standards for JavaScript. For the editor to mark the errors, we use the ESLint linter.

We install the standards by executing in the console of our project:

npm install @wordpress/eslint-plugin --save-dev

Once installed, from Visual Studio Code we install the Microsoft ESLint extension.

We create our project configuration file .eslintrc.json and add the following content:

{
  "extends": [ "plugin:@wordpress/eslint-plugin/recommended" ]
}

And we verify with a JavaScript file that it is marking the errors correctly.

CSS/SCSS standards

CSS standards can be found in the corresponding section of the handbook. For the editor to mark the errors, we use the Stylelint linter.

As with JavaScript, we install the standards by executing the command from the console (in the project directory):

npm install @wordpress/stylelint-config --save-dev

Once installed, from Visual Studio Code we install the official Stylelint extension.

We create our project configuration file .stylelintrc.json and add the following content to it:

{
    "extends": [
        "@wordpress/stylelint-config",
        "@wordpress/stylelint-config/scss"
    ]
}

In this case we have added validation rules for both CSS and SASS (SCSS), if we do not use SASS we can ignore the second line of configuration.

And again we check with a CSS/SASS file that it is marking the errors correctly.

I hope you find it useful to configure your development environment and have no excuses for not following WordPress standards.