Setup ESLint For Your Ember Project And Save Time

May 18, 2016 • 4 min read

You probably noticed that even in version 2.5.0 of ember-cli the default JS linter is JSHint - and there's nothing wrong with this.

But what if we're using ES6 and Babel which are not fully supported by JSHint? Luckily for us - there's a great solution out there called ESLint. I'll show you how to use it in your Ember project.

Let's start

Setting up ESLint is pretty easy, all we have to do is to install a few packages, customise our config and then remove JSHint from the test suite.

Installing packages

First, we need to install eslint and ember-cli-eslint. I recommend doing so in your project directory:

$ npm install --save-dev eslint ember-cli-eslint

This will install eslint and the eslint wrapper for ember-cli.

Note: You can also install eslint package globally, but I suggest you do it on a per project basis, so if you're working with a team you can be sure that they have all dependencies installed.

Setting up the parser

Next, you have to add .eslintrc, the custom parser, to your project. To do so, just add the following to your config file:

{ 
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  }
}

This will set ECMA 6 as the default parser for the project.

Disabling JSHint from the qunit test suite

To disable automatic JSHint linting during tests, open your ember-cli-build.js file and add these lines:

var app = new EmberApp(defaults, {
  ...
  'ember-cli-qunit': {
    useLintTree: false,
  },
  ...
}

Now, start your server and open localhost:4200/tests:

As you can see, we no longer have JSHint, and it’s been replaced by ESLint.

Summing up

That's it! You've installed ESLint as your default linter. The last thing you will likely want to do is to customise the ESLint config to fit your needs. You can do this from scratch, following the great ESLint guide or use some existing config from the web. I personally recommend using eslint-airbnb-config as a starting point and then, if needed, customising it using .eslintrc.

Stay tuned!

In the next post we’re going to tell you a little bit more about code quality and show you our approach to make sure your Ember code is of great quality.