Using ESLint in PhpStorm

ESLint is a linting utility for JavaScript which PhpStorm 2017.1 now supports.

I have been using the gulp ESLint plugin for a while now and run it before each deployment. This helps enforce code consistency and allows for easier on-boarding of new developers.

Having read an article on CSS-Tricks about enforcing CSS syntax and style, I had a look to see what PhpStorm supports. To my surprise, they have built-in support for ESLint. This is great as it allows you to spot any syntax errors during development. In the past this would only happen if you remembered to run the gulp task or before a deployment.

PhpStorm settings for ESLint

Now that ESLint runs whenever you edit JavaScript, you can see errors immediately. It is a much less frustrating workflow and forces you into good coding habits. The gulp task still runs ESLint before deployment, in case you use an editor other than PhpStorm.

ESLint warning of a syntax error

This is yet another reason why PhpStorm is my favourite IDE!


Final thoughts

Be sure to check out these examples of JavaScript style guides for ESLint: