@heinzelman-labs/eslint-config-typescript

A personal ESLint shareable config for TypeScript projects based on the recommended rules defined by @typescript-eslint/eslint-plugin 5.59.11.

TypeScript rules only apply to .ts and .tsx files so that this config also works for mixed JS/TS code bases.

References

At a minimum (using the fast config), this config extends the eslint-recommended and recommended configs provided by @typescript-eslint/eslint-plugin 5.59.11.

While eslint-recommended disables such Eslint rules that are already handled natively by TypeScript, recommended contains the generally recommended rule configs for TypeScript projects.

The default config provided by this package additionally extends recommended-requiring-type-checking.

Source code of the package can be found on ...

• Gitlab
• GitHub (Mirror)

Installation

yarn

yarn add -D @heinzelman-labs/eslint-config-typescript

npm

npm i -D @heinzelman-labs/eslint-config-typescript

Usage

Basic .eslintrc.js with type-checking

The default config provided by @heinzelman-labs/eslint-config-typescript does not only extend from @typescript-eslint/recommended but also from @typescript-eslint/recommended-requiring-type-checking. These highly valuable rules require type information, thus you will need to add a tsconfig.json to your project directory.

module.exports = {
    extends: [
        // Typically either using base or React Eslint config ...
        '@heinzelman-labs/eslint-config-react',
        // ... in tandem with the TypeScript Eslint config.
        '@heinzelman-labs/eslint-config-typescript'
    ],
    rules: {
        // Customize base / React rules ...
    },
    overrides: [
        {
            files: ['*.ts', '*.mts', '*.cts', '*.tsx'],
            rules: {
                // Customize TypeScript rules ...
            }
        },
        {
            files: ['*.tsx'],
            rules: {
                // Customize rules exclusively for TypeScript components ...
            }
        }
    ],
    env: {
        // Environments as needed ...
    }
};

Basic .eslintrc.js without type-checking

In order to only use fast feedback rules which operate purely based on syntax, extend from @heinzelman-labs/eslint-config-typescript/fast. This may come in handy when dealing with really large codebases or you feel that ESLint is slow when it's run by your IDE.

  module.exports = {
    // ...
    extends: [
-       '@heinzelman-labs/eslint-config-typescript'
+       '@heinzelman-labs/eslint-config-typescript/fast'
    ]
    // ...
  };

Mono-Repo .eslintrc.js

For mono-repos using either @heinzelman-labs/eslint-config-base or @heinzelman-labs/eslint-config-react don't forget to add your package directories.

const { resolve } = require('path');

module.exports = {
    // ...
    rules: {
        'import/no-extraneous-dependencies': ['error', { 
            packageDir: [
                __dirname,
                resolve(__dirname, 'packages/foo'),
                resolve(__dirname, 'packages/bar')
            ]
        }]
    }
    // ...
};

CLI

I would recommend to not use glob patterns or filenames, but to use directories to specify target files where possible. Then use the --ext option to define relevant file extensions. This way ESLint will not complain if you end up not having a certain file type among your sources anymore, e.g. .js. You may also use .eslintignore to exclude files from the result set as needed.

eslint ./src --ext .js,.ts,.tsx

Changes compared to eslint-config-base, eslint-config-react, @typescript-eslint/eslint-plugin

Although this config does neither actively extend @heinzelman-labs/eslint-config-base nor @heinzelman-labs/eslint-config-react, it does adjust some of their rules because I personally often use one of them in tandem with @heinzelman-labs/eslint-config-typescript and some of their rules just don't make sense in a TypeScript context.

Difference from @heinzelman-labs/eslint-config-base

  // Can be turned off for TypeScript projects because TypeScript
  // does its own lookups.
- 'import/no-unresolved': ['error', { 
-     commonjs: true, 
-     caseSensitive: true 
- }],
+ 'import/no-unresolved': 'off',

  // Rule must be disabled as it can report incorrect errors. 
  // `@typescript-eslint/no-use-before-define` is used instead.
- 'no-use-before-define': ['error', { 
-     functions: false, 
-     classes: true, 
-     variables: false 
- }],
+ 'no-use-before-define': 'off'

Note: A number of other rules get disabled or modified by eslint-recommended, recommended and recommended-requiring-type-checking.

Difference from @heinzelman-labs/eslint-config-react

  // Typically not using PropTypes in TypeScript projects, so only 
  // error on components that have a propTypes block declared.
  'react/prop-types': ['error', {
      ignore: [],
      customValidators: [],
-     skipUndeclared: false,
+     skipUndeclared: true
  }]

Difference from @typescript-eslint/eslint-plugin

eslint-recommended

No changes.

recommended

- '@typescript-eslint/no-empty-function': 'error',
+ '@typescript-eslint/no-empty-function': ['error', {
+     allow: [
+         'arrowFunctions',
+         'functions',
+         'methods'
+     ]
+ }],

- '@typescript-eslint/no-unused-vars': 'warn',
+ '@typescript-eslint/no-unused-vars': ['error', {
+     vars: 'all',
+     varsIgnorePattern: '^React$',
+     args: 'after-used',
+     ignoreRestSiblings: true
+ }]

recommended-requiring-type-checking

No changes.

Additional rule configs

'@typescript-eslint/explicit-function-return-type': ['error', {
    allowExpressions: true
}],

'@typescript-eslint/no-use-before-define': ['error', {
    functions: false,
    classes: true,
    variables: false,
    enums: true,
    typedefs: false,
    ignoreTypeReferences: true
}]

License

MIT License