Linting JavaScript with JSCS

Authored by

Our wp-dev-lib provides a common set of configs and scripts for facilitating theme and plugin development, including a pre-commit hook, and integrations for Travis CI, JSHint, PHP_CodeSniffer, and more. As of today, the “more” now includes a new JavaScript linter called JSCS. This tool augments the basic linting that JSHint does, but JSCS goes much further and flags coding convention problems. Just as a WordPress standard was developed for PHP_CodeSniffer, a WordPress preset has been developed for JSCS, to automatically check how JS adheres to the WordPress JS coding standards.

I’ve opened a Trac ticket to add a JSCS config to Core and I opened a pull request to this added to VIP Quickstart. But you can also just add the .jscsrc to any of your plugins to start using it now. Here’s a quick way to update an existing plugin which uses dev-lib:

cd dev-lib
git pull origin master
cd ..
git add dev-lib
ln -s dev-lib/.jscsrc .
git add .jscsrc
git commit -m "Add JSCS integration"

You’ll also have to install JSCS itself:

npm install jscs -g

When JSCS is installed and a .jscsrc found up the directory tree, the pre-commit hook in dev-lib will automatically use it.

You can also integrate JSCS into your IDE. PhpStorm has support for JSCS. You’ll have to have the path to your node interpreter and the path to where Node installed JSCS; on my Mac, these are /usr/local/bin/node and /usr/local/lib/node_modules/jscs respectively.

phpstorm-config1

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.