eslint.config.js

import eslint from '@eslint/js'
import { parse } from '@typescript-eslint/parser'
import eslintConfigPrettier from 'eslint-config-prettier'
import pluginImport from 'eslint-plugin-import'
import pluginA11y from 'eslint-plugin-jsx-a11y'
import pluginPlaywright from 'eslint-plugin-playwright'
import prettierRecommended from 'eslint-plugin-prettier/recommended'
import pluginReact from 'eslint-plugin-react'
import pluginHooks from 'eslint-plugin-react-hooks'
import globals from 'globals'
import tseslint from 'typescript-eslint'

// tseslint.config is an optional helper function that provides
// autocomplete and documentation for all config properties
// Reference: https://typescript-eslint.io/packages/typescript-eslint#config
export default tseslint.config(
  // Each top-level object is a "configuration object"
  // Reference: https://eslint.org/docs/latest/use/configure/configuration-files#configuration-objects
  {
    ignores: [
      '**/.ignore/**/*',
      '**/.cache/**/*',
      'coverage/*',
      'dev/*',
      'dist/*',
      'dist-new/*',
      '**/node_modules/**/*',
      'src/lib/json-schema/*.compiled.js',
      'src/lib/rego/parser.js',
    ],
  },
  // When more than one configuration object matches a given filename,
  // the configuration objects are merged with later objects overriding previous objects
  // This base object covers all ts and js files; later objects provide overrides for ts and js individually
  // Reference: https://eslint.org/docs/latest/use/configure/configuration-files#cascading-configuration-objects
  {
    name: 'ts and js',
    files: ['**/*.{js,ts,jsx,tsx}'],
    ...eslint.configs.recommended,
    ...pluginReact.configs.flat.recommended,
    ...pluginReact.configs.flat['jsx-runtime'],
    ...pluginA11y.flatConfigs.recommended,
    extends: [eslintConfigPrettier, prettierRecommended],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      parser: { parse },
      parserOptions: {
        sourceType: 'module',
        ecmaFeatures: {
          jsx: true,
        },
        project: './tsconfig.json',
      },
      // Do not want to introduce the entire set of node globals, but allow 'process'.
      // While 'process' is a node feature, and not technically available in the browser,
      // vite will provide the correct value at build time, so OK to use.
      globals: {
        process: 'readonly',
      },
      ...pluginReact.configs.flat.recommended.languageOptions,
      ...pluginA11y.flatConfigs.recommended.languageOptions,
    },
    settings: {
      react: {
        version: 'detect',
        runtime: 'automatic', // or 'classic'
      },
    },
    plugins: {
      react: pluginReact,
      'jsx-a11y': pluginA11y,
      'react-hooks': pluginHooks,
    },
    rules: {
      // from https://github.com/facebook/react/issues/28313#issuecomment-2408157792
      ...pluginHooks.configs.recommended.rules,
      // From `npx eslint-config-prettier client/index.jsx`, these are unnecessary with prettier
      //   'jsx-quotes': ['warn', 'prefer-double'],
      //   'quote-props': ['error', 'as-needed'],
      curly: ['error', 'all'], // Enforce curly braces for all control statements
      // standard elements do not need this to flag violations; custom elements do!
      'jsx-a11y/aria-props': 'error',
      'no-constant-condition': ['error', { checkLoops: 'allExceptWhileTrue' }],
      'no-console': ['error', { allow: ['warn', 'error'] }],
      'no-undef': 'error',
      'react/default-props-match-prop-types': 'warn',
      'react/display-name': 'error',
      'react/jsx-uses-react': 'off',
      'react/jsx-uses-vars': 'error',
      'react/jsx-filename-extension': [
        'error',
        { extensions: ['.tsx', '.jsx'] },
      ],
      'react/no-unknown-property': ['error', { ignore: ['authz'] }],
      'react/prop-types': 'warn',
      'react/react-in-jsx-scope': 'off',
      'react-hooks/exhaustive-deps': 'error',
      'react-hooks/rules-of-hooks': 'error',
    },
  },
  {
    name: 'ts only',
    files: ['**/*.{ts,tsx}'],

    languageOptions: {
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },

    // TODO: switch over to strictTypeChecked once the large list of violations is fixed
    extends: [eslint.configs.recommended, tseslint.configs.strict],
    // extends: [eslint.configs.recommended, tseslint.configs.strictTypeChecked],

    // parser: '@typescript-eslint/parser',

    rules: {
      'no-unexpected-multiline': 'off', // required by eslint-config-prettier
      // https://typescript-eslint.io/rules/no-use-before-define/
      'no-use-before-define': 'off', // disable base as it can report incorrect errors
      '@typescript-eslint/no-unused-vars': [
        'warn',
        {
          args: 'all',
          argsIgnorePattern: '^_',
          varsIgnorePattern: '^_',
          caughtErrorsIgnorePattern: '^_|^e$|^err$|^error$',
          destructuredArrayIgnorePattern: '^_',
        },
      ],
      '@typescript-eslint/no-use-before-define': [
        'error',
        {
          functions: false,
          classes: true,
          variables: true,
          allowNamedExports: true,
        },
      ],
      '@typescript-eslint/no-inferrable-types': 'error',
      '@typescript-eslint/no-non-null-assertion': 'off',
      '@typescript-eslint/no-unsafe-argument': 'off',
      '@typescript-eslint/no-unsafe-assignment': 'off',
      '@typescript-eslint/no-unsafe-call': 'off',
      '@typescript-eslint/no-unsafe-member-access': 'off',
      '@typescript-eslint/no-unsafe-return': 'off',

      // type-checked lint rules (i.e. strictTypeChecked)
      '@typescript-eslint/no-confusing-void-expression': [
        'error',
        {
          ignoreArrowShorthand: true,
        },
      ],
      '@typescript-eslint/restrict-template-expressions': [
        'off', // a bit more work needed before enabling this
        {
          allowNumber: true,
          allowAny: false,
          allowBoolean: true,
          allowNever: false,
          allowNullish: true,
          allowRegExp: true,
        },
      ],
      '@typescript-eslint/restrict-plus-operands': [
        'error',
        {
          allowAny: false,
          allowBoolean: false,
          allowNullish: false,
          allowNumberAndString: true,
          allowRegExp: false,
        },
      ],
      // this covers a variety of condition types; lint can auto-fix some, including
      // "Unnecessary optional chain on a non-nullish value" occurrences.
      // But need to review those results and disable some before enabling this rule.
      '@typescript-eslint/no-unnecessary-condition': 'off',

      // probably do not need these rules explicitly once strictTypeChecked enabled above
      '@typescript-eslint/no-unsafe-enum-comparison': 'error',
      '@typescript-eslint/no-floating-promises': 'error',
      '@typescript-eslint/prefer-reduce-type-parameter': 'error',
      '@typescript-eslint/no-unnecessary-type-assertion': 'error',
      '@typescript-eslint/no-unnecessary-template-expression': 'error',
    },
  },
  {
    name: 'js only',
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      // apparently ts handles this implicitly so only adding browser globals here for js files
      globals: {
        ...globals.browser,
      },
    },
    // disable type-aware linting on JS files
    extends: [tseslint.configs.disableTypeChecked],
    rules: {
      // https://typescript-eslint.io/packages/typescript-eslint#flat-config-extends
      'other-plugin/typed-rule': 'off', // turn off other type-aware rules
      '@typescript-eslint/explicit-function-return-type': 'off', // turn off rules that don't apply to JS code

      'no-unused-vars': [
        'warn',
        {
          argsIgnorePattern: '^_',
          varsIgnorePattern: '^_',
          caughtErrorsIgnorePattern: '^_|^e$|^err$|^error$',
          destructuredArrayIgnorePattern: '^_',
        },
      ],
      'no-use-before-define': [
        'error',
        {
          functions: false,
          classes: true,
          variables: true,
          allowNamedExports: true,
        },
      ],
      'react/jsx-no-undef': ['error', { allowGlobals: true }],
    },
  },
  {
    name: 'node-based',
    files: [
      '{server,cmd,packaging,scripts,tests}/**/*.{js,ts}',
      'vite.config.js',
      'vite.new.config.js',
    ],
    languageOptions: {
      globals: {
        ...globals.node,
      },
    },
    plugins: {
      import: pluginImport,
    },
    rules: {
      'import/extensions': [
        'off',
        {
          js: 'always',
        },
      ],
    },
  },
  {
    name: 'playwright',
    files: [
      'services/playwright/**/*.ts',
      'services/playwright-old/**/*.{js,ts}',
    ],
    languageOptions: {
      globals: {
        ...globals.node,
      },
    },
    settings: {
      playwright: {
        globalAliases: {
          test: ['setup'],
        },
      },
    },
    plugins: {
      import: pluginImport,
    },
    extends: [pluginPlaywright.configs['flat/recommended']],
    rules: {
      ...pluginPlaywright.configs['flat/recommended'].rules,
      // disable default rules not useful to our code base
      'playwright/expect-expect': 'off',
      'playwright/no-conditional-expect': 'off',
      'playwright/no-conditional-in-test': 'off',
      'playwright/no-nested-step': 'off',
      'playwright/no-skipped-test': 'off',
      // enable additional rules not in default set
      'playwright/no-duplicate-hooks': 'warn',
      'playwright/prefer-locator': 'warn',
      'playwright/prefer-native-locators': 'warn',
      'playwright/prefer-to-contain': 'warn',
      'playwright/prefer-to-have-count': 'warn',
      'playwright/prefer-to-have-length': 'warn',
      // general (not from playwright plugin)
      'import/no-unresolved': [
        2,
        {
          ignore: ['#test'],
        },
      ],
    },
  },
  {
    name: 'playwright fixtures',
    files: [
      'services/playwright/fixtures/**/*.ts',
      'services/playwright-old/fixtures/**/*.{js,ts}',
    ],
    rules: {
      // inside fixtures playwright `use` function helper is treated as a react hook
      // so turning off the check for it
      'react-hooks/rules-of-hooks': 'off',
    },
  }
)