Linting and Code Formatting

Catch bugs and stop thinking about formatting

After installing dependencies via npm and Composer, you’ll have a number of tools for linting and code formatting at your disposal:

• ESLint
• Prettier
• PHP_CodeSniffer

I’ve become a much better developer by using linters, and removing the mental burden of code formatting is an easy way to increase your productivity (assuming you’re the sort of person to agonize about code formatting).

The tools above are used by _tw as follows:

ESLint

• Lints JavaScript files via code-quality rules that help you catch bugs.
• Performs class name ordering and enforces best practices for Tailwind classes added as attributes in your theme’s PHP files.

Prettier

• Formats JavaScript and CSS files.
• Performs class name ordering for Tailwind classes added via @apply in your theme’s CSS files.

PHP_CodeSniffer

• Lints PHP files via code-quality rules that help you catch bugs, with WordPress-specific rules from WordPress Coding Standards for PHP_CodeSniffer.
• Formats PHP files.

The combination above gives you robust linting and code formatting across your theme’s PHP, CSS and JavaScript files. You’ll also find a .editorconfig file in your generated theme’s root directory based on the editor configuration used by WordPress core.

Via your editor

To get the most out of the tools above, you’ll probably want to use them via your editor. In VS Code, I use the following extensions:

• EditorConfig for VS Code
• ESLint
• PHP_CodeSniffer
• Prettier – Code formatter

In PhpStorm, I was able to duplicate my preferred linting and code formatting workflow from VS Code using only bundled plugins.

Via the command line

To run ESLint and Prettier from the command line, you can use the following npm commands:

npm run lint
npm run lint-fixCode language: plaintext (plaintext)

For PHP_CodeSniffer, you can use:

composer run php:lint
composer run php:lint:autofixCode language: plaintext (plaintext)

All Documentation