It pays to keep your JavaScript well-formatted, and having it adhere to a code quality standard. Depending on the application and who’s working on it, one may want to setup different code style guides. Over time, my standard tools of choice have evolved to Prettier for code formatting, and a custom selection of ESLint rules provided by the Ember Suave ESLint plugin.

After working on several Ember apps and pretty much setting up the same linting strategy, I’ve decided to make a starter template Ember app to use for new Ember apps. If you’re starting a new Ember project, you can pick it up from sarupbanskota/ember-linted-app.

If you already have an Ember project and would like to bring world domination to the code styling, you can follow along with me as I outline how I set up ember-linted-app.


Create new Ember app

Start by creating a new Ember app. I prefer to skip npm at first, and then run a yarn install within the repository. That leaves us with a yarn.lock file which we’ll commit in.

ember new ember-linted-app --skip-npm && cd ember-linted-app && yarn install

Install ESLint and remove JSHint

For Node 4+, ESLint can be setup with:

ember install [email protected]

Since ember-linted-app is < Ember 2.5.0, it follows the instructions provided on ember-cli-eslint README.

// ember-cli-build.js
module.exports = function(defaults) {
  const app = new EmberApp(defaults, {
    'ember-cli-qunit': {
      useLintTree: false
    }
  });
};

For those on Ember 2.5.0+, you just need to run:

yarn remove ember-cli-jshint --dev

Remeber to do a quick check in case there are stray .jshintrc files in your project - you want to remove them.

Install Prettier

Prettier rules are available through an ESLint plugin.

yarn add prettier eslint-plugin-prettier --dev

Following this, you want to configure the .eslintrc.js file to stick to prettier rules:

{
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

Next, any ESLint rules that may conflict with Prettier must be turned off.

yarn add eslint-config-prettier --dev

Setup pre-commit hook

A combination of lint-staged and husky can make your future linting process automagical.

yarn add lint-staged husky --dev
// package.json
{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,json}": [
      "prettier --write",
      "git add"
    ]
  }
}

If you want to pre-commit differently, there are more options explained on the Prettier README.

Install Ember Suave

Just like Prettier, Ember Suave is available as an ESLint plugin too.

yarn add eslint-plugin-ember-suave --dev

Since Prettier is doing the code formatting, you don’t want to use Ember Suave’s base rules, just the recommended rules. Unfortunately, the recommended rules extend from base rules, so you’ll just manually mention the rules you’re interested in, in .eslintrc.js.

The final ESLint config should be as follows:

// .eslintrc.js
module.exports = {
  root: true,
  parserOptions: {
    ecmaVersion: 2017,
    sourceType: "module"
  },
  extends: ["prettier"],
  env: {
    browser: true
  },
  plugins: ["prettier", "ember-suave"],
  rules: {
    // Formatting
    "prettier/prettier": "error",

    // ES6
    "arrow-parens": ["error", "always"],
    "generator-star-spacing": [
      "error",
      {
        before: false,
        after: true
      }
    ],
    "no-var": "error",
    "object-shorthand": ["error", "always"],
    "prefer-spread": "error",
    "prefer-template": "error",

    // Overrides for Ember
    "new-cap": [
      "error",
      {
        capIsNewExceptions: ["A"]
      }
    ],

    "ember-suave/no-const-outside-module-scope": "error",
    "ember-suave/no-direct-property-access": "error",
    "ember-suave/prefer-destructuring": "error",
    "ember-suave/require-access-in-comments": "error",
    "ember-suave/require-const-for-ember-properties": "error"
  }
};

Fixing violations on existing code

We should now expect two categories of violations - code formatting ones reported by Prettier, and those based on Ember Suave rules.

For the code formatting ones, an npm script can help us format our existing files:

//package.json

"scripts": {
  "prettify": "find app config tests -name '*.js' -type f | xargs prettier --write"
}

Run it with:

npm run prettify

Commit these changes, and the code should now conform to Prettier rules!

On a new Ember project, the violations from Ember Suave are few in number, so I just manually fix them. I intend to write Babel plugins to help automate this; haven’t had a chance yet. On larger projects, this ends up being a gradual exercise, and often I’ll comment out the specific ESLint rule until I’ve managed to fix all violations.

To help ease the transition, you can make use of Lebab (yep, that’s Babel in reverse!) plugins. Among the safe transforms, I’ve had success with arg-spread, obj-method and obj-shorthand transforms. Within typical Ember codebases, the let and template transforms also usually do alright, although they’re listed as being currently unsafe.


Cheers! Hopefully this article helped you lint your Ember code better - shout out on Twitter if you had comments or if you run into problems.