TypeScript ESLint Converter

Automatic ESLint rule conversions for TypeScript.

ESLint replaces TSLint for linting TypeScript.

Existing JavaScript rules will be converted to support TypeScript, so you can combine this with base configurations such as airbnb easily. See below for full details.

Installation

This assumes you have already installed and configured ESLint.

npm install --save-dev typescript-eslint-converter

Change your .eslintrc.js:

const typescriptEslintConverter = require('typescript-eslint-converter');

module.exports = typescriptEslintConverter({
  // existing configuration here; for example airbnb:
  extends: ['airbnb'],
});

This project is not limited to airbnb! You can use any ESLint configuration, and it will be converted to be TypeScript-compatible (see below for full details).

Note that by default, indent is not converted to @typescript-eslint/indent (due to typescript-eslint#1824). If you want to enable indentation linting despite the known issues, you can:

const typescriptEslintConverter = require('typescript-eslint-converter');

module.exports = typescriptEslintConverter({
  // existing configuration here
}, {
  indent: true, // enable indent -> @typescript-eslint/indent conversion
});

Customisation

Adding or customising TypeScript-specific rules

The recommended way to add or customise TypeScript rules is with an override. This prevents ESLint attempting to apply the rules to Javascript files:

const typescriptEslintConverter = require('typescript-eslint-converter');

module.exports = typescriptEslintConverter({
  extends: ['airbnb'], /* or whatever you are using */

  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      rules: {
        // examples:

        // use airbnb quote rules for JS, but backticks for TS:
        '@typescript-eslint/quotes': ['error', 'backtick'],

        // TS-specific rule: enforce Array<T> rather than T[]
        '@typescript-eslint/array-type': ['error', 'generic'],
      },
    }
  ],
});

Options

By default, ts and tsx files will be handled as TypeScript. You can customise this if needed:

const typescriptEslintConverter = require('typescript-eslint-converter');

module.exports = typescriptEslintConverter({
  /* existing configuration here */
}, {
  // default values are shown:
  typescriptFiles: ['*.ts', '*.tsx'],
  resolveExtensions: ['js', 'mjs', 'jsx', 'mjsx', 'ts', 'tsx'],
  autoParseResolvableExtensions: true,
  useLoaderStyle: null,
  recommended: true,
  indent: false,
});

• typescriptFiles controls the pattern used to identify a file as TypeScript when overriding rules.
• resolveExtensions lists all file extensions which should be recognised by import/resolver.
• autoParseResolvableExtensions enables empty overrides for all entries in resolveExtensions; this means matching files will be linted without needing to specify --ext on the CLI. If you do not want this behaviour, you can set it to false (all entries in typescriptFiles will continue to be linted automatically). Note that this feature only works with ESLint 7+.
• useLoaderStyle if true, forces baseConfig-style configuration (used by the CLIEngine API and eslint-loader). If false, forces flat behaviour (matching .eslintrc files). By default, this will automatically detect the presence of baseConfig in the input configuration. When using inside a .eslintrc file, you should not need to change this. If using in a wrapper project (such as neutrino), you may need to set this to true to guarantee correct behaviour.
• recommended adds 'plugin:@typescript-eslint/recommended' to the extends option. If you do not want this, set it to false.
• indent converts any existing indent rule to @typescript-eslint/indent. This is disabled by default due to known issues with @typescript-eslint/indent.

Automatic rule conversion

Several rules are automatically converted. If you believe another rule should be automatically converted, please raise an issue.

Global rule changes

• react/jsx-filename-extension

  • extensions will have ts and tsx added to mirror js and jsx.

• import/no-extraneous-dependencies

  • Any devDependencies glob patterns will be extended to include .ts* if they contain .js*.

• import/extensions

  • .ts* equivalents for all .js* extensions will be added.

TypeScript file rule changes

These rule changes only apply to .ts and .tsx source files:

• Disable all rules which are checked by the TypeScript compiler:

  • getter-return
  • no-dupe-args
  • no-dupe-keys
  • no-unreachable
  • valid-typeof & babel/valid-typeof
  • no-const-assign
  • no-new-symbol
  • no-this-before-super
  • no-undef
  • no-dupe-class-members
  • no-redeclare

• Convert native ESLint and babel rules which do not support TypeScript: (any configuration is copied over; the TypeScript rules are config-compatible)

  • brace-style → @typescript-eslint/brace-style
  • comma-spacing → @typescript-eslint/comma-spacing
  • default-param-last → @typescript-eslint/default-param-last
  • dot-notation → @typescript-eslint/dot-notation
    • The TypeScript rule offers additional configuration options
  • func-call-spacing → @typescript-eslint/func-call-spacing
  • init-declarations → @typescript-eslint/init-declarations
  • keyword-spacing → @typescript-eslint/keyword-spacing
  • lines-between-class-members → @typescript-eslint/lines-between-class-members
    • The TypeScript rule offers additional configuration options
  • no-array-constructor → @typescript-eslint/no-array-constructor
  • no-dupe-class-members → @typescript-eslint/no-dupe-class-members
  • no-empty-function → @typescript-eslint/no-empty-function
  • no-extra-parens → @typescript-eslint/no-extra-parens
  • no-extra-semi → @typescript-eslint/no-extra-semi
  • no-invalid-this & babel/no-invalid-this → @typescript-eslint/no-invalid-this
  • no-loop-func → @typescript-eslint/no-loop-func
  • no-loss-of-precision → @typescript-eslint/no-loss-of-precision
  • no-magic-numbers → @typescript-eslint/no-magic-numbers
    • The TypeScript rule offers additional configuration options
  • no-redeclare → @typescript-eslint/no-redeclare
    • The TypeScript rule offers additional configuration options
  • no-shadow → @typescript-eslint/no-shadow
    • The TypeScript rule offers additional configuration options
  • no-unused-expressions & babel/no-unused-expressions → @typescript-eslint/no-unused-expressions
  • no-unused-vars → @typescript-eslint/no-unused-vars
  • no-use-before-define → @typescript-eslint/no-use-before-define
    • The TypeScript rule offers additional configuration options
  • no-useless-constructor → @typescript-eslint/no-useless-constructor
  • quotes & babel/quotes → @typescript-eslint/quotes
  • require-await → @typescript-eslint/require-await
  • no-return-await → @typescript-eslint/return-await
    • The TypeScript rule offers additional configuration options
    • The default in-try-catch matches no-return-await's behaviour
  • semi & babel/semi → @typescript-eslint/semi
  • space-before-function-paren → @typescript-eslint/space-before-function-paren

• indent

  • This rule is disabled by default due to typescript-eslint#1824.
  • If you want to enable indentation linting, use the indent option (described above).