ESLint Config Typescript

ESLint config based on AirBnB for TypeScript & CDK.

Table of contents

• Installation
• Usage
• Default Rules
  • import/prefer-default-export
  • max-params
  • no-console
  • @typescript-eslint/member-delimiter-style
  • @typescript-eslint/naming-convention
    • Interface
    • Class
    • Enum
    • Variable
    • Function
    • ClassProperty
    • ObjectLiteralProperty
• CDK Rules
  • no-new
  • @typescript-eslint/naming-convention
    • ObjectLiteralProperty
• Rules only
• Overrides
  • import/no-extraneous-dependencies

Installation

yarn add --dev @sdc-production/eslint-config-typescript

# Or with npm
npm install --save-dev @sdc-production/eslint-config-typescript

Usage

module.exports = {
  root: true,
  parserOptions: {
    project: './tsconfig.json'
  },
  extends: [
    "@sdc-production/eslint-config-typescript",
    // Use this in CDK projects instead
    "@sdc-production/eslint-config-typescript/cdk",
    // Use this if you only need the rules and overrides.
    "@sdc-production/eslint-config-typescript/rules-only",
  ],
}

The short version @sdc-production/typescript does also work. However, that is not recommended by ESLint, as it can lead to name clashes.

Default Rules

import/prefer-default-export

Using default exports can lead to different names in imports. Therefore, named imports are preferred.

Value: off

👎 Don't

// bar-1.ts
import foo from 'foo';
foo.bar();

// bar-2.ts
import bar from 'foo';
bar.bar();

👍 Do

import { bar } from 'foo';
bar();

max-params

Functions with too many parameters either do too much or introduce too many variables.

Value: ['error', 3]

👎 Don't

function foo(a: string, b: string, c: string, d: string): void {}

👍 Do

interface FooProps {
  a: string;
  b: string; 
  c: string; 
  d: string;
}

function foo(props: FooProps): void {}

// OR if possible
function foo(a: string, b: string): Something {}
function bar(foo: Something,  c: string, d: string): void {}

const resultOfFoo = foo(...);
bar(resultOfFoo, ...)

no-console

Logging should never be considered bad.

Value: off

@typescript-eslint/member-delimiter-style

There should only be one delimiter for members in interfaces or types.

Value: ;

@typescript-eslint/naming-convention

Interface

Value: PascalCase with no I prefix (/^(?![I][A-Z])/)

Guideline by TypeScript for contributors.

Class

Value: PascalCase

Enum

Value: PascalCase

Variable

Value: camelCase, UPPER_CASE

Function

Value: camelCase

ClassProperty

Value: camelCase

ObjectLiteralProperty

Value: camelCase

CDK Rules

no-new

Either no-new or no-unused-var would be thrown when you only need to create a resource but not using it elsewhere.

Value: off

Example

new Bucket(myStack, 'Bucket');

@typescript-eslint/naming-convention

ObjectLiteralProperty

Environments of Lambdas (and any other place) should be UPPER_CASE and properties of CFN resources can be PascalCase as well.

Value: camelCase, UPPER_CASE, PascalCase

Rules only

Only provides the rules and overrides from the base config and no other configuration. This can be used when the e.g. the parser is configured elsewhere but you still want to have the rules.

Overrides

import/no-extraneous-dependencies

Provides only the Rules and Overrides from the base configuration and no other configuration. This can be used if e.g. the parser is configured elsewhere but you still want to have the rules. Common use case would be inside frontend configurations like in Vue.