@terminus/eslint-config-frontend

5.0.1 • Public • Published

Terminus ESLint Frontend Configuration

CI/CD Status MIT License
NPM version Library size

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

Table of Contents

Installation

  1. Install the package & required dependencies:
yarn add eslint @terminus/eslint-config-frontend \
  @angular-eslint/{eslint-plugin,eslint-plugin-template,template-parser} \
  @typescript-eslint/{eslint-plugin,parser} \
  eslint-import-resolver-typescript \
  eslint-plugin-{deprecation,import,jsdoc,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

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",
      },
    },
  ],
};

Readme

Keywords

none

Package Sidebar

Install

npm i @terminus/eslint-config-frontend

Weekly Downloads

4

Version

5.0.1

License

MIT

Unpacked Size

38.8 kB

Total Files

4

Last publish

Collaborators

  • bmalinconico-terminus
  • atlwendy
  • terminus_devops