Commons ESLint Plugin

This package contains custom plugins for ESLint in TypeScript projects.

This plugin imposes our coding conventions, including:

• Proper TypeScript naming conventions
• Proper import ordering
• Module aliasing for application code
• Other stylistic and syntactic conventions

This package requires the following peer dependencies to be installed:

eslint >= 8.0.0
@typescript-eslint/eslint-plugin >= 6.0.0
@typescript-eslint/eslint-parser >= 6.0.0

Install

npm install -D @knightinteractive/eslint-plugin

Or install the latest version with the required peer dependencies:

npm install -D eslint@latest \
  @typescript-eslint/eslint-plugin@latest \
  @typescript-eslint/eslint-parser@latest \
  @knightinteractive/eslint-plugin@latest

Extend the plugin in your ESLint configuration:

module.exports = {
  parserOptions: {
    project: 'tsconfig.json',
    sourceType: 'module',
  },
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:@knightinteractive/application',
  ],
}

// Or, for libraries, use the library config:
module.exports = {
  parserOptions: {
    project: 'tsconfig.json',
    sourceType: 'module',
  },
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:@knightinteractive/library',
  ],
}

Configurations in this plugin have the following default settings:

{
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module'
  },
}

To include files that are not part of the actual project (e.g. the src directory) in the linting process, define the parserOptions.project property in your .eslintrc.js to use the tsconfig.lint.json file instead of the default tsconfig.json:

⚠️ Caution: If you try and include a non-project Javascript file (such as the .eslintrc.js itself) in your main tsconfig.json file, it will affect the nesting of your build output. This is why we recommend using a separate tsconfig.lint.json file for linting.

{
  "extends": "./tsconfig.json",
  "include": [
    "./src/**/*",
    "./test/**/*",
    "./*.js",
    "./.*.js",
    "./*.ts"
  ]
}

Then reference it in your .eslintrc.js:

module.exports = {
  parserOptions: {
    project: 'tsconfig.lint.json',
    sourceType: 'module',
  },
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:@knightinteractive/library',
  ],
}

The @typescript-eslint/parser module will use the defined Typescript configuration file as a source of truth for which files to include.

Config Sets

This plugin exposes two config sets:

• application - used for application code
• library - used for library code

The difference being that the application configuration imposes the @knightinteractive/prefer-alias rule, whereas the library configuration does not (libraries should not use module aliasing at all)

Another difference is in the import ordering, which accounts for the lack of module aliasing in the library configuration.

Rules

Read the rule documentation for more information.