.eslintrc.js

const path = require('path');

module.exports = {
  plugins: ['@typescript-eslint', 'css-modules'],
  extends: [
    'airbnb-typescript-prettier',
    'plugin:cypress/recommended',
    'plugin:import/typescript',
    'plugin:css-modules/recommended',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
  ],
  rules: {
    '@typescript-eslint/no-shadow': 'warn',

    // https://stackoverflow.com/questions/63818415/react-was-used-before-it-was-defined/64024916#64024916
    '@typescript-eslint/no-use-before-define': ['off'],

    // react functional components are usually written using PascalCase
    '@typescript-eslint/naming-convention': [
      'warn',
      { selector: 'function', format: ['PascalCase', 'camelCase'] },
    ],
    '@typescript-eslint/no-empty-function': 'warn',
    '@typescript-eslint/no-var-requires': 'warn',
    'react-hooks/exhaustive-deps': 'warn',

    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
    'no-param-reassign': ['warn'],
    'no-case-declarations': ['warn'],
    'no-restricted-globals': ['warn'],
    'react/button-has-type': ['warn'],
    'react/prop-types': ['off'],
    'jsx-a11y/heading-has-content': ['warn'],
    'jsx-a11y/control-has-associated-label': ['warn'],
    'no-undef': ['warn'],
    'jsx-a11y/mouse-events-have-key-events': ['warn'],
    'jsx-a11y/click-events-have-key-events': ['warn'],
    'jsx-a11y/no-static-element-interactions': ['warn'],
    'jsx-a11y/label-has-associated-control': [
      'error',
      {
        required: {
          some: ['nesting', 'id'],
        },
      },
    ],
    'react/jsx-filename-extension': [1, { extensions: ['.tsx', '.ts'] }],
    'import/extensions': [
      'error',
      'always',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
    'spaced-comment': [2, 'always', { exceptions: ['*'] }],
    'react/require-default-props': 'off',

    'import/no-extraneous-dependencies': [
      'error',
      {
        devDependencies: [
          '**/*.spec.jsx',
          '**/*.spec.ts',
          '**/*.spec.tsx',
          '**/*.stories.tsx',
        ],
        packageDir: [
          // TODO compute this dynamically
          path.resolve(__dirname, 'packages/pyroscope-flamegraph'),
          process.cwd(),
        ],
      },
    ],
    // otherwise it conflincts with ts411
    'dot-notation': 'off',

    // disable relative imports to force people to use '@webapp'
    'import/no-relative-packages': 'error',

    // https://humanwhocodes.com/blog/2019/01/stop-using-default-exports-javascript-module/
    'import/prefer-default-export': 'off',

    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        ignoreRestSiblings: true,
      },
    ],

    // any is bad, if really necessary one can use ShamefulAny
    '@typescript-eslint/no-explicit-any': 'error',

    // ATM there's too many errors to deal with right now
    // TODO: deal with each issue individually
    '@typescript-eslint/no-unsafe-member-access': 'warn',
    '@typescript-eslint/no-unsafe-argument': 'warn',
    '@typescript-eslint/no-unsafe-call': 'warn',
    '@typescript-eslint/no-unsafe-assignment': 'warn',
    '@typescript-eslint/no-unsafe-return': 'warn',
    '@typescript-eslint/restrict-template-expressions': 'warn',

    // https://github.com/typescript-eslint/typescript-eslint/issues/1184
    '@typescript-eslint/no-floating-promises': ['warn', { ignoreVoid: true }],

    // makes it easier to check what are local variables computated dynamically and what are static props
    'react/destructuring-assignment': 'off',

    '@typescript-eslint/switch-exhaustiveness-check': 'error',
  },
  env: {
    browser: true,
    jquery: true,
  },
  settings: {
    'import/internal-regex': '^@pyroscope',
    'import/resolver': {
      'eslint-import-resolver-lerna': {
        packages: path.resolve(__dirname, 'packages'),
      },
      typescript: {
        project: 'tsconfig.json',
      },
    },
  },
  overrides: [
    // Tests are completely different
    // And we shouldn't be so strict
    {
      files: ['**/?(*.)+(spec|test).+(ts|tsx|js)'],
      plugins: ['jest'],
      env: {
        node: true,
        'jest/globals': true,
      },
    },
  ],
  ignorePatterns: ['dist', 'public'],
  globals: {
    // see ./lib/alias.d.ts
    ShamefulAny: true,
    JSX: true,
  },
  parserOptions: {
    project: ['./tsconfig.json'],
  },
};