@clark/eslint-config-ember

CLARK's eslint-config for Ember.js

Installation

# With TypeScript
yarn add -D eslint @clark/eslint-config-ember @clark/eslint-config-node typescript @clark/eslint-config-ember-typescript

# Without TypeScript
yarn add -D eslint @clark/eslint-config-ember @clark/eslint-config-node

Setup

Ember projects consist of up to three different types of JS source files:

Apps

• Files in the app tree or src tree (Module Unification) and tests tree / dummy app
• Node.js source files, like ember-cli-build.js or config/environment.js

Addons

• Files in the addon tree or src tree (Module Unification) and tests tree / dummy app
• Files in the app tree, which usually re-export files from addon
• Node.js source files, like index.js

Node.js and Ember source files obviously have fundamentally different linting requirements. The official Ember blueprint currently solves this by adding overrides for Node files and just using a single .eslintrc.js.

We have found this to be very brittle and hard to maintain on the long run. A detailed argument can be found in this Pre-RFC #450 "change eslint blueprint".

While the world is still waiting for eslint/rfcs#9 to bring a new and better config system to the table, we have found it much more feasible to create multiple root: true .eslintrc.js files instead of using overrides.

Remember to create .eslintignore files! Otherwise eslint might seemingly hang indefinitely, because it tries to lint your huge bundled dist files or node_modules.

Furthermore, we recommend to remove any linting integration from ember-cli. So this means uninstalling ember-cli-eslint and installing eslint instead. The default lint:js task (eslint .) is sufficient. When you want to use TypeScript, e.g. via @clark/eslint-config-ember-typescript you have to update it to eslint --ext ts,js ..

You can also remove any other pre-installed eslint dependencies, like eslint-plugin-ember and eslint-plugin-node. They are included in our configs.

Addons

.
├── .eslintrc.js
├── addon
│   └── .eslintrc.js
├── app
│   └── .eslintrc.js
└── tests
    ├── .eslintrc.js
    └── dummy
        └── config
            └── .eslintrc.js

// .eslintrc.js
module.exports = {
  root: true,
  extends: "@clark/node",
};

// addon/.eslintrc.js
module.exports = {
  root: true,
  extends: "@clark/ember-typescript",
};

// addon-test-support/.eslintrc.js
module.exports = {
  root: true,
  extends: "@clark/ember-typescript",
};

// app/.eslintrc.js
module.exports = {
  root: true,
  // Since `app` is merged with the parent app, which is not guaranteed to have
  // TypeScript installed, we need to restrict ourselves to JavaScript only.
  extends: "@clark/ember",
};

// tests/.eslintrc.js
module.exports = {
  root: true,
  extends: "@clark/ember-typescript/test",
};

// tests/dummy/config/.eslintrc.js
module.exports = {
  root: true,
  extends: "@clark/node",
};

Live Examples

• ember-link
• ember-on-modifier
• ember-dead-code
• ember-route-task-helper

Apps

.
├── .eslintrc.js
├── app
│   └── .eslintrc.js
└── tests
    ├── .eslintrc.js
    └── dummy
        └── config
            └── .eslintrc.js

// .eslintrc.js
module.exports = {
  root: true,
  extends: "@clark/node",
};

// app/.eslintrc.js
module.exports = {
  root: true,
  extends: "@clark/ember-typescript",
};

// tests/.eslintrc.js
module.exports = {
  root: true,
  extends: "@clark/ember-typescript/test",
};

// tests/dummy/config/.eslintrc.js
module.exports = {
  root: true,
  extends: "@clark/node",
};