Sridhar Katakam

Genesis and WordPress Tutorials

Linting and Formatting in Visual Studio Code for WordPress

by Leave a Comment

In the past, I wrote about setting up WordPress PHP code standards in Visual Studio Code.

This article shows how we can go one step further and set up JavaScript & CSS linting (code analysis for potential errors) and pretty printing / auto formatting for PHP, CSS & JS.

We are going to use Node, Composer, ESLint, Prettier, stylelint and EditorConfig and the configurations for these put together by Christoph Herr.

The focus is going to be on VSCode but the process should work in other editors such as Atom as well.

Step 1

Install

a) Node

Think of Node like the WordPress plugins repo, but for JavaScript.

By installing Node, we are essentially installing the Node CLI (Command Line Interface) globally (system-wide).

b) Composer globally

Think of Composer like the WordPress plugins repo, but for PHP.

Step 2

Download all the files from this Github repo and copy them to your project folder (active theme directory in my case).

  • .editorconfig: WordPress standards config file for the editor (use tabs and not spaces etc.)
  • .eslintrc.js: Config file for ESLint
  • .gitignore: List of entries to be ignored by Git
  • .stylelintscssrc.js: Styling rules for Sass files (not needed if Sass is not being used)
  • composer.json: Config file for Composer
  • package.json: Config file for Node
  • phpcs.xml.dist: Config file for PHP_CodeSniffer
  • stylelint.config.js: Config for stylelint

Step 3

a) Tell Node to install the packages specified in package.json.

In a terminal window inside your project root, run

npm install

This will add the following packages in the current project:

  • eslint: lints JavaScript code
  • eslint-config-wordpress: adds WordPress JavaScript standards
  • prettier: pretty prints (formats) JavaScript and with plugins like prettier-stylelint, other languages
  • prettier-eslint: contains the rules that ESLint should follow to fix the code formatted and passed by Prettier.
  • prettier-stylelint: enables Prettier to format CSS
  • stylelint: lints CSS
  • stylelint-config-wordpress: adds WordPress CSS standards
  • stylelint-order: orders CSS properties

b) Tell Composer to install the dependencies specified in composer.json:

composer install

Step 4

Next, let’s install these VSCode extensions which act as a bridge between the editor and our config files.

Step 5

Add the following in your VSCode user preferences:

"phpcs.standard": "WordPress-Core",
"phpcbf.standard": "WordPress-Core",
"phpcbf.executablePath": "./vendor/bin/phpcbf",
"stylelint.enable": true,
"css.validate": false,
"scss.validate": false,
"editor.formatOnPaste": true,
"prettier.eslintIntegration": true,
"prettier.stylelintIntegration": true,
"editor.formatOnSave": true,
"eslint.autoFixOnSave": true,
"[css]": {
    "editor.formatOnSave": true,
},
"[php]": {
    "editor.detectIndentation": true,
    "editor.useTabStops": true,
    "editor.formatOnSave": false,
    "editor.insertSpaces": false,
},
"[javascript]": {
    "editor.insertSpaces": true,
    "editor.detectIndentation": false,
    "editor.useTabStops": false
},
"[json]": {
    "editor.formatOnSave": false
},
"[xml]": {
    "editor.formatOnSave": false
}

Note:

1) To format PHP code you can right click on the document and Format Document or bring up the command palette and select Format Document.

2) phpcs.xml.dist has:

<!-- Check all globals have the expected prefix. -->
<rule ref="WordPress.NamingConventions.PrefixAllGlobals">
    <properties>
        <property name="prefixes" type="array" value="CHILD_THEME, CHILD_TEXT_DOMAIN"/>
    </properties>
</rule>

You may want to add your functions’ prefix in the above to fix errors such as these:

<!-- Check all globals have the expected prefix. -->
<rule ref="WordPress.NamingConventions.PrefixAllGlobals">
    <properties>
        <property name="prefixes" type="array" value="CHILD_THEME, CHILD_TEXT_DOMAIN, genesis_sample, custom"/>
    </properties>
</rule>

Also, to fix

add

// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Valid use case.

next to the line or above the line where the variable is present.

// Sets the content width based on the theme's design and stylesheet.
if ( ! isset( $content_width ) ) {
    // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Valid use case.
    $content_width = 702; // Pixels.
}

You can, of course, delete any rules that you find annoying or are not applicable to what you are doing.

3) Reload your workspace (Cmd + Shift + P, Reload Window) or restart the editor after making any changes to the config files.

References:

https://github.com/WordPress/wordpress-develop/blob/master/.editorconfig

https://getcomposer.org/doc/articles/versions.md#caret-version-range-

>