Linting Your Code: Installing the Linters

Dan Holloran Avatar Dan Holloran • August 27, 2015

Linting is basically the act of running your code through a tool that catches syntax issues, common pitfalls, and helps enforce a general coding style among other things. This does not actually test the code like a unit test or integration test. How ever it helps stop you from shooting yourself in the foot with simple typos.

Such as if ( $foo = 1 )... which technically would always evaluate to true. A linter will through help by notifying you that something is not quite right and you can fix your code to be if( 1 === $foo )... which sets $foo to strictly equal 1 and even if you created the first typo of = instead of == PHP would throw an error.

Installing code linters is pretty simple as long as you have a few perquisites installed. Node.js, NPM, Ruby, Git, Homebrew, and Homebrew PHP are all required to install the linters. If you do not have these items installed or your not sure check out this post that will help you get started. We will be installing SCSS-Lint, JSHint, JavaScript Code Style (JSCS), and PHP Code Sniffer (PHPCS) with WordPress Coding Standards.

SCSS-Lint handles linting your Sass/SCSS code if you use Stylus check out Stylint, plain old CSS check out CSSLint, and for LESS if you know of a linter I would love to hear about it. JSHint and JSCS are both for Javascript I have also heard good things about ESLint which is installed pretty much the same way as JSHint. PHPCS handles linting your PHP code there is also PHP Mess Detector (PHPMD). However, I do a large amount of WordPress work and PHPCS already has WordPress Coding Standards so it works for me.

So lets get started!

Everything with a $ should be ran in the terminal without the ($ ).


Installing PHPCS

Installing PHPCS is the hardest of the linters the rest should be fairly simple.

$ brew install php-code-sniffer

Make sure linter is in your $PATH (It should return the path to the executable)

# /usr/local/bin/phpcs
$ which phpcs

Go to the PHPCS directory

# Make sure to change {PHPCS_VERSION} to the installed PHPCS version 2.3.2 is the current version as of this post.
$ cd /usr/local/Cellar/php-code-sniffer/{PHPCS_VERSION}/CodeSniffer/Standards

Install WordPress PHPCS standards

$ git clone -b master` https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git wpcs

Add WordPress standards to PHPCS configuration.

# Make sure to change {PHPCS_VERSION} to the installed PHPCS version 2.3.2 is the current version as of this post.
$ phpcs --config-set installed_paths /usr/local/Cellar/php-code-sniffer/{PHPCS_VERSION}/CodeSniffer/Standards/wpcs

Check the installed standards, make sure one is WordPress.

$ phpcs -i

Set the default standard.

$ phpcs --config-set default_standard WordPress


JSCS Installation

Install JSCS

$ npm install -g jscs

Make sure linter is in your $PATH (It should return the path to the executable)

# /usr/local/bin/jshint
$ which jscs

Configuration is handled via the .jscs.json you can read more about the available configuration options in the docs.

You can check out my JSCS configuration.


JSHint Installation

Install JSHint

npm install -g jshint

Make sure linter is in your $PATH (It should return the path to the executable)

$ which jshint

Configuration is handled via the .jshintrc you can read more about the available configuration options in the docs.

You can check out my JSHint configuration.


SCSS-Lint Installation

Install SCSS Lint

$ gem install scss_lint
  1. Make sure linter is in your $PATH (It should return the path to the executable)
$ which scss-lint

Note: Configuration is handled via the Configuration is handled via the .scss-lint.yml you can read more about the available configuration options in the docs.

You can check out my SCSS-Lint configuration.


Wrapping Up

Well that was not too bad was it? No I didn't think so. As it stands now you could run each linter via the command line and see the issues. However, that is definitely not an efficient way to lint your code. Luckily for you there are plugins for Atom and Sublime text 3 which are easy to get setup. You can lean how to install the Sublime Text 3 linters here. You can also run them with your build tools such as Grunt.js or Gulp.js even though I personally prefer the inline linting of the editors.