.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
    jest: true,
  },
  ignorePatterns: ['setupTests.tsx', '*.test.ts*', '*.stories.tsx'],
  extends: [
    // non-ts recommended rules
    'eslint:recommended',
    // remove non-ts rules covered by typescript-eslint
    'plugin:@typescript-eslint/eslint-recommended',
    // ts recommended rules
    // can be slow
    'plugin:@typescript-eslint/recommended',
    // ts recommended rules that require tsconfig.json to be specified in parserOptions.project
    // can be slow
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    // create-react-app defaults
    'react-app',
    'plugin:react/recommended',
    'plugin:security/recommended',
    // remove rules covered by prettier
    'plugin:prettier/recommended',
    'prettier/@typescript-eslint',
    'prettier/react',
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
      modules: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
    project: ['./tsconfig.json'],
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/ban-types': 'warn',
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/naming-convention': [
      'warn',
      {
        selector: 'function',
        format: ['camelCase', 'PascalCase'],
      },
    ],
    '@typescript-eslint/no-base-to-string': 'warn',
    '@typescript-eslint/no-empty-function': 'warn',
    '@typescript-eslint/no-explicit-any': 'warn',
    '@typescript-eslint/no-floating-promises': 'error',
    '@typescript-eslint/no-implied-eval': 'warn',
    '@typescript-eslint/no-inferrable-types': 'warn',
    '@typescript-eslint/no-misused-promises': 'error',
    '@typescript-eslint/no-non-null-assertion': 'warn',
    '@typescript-eslint/no-throw-literal': 'warn',
    '@typescript-eslint/no-unnecessary-boolean-literal-compare': 'warn',
    '@typescript-eslint/no-unnecessary-condition': 'warn',
    '@typescript-eslint/no-unnecessary-qualifier': 'warn',
    '@typescript-eslint/no-unnecessary-type-arguments': 'warn',
    '@typescript-eslint/no-unnecessary-type-assertion': 'warn',
    '@typescript-eslint/no-unsafe-assignment': 'warn',
    '@typescript-eslint/no-unsafe-call': 'warn',
    '@typescript-eslint/no-unsafe-member-access': 'warn',
    '@typescript-eslint/no-unsafe-return': 'warn',
    '@typescript-eslint/no-unused-vars-experimental': 'off',
    '@typescript-eslint/prefer-nullish-coalescing': 'warn',
    '@typescript-eslint/prefer-readonly': 'warn',
    //  Ideally this would be on, but it has too many false positives. Should apply to arrays but seems to apply to everything, potentially a bug
    '@typescript-eslint/prefer-readonly-parameter-types': 'off',
    '@typescript-eslint/prefer-reduce-type-parameter': 'warn',
    '@typescript-eslint/prefer-regexp-exec': 'warn',
    '@typescript-eslint/promise-function-async': 'error',
    '@typescript-eslint/promise-function-async': 'error',
    '@typescript-eslint/require-array-sort-compare': 'warn',
    // require-await is incompatible with promise-function-async
    '@typescript-eslint/require-await': 'off',
    '@typescript-eslint/restrict-plus-operands': 'warn',
    '@typescript-eslint/restrict-template-expressions': [
      'warn',
      {
        allowNumber: true,
        allowBoolean: true,
        allowNullable: false,
      },
    ],
    '@typescript-eslint/strict-boolean-expressions': 'warn',
    '@typescript-eslint/switch-exhaustiveness-check': 'warn',
    // TODO: We use this in mocks in .spec.ts, perhaps syntax is incorrect?
    '@typescript-eslint/unbound-method': 'off',
    'react/jsx-pascal-case': [
      'warn',
      {
        ignore: [
          'h1',
          'h2',
          'h3',
          'h4',
          'h5',
          'h6',
          'd1',
          'd2',
          'd3',
          'd4',
          'd5',
          'd6',
        ],
      },
    ],
    'react/prop-types': 'off',
  },
}