ESLint – install and config – PhpStorm/WebStorm and git pre commit hook

Hello there! It’s been awhile since last post. Sorry 🙁

Let’s talk about JavaScript linting. If you don’t know what is it – go to wikipedia.

Quick Introduction

Currently we have four linting tools available:

  • JSLint
  • JSHint
  • JSCS
  • ESLint

In this article I’ll be using ESLint (if you want to read more about them here is a excellent post). I’m going to use my recent project from Karma tutorial (part1 and part2).

Installation

Ok, open your terminal and install ESLint as dev dependency with command:

Wait a second and your package.json should be updated :). Let’s init ESLint with:

Configuration

Configuration is all about code style. You can configure your own style but I don’t want to cover this in this article. I’m going to use the most popular one – AirBnb (es6 and es5 rules). To do this choose Use a popular style guide and AirBnb. Next select type of your configuration file (JavaScript, YAML or JSON) – I prefer JSON. ESLint will now add additional dev dependencies to your package.json and create config file eslintrc.json. By default AirBnb uses ES6 config. That’s fine but what if I want to use ES5? It’s easy to fix, open your ESLint config file it should look like this:

We need to change second line, amend „airbnb” to „airbnb/legacy” (more about airbnb configs). And that’s all 🙂 ESLint is ready to use. Try on example module:

PhpStorm / WebStorm configuration

Our favourite IDE has support for ESLint (and other linters). Configuration is pretty basic. Open your preferences and type ESLint in the search. Go to Language & Frameworks > JavaScript > Code Quality Tools > ESLint.

eslint-phpstorm-settings

  • check Enable,
  • Node interpreter should be pre populated, if not choose yours,
  • ESLint package should be also pre populated, if not choose it,
  • IDE should automatically find your Configuration file, but you can specify path to it,
  • all other options you can left empty.

Now head to Editor > Inspections > JavaScript > Code quality tools > ESLint and tick it.

eslint-phpstorm-inspections

That’s all. You should see all the code style error in the IDE :).

Git pre commit hook

As you set up your ESLint and configured it we are ready to step forward. What I’d like to do now is to add a hook which will be fired up before making a commit (more about hooks).

So we need to create a new file .git/hooks/pre-commit. Here’s my solution based on many found in the web:

Important, make this file executable! Now, try adding some JavaScript with invalid code style and making a commit. You should see error messages 🙂

Thanks for reading. Cheers.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *