Per Søderlind

I code for fun

  1. general
  2. WordPress linting using Code Climate, the Swiss Army knife of code linting

WordPress linting using Code Climate, the Swiss Army knife of code linting

 

tl;dr –  Code Climate is a very easy to implement linter for PHP, JavaScript, CSS etc.

[A linter] find code that doesn’t correspond to certain style guidelines

source: Wikipedia

When I upgraded my plugins to support WordPress 4.6, I decided that I wanted to follow the WordPress Coding Standards. I could have installed PHP CodeSniffer + the WordPress Coding Standards add-on, ES Lint, CSSlint etc, but why do that when I get it all from Code Climate ? Code Climate includes more than 30 different code analysis engines.

Prerequisite

I’m on a Mac, so I already had:

If you’re not on a Mac, please see the Code Climate CLI README.

Installation

brew tap codeclimate/formulae
brew install codeclimate

That’s it :)

Setup

Go to your projectfolder and create the Code Climate config file  –  .codeclimate.yml

cd PROJECTFOLDER
codeclimate init
codeclimate engines:install

`codeclimate init` will scan the files and folders in `PROJECTFOLDER` and create a `.codeclimate.yml` with engines suitable for your project.

If you have a `.codeclimate.yml` file in your project folder, do:

cd PROJECTFOLDER
codeclimate engines:install

`codeclimate engines:install` will install all the engines (linters) defined in `.codeclimate.yml`

WordPress

The PHP Codesniffer in Code Climate supports the following code standards:

WordPress — complete set with all of the sniffs in the project

  • WordPress-Core — main ruleset for WordPress core coding standards
  • WordPress-Docs — additional ruleset for inline documentation
  • WordPress-Extra — extended ruleset for optional best practices sniffs
    • includes WordPress-Core
  • WordPress-VIP — extended ruleset for WordPress VIP coding requirements
    • includes WordPress-Core

Add the one you’d like to use to your `.codeclimate.yml` file:

  phpcodesniffer:
    enabled: true
    config:
      standard: "WordPress-Core"

You can add multiple standards:

  phpcodesniffer:
    enabled: true
    config:
      standard: "WordPress-Core, WordPress-Docs"

See my complete `.codeclimate.yml` file at the end of this article.

Use

From the command line

In the PROJECTFOLDER, run codeclimate analyze. Code Climate will list the issues it finds, eg:

Starting analysis
Running duplication: Done!
Running eslint: Done!
Running fixme: Done!
Running phpcodesniffer: Done!

== plugin-customizer.php (2 issues) ==
192: No space after opening parenthesis is prohibited [phpcodesniffer]
192: Expected 1 spaces between opening bracket and argument "$wp_query"; 0 found [phpcodesniffer]

Analysis complete! Found 2 issues.

From inside your code editor

I’m using Atom, and Code Climate integrates well with the Atom linter plugin.

If you haven’t, install the add-ons using the atom package manager:

apm install linter
apm install linter-codeclimate

In Atom, the Code Climate linter will be triggered when you save the file.

codeclimate-issue

There’s also a vim plugin.

Bonus

If your project is an open source project, you can add it for free to codeclimate.com. Here’s my plugin customizer.

.codeclimate.yml

Here’s the config file I use for most of my projects:

Previous

WordPress Customizer Demo: In Twenty Sixteen, toggle post meta on or off

Next

WP Gears and the Heartbeat API

4 Comments

  1. Gladly found it, but It doesn’t support OS X 10.x at current time.

    • Per Søderlind

      It works like a charm on OS X 10.x, I’m using it daily (been using it since yosemite).

  2. Tor

    Thanks for this. But there’s an error in the instructions. I had to use “codeclimate analyze” to run the analysis, “codeclimate analySe” fails. Perhaps a spelling error on your end, or some locale setting?

Leave a Reply

Powered by WordPress & Theme by Anders Norén