ESLint config

TypeScript

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "types": ["vite/client", "vitest/globals"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    // "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    // "erasableSyntaxOnly": true,
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noUncheckedSideEffectImports": true,
    "noImplicitOverride": true,
    "noImplicitReturns": true,
    // "exactOptionalPropertyTypes": true, -- doesn't make sense
    // "noPropertyAccessFromIndexSignature": true, -- doesn't make sense
    // "noUncheckedIndexedAccess": true, -- good, but noisy

    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  },
  "include": ["src"]
}

ESLint

import merge from "lodash.merge";

// https://github.com/dustinspecker/awesome-eslint
import { defineConfig } from "eslint/config";
import eslint from "@eslint/js";
import tseslint from "typescript-eslint";

import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";
import reactRefresh from "eslint-plugin-react-refresh";
import reactHooks from "eslint-plugin-react-hooks";

import pluginJsxA11y from "eslint-plugin-jsx-a11y";
import styledA11y from "eslint-plugin-styled-components-a11y";

import playwright from "eslint-plugin-playwright";
import vitest from "@vitest/eslint-plugin";
import testingLibrary from "eslint-plugin-testing-library";

import compat from "eslint-plugin-compat";
import eslintConfigPrettier from "eslint-config-prettier/flat";
import regexpPlugin from "eslint-plugin-regexp";
// import reactPerfPlugin from 'eslint-plugin-react-perf';
// import nodePlugin from 'eslint-plugin-n';
// import eslintPluginUnicorn from 'eslint-plugin-unicorn';

export default defineConfig([
  {
    ignores: ["node_modules/**", "build/**", "coverage/**/*", "mcr.config.js"],
  },
  eslint.configs.recommended,
  // tseslint.configs.recommended,
  tseslint.configs.recommendedTypeChecked,
  // tseslint.configs.strictTypeChecked,
  reactX.configs["recommended-typescript"],
  reactDom.configs.recommended,
  reactRefresh.configs.vite,
  reactHooks.configs.flat.recommended,
  pluginJsxA11y.flatConfigs.recommended,
  styledA11y.flatConfigs.recommended,
  compat.configs["flat/recommended"],
  eslintConfigPrettier,
  regexpPlugin.configs["flat/recommended"],
  // reactPerfPlugin.configs.flat.all,
  // nodePlugin.configs['flat/recommended-script'],
  // eslintPluginUnicorn.configs.recommended,
  merge(
    {
      files: ["**/*.test.ts", "**/*.test.tsx"],
    },
    testingLibrary.configs["flat/react"],
    vitest.configs.recommended
  ),
  {
    files: ["**/*.spec.ts"],
    ...playwright.configs["flat/recommended"],
  },
  {
    rules: {
      "no-unused-vars": "off",
      "@typescript-eslint/no-unused-vars": [
        "error",
        {
          argsIgnorePattern: "^_",
          varsIgnorePattern: "^_",
          caughtErrorsIgnorePattern: "^_",
        },
      ],
      // '@typescript-eslint/no-deprecated': 'warn',
    },
    settings: {
      react: {
        version: "detect",
      },
    },
    languageOptions: {
      // ecmaVersion: 2020,
      parserOptions: {
        project: ["./tsconfig.json"],
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
]);

Related

• typescript-coverage-report ↗