.eslintrc.json

{
	"root": true,
	"env": {
		"node": true,
		"es6": true
	},
	"parserOptions": {
		"ecmaVersion": 12,
		"sourceType": "module"
	},
	"ignorePatterns": ["node_modules/*", ".next/*", ".out/*", "!.prettierrc"], // We don"t want to lint generated files nor node_modules, but we want to lint .prettierrc (ignored by default by eslint)
	"extends": ["eslint:recommended"],
	"plugins": ["prettier", "unused-imports", "css-modules"],
	"overrides": [
		// This configuration will apply only to TypeScript files
		{
			"files": ["**/*.ts", "**/*.tsx"],
			"parser": "@typescript-eslint/parser",
			"settings": {
				"react": {
					"version": "detect"
				},
				"import/ignore": [".css$", "node_modules/*"]
			},
			"env": {
				"browser": true,
				"node": true,
				"es6": true
			},
			"extends": [
				"eslint:recommended",
				"plugin:@typescript-eslint/recommended", // TypeScript rules
				// this throws in production
				// "plugin:react/recommended", // React rules
				"plugin:react-hooks/recommended", // React hooks rules
				"plugin:jsx-a11y/recommended", // Accessibility rules
				"plugin:css-modules/recommended" // Css module rules
			],
			"rules": {
				// We will use TypeScript"s types for component props instead
				"react/prop-types": "off",
				"unused-imports/no-unused-imports": ["warn"],
				// No need to import React when using Next.js
				"react/react-in-jsx-scope": "off",
				// This rule is not compatible with Next.js"s <Link /> components
				"jsx-a11y/anchor-is-valid": "off",
				// Why would you want unused vars?
				"@typescript-eslint/no-unused-vars": ["warn"],
				// I suggest this setting for requiring return types on functions only where useful
				"@typescript-eslint/explicit-function-return-type": [
					"warn",
					{
						"allowExpressions": true,
						"allowConciseArrowFunctionExpressionsStartingWithVoid": true
					}
				],
				"jsx-a11y/no-noninteractive-element-interactions": "off",
				"jsx-a11y/no-static-element-interactions": "off",
				"jsx-a11y/click-events-have-key-events": "off",
				"jsx-a11y/no-autofocus": "off",
				"no-case-declarations": "off",
				"react/jsx-key": "off",
				"css-modules/no-unused-class": ["warn", { "camelCase": true }],
				"css-modules/no-undef-class": ["error", { "camelCase": true }],
				"id-length": ["warn", { "min": 1, "max": 22 }],
				"no-multiple-empty-lines": "warn",
				"eol-last": "warn",
				"require-await": "warn",
				// Use prettier configuration
				"prettier/prettier": [
					"warn",
					{
						"endOfLine": "lf"
					},
					{
						"usePrettierrc": true
					}
				]
			}
		}
	]
}