Terminus ESLint Frontend Configuration

---

🚨 ATTENTION: THIS REPO HAS MOVED 🚨

We have moved to separately published packages from a monorepo.

Please update any bookmarks to point to the new repo.

NOTE: This package will still be published to the existing NPM package.

🚨

---

A collection of JavaScript & TypeScript lint rules for Terminus frontend codebases.

Table of Contents

• Installation
• Ruleset overview
• Set up
  • 1. Create a config file and extend the Terminus ruleset
  • 2. Override rule definitions as needed
• Rule decisions
• File overrides

Installation

1. Install the package & required dependencies:

$ yarn add eslint \
  @terminus/eslint-config-frontend \
  @angular-eslint/eslint-plugin \
  @angular-eslint/eslint-plugin-template \
  @angular-eslint/template-parser \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser \
  eslint-import-resolver-typescript \
  eslint-plugin-deprecation \
  eslint-plugin-import \
  eslint-plugin-jsdoc \
  eslint-plugin-prefer-arrow \
  -D

Ruleset overview

Using ESLint's file override ability our config now lives in a single file.

• Base rules are applied to all linted files.
• TypeScript & Angular specific rules are applied to .ts files.
• HTML rules are applied to *.component.html files (currently no HTML rules active).

Set up

1. Create a config file and extend the Terminus ruleset

Create a ESLint config file at the root level named .eslintrc.js and extend the base ruleset:

module.exports = {
  extends: ['@terminus/eslint-config-frontend'],
};

NOTE: If your primary TSConfig file is NOT at the project root and named tsconfig.json you need to overwrite the parser options to point to your config file.

module.exports = {
  extends: ['@terminus/eslint-config-frontend'],
  parserOptions: {
    project: './my/custom/tsconfig.special.json',
  }
};

NOTE: Linting during the CI process is the most strict and will fail if any issues are found. The only way a linting issue makes it to CI is because someone didn't lint before committing.

2. Override rule definitions as needed

// TODO: Do they need to overwrite entire rule or only prefix??

module.exports = {
  extends: ['@terminus/eslint-config-frontend'],
  rules: {
    '@angular-eslint/prefer-on-push-component-change-detection': 'error',
  },
};

3. Add a linting command to package.json

Example scripts:

{
  "name": "My Project",
  "scripts": {
    "app:lint:ts": "npx eslint \"projects/my-app/**/*.{js,ts}\" --config .eslintrc.js",
    "app:lint:ts:fix": "yarn run app:lint:ts --fix"
  }
}

Rule decisions

Each rule is accompanied by a comment outlining the reasoning behind the decision to include the rule.

See rules.js.

File overrides

Rules can be adjusted for specific globs at the consumer level using ESLint file overrides:

NOTE: Several rules are already disabled for .spec and .mock files.

module.exports = {
  "extends": ['@terminus/eslint-config-frontend'],
  "overrides": [
    // Disable certain rules for spec and mock files:
    {
      "files": [
        "*.spec.ts",
        "*.mock.ts",
      ],
      "rules": {
        "no-magic-numbers": "off",
      },
    },
  ],
};