eslint.config.js

import css from "@eslint/css";
import eslint from "@eslint/js";
import graphql from "@graphql-eslint/eslint-plugin";
import prettier from "eslint-config-prettier";
import i18next from "eslint-plugin-i18next";
import importPlugin from "eslint-plugin-import-x";
import jsxA11y from "eslint-plugin-jsx-a11y";
import react from "eslint-plugin-react";
import * as reactHooks from "eslint-plugin-react-hooks";
import * as regexp from "eslint-plugin-regexp";
import globals from "globals";
import { config, configs } from "typescript-eslint";

/** @type {import('eslint').Config} */
export default config(
	eslint.configs.recommended,
	...configs.recommended,
	importPlugin.flatConfigs.recommended,
	importPlugin.flatConfigs.typescript,
	jsxA11y.flatConfigs.recommended,
	react.configs.flat.recommended,
	react.configs.flat["jsx-runtime"],
	reactHooks.configs["recommended-latest"],
	regexp.configs["flat/recommended"],
	i18next.configs["flat/recommended"],
	{
		languageOptions: {
			ecmaVersion: "latest",
			globals: {
				...globals.browser,
				...globals.commonjs,
				...globals.es2022,
				...globals.serviceworker,
			},
			parserOptions: {
				ecmaFeatures: {
					jsx: true,
				},
			},
			sourceType: "module",
		},
		rules: {
			...react.configs["jsx-runtime"].rules,
			"@typescript-eslint/no-explicit-any": ["warn"],
			"@typescript-eslint/no-unused-vars": [
				"warn", // or "error"
				{
					argsIgnorePattern: "^_",
					varsIgnorePattern: "^_",
					caughtErrorsIgnorePattern: "^_",
				},
			],
			"import-x/no-dynamic-require": "warn",
			"no-unused-vars": "off",
			"react/no-unknown-property": [
				"error",
				{
					ignore: ["variant"],
				},
			],
			"react/jsx-sort-props": [
				"warn",
				{
					callbacksLast: false,
					shorthandFirst: false,
					shorthandLast: false,
					multiline: "ignore",
					ignoreCase: true,
					noSortAlphabetically: false,
					reservedFirst: false,
					locale: "auto",
				},
			],
		},
		settings: {
			"import-x/internal-regex": "^~/",
			"import-x/parsers": {
				"typescript-eslint": [".ts", ".tsx"],
			},
			"import-x/resolver": {
				node: true,
				typescript: true,
			},
			react: {
				version: "detect",
			},
		},
	},
	{
		ignores: [
			"**/+types/*",
			"**/build/*",
			"**/dist/*",
			"**/generated/*",
			"**/node_modules/*",
			"**/types/*",
		],
	},
	{
		files: ["**/*.css"],
		language: "css/css",
		...css.configs.recommended,
	},
	{
		files: ["**/*.ts", "**/*.tsx"],
		languageOptions: {
			parserOptions: {
				ecmaFeatures: {
					jsx: true,
				},
			},
		},
		processor: graphql.processor,
	},
	{
		files: ["**/*.graphql"],
		languageOptions: {
			parser: graphql.parser,
		},
		plugins: {
			"@graphql-eslint": graphql,
		},
		rules: {
			"@graphql-eslint/no-anonymous-operations": "error",
			"@graphql-eslint/no-duplicate-fields": "error",
		},
	},
	prettier,
);