eslint-setup.md

My ESLint Setup on Next.js

1. Install ESLint

bun add -D @eslint/eslintrc @trivago/prettier-plugin-sort-imports eslint eslint-config-next

We do not need to install prettier & eslint-config-prettier because it is already included in eslint-config-next.

2. Add .prettierrc

{
	"printWidth": 120,
	"tabWidth": 2,
	"useTabs": true,
	"semi": false,
	"bracketSpacing": true,
	"arrowParens": "avoid",
	"bracketSameLine": true,
	"endOfLine": "auto",
	"singleQuote": true,
	"trailingComma": "none",
	"plugins": ["@trivago/prettier-plugin-sort-imports"],
	"importOrderSeparation": true,
	"importOrderSortSpecifiers": true,
	"importOrder": [
		"^next(.*)$|^@next(.*)$",
		"^(react/(.*)$)|^(react$)",
		"<THIRD_PARTY_MODULES>",
		"^@/module-overrides/(.*)$",
		"^@/components/(.*)$",
		"^@/providers/(.*)$",
		"^@/hooks/(.*)$",
		"^@/actions(.*)$",
		"^@/lib/(.*)$",
		"^@/locales/(.*)$",
		"^@/types/(.*)$",
		"^types$",
		"^[./]",
		"^[./](?!.*\\.css$)",
		"\\.css$"
	],
	"importOrderTypeScriptVersion": "5.0.0",
	"importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"]
}

3. Add .eslint.config.mjs

import { FlatCompat } from '@eslint/eslintrc'
import { dirname } from 'path'
import { fileURLToPath } from 'url'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

const compat = new FlatCompat({
	baseDirectory: __dirname
})

const eslintConfig = [
	...compat.extends('next/core-web-vitals', 'next/typescript'),
	'plugin:react/recommended',
	'plugin:react/jsx-runtime',
	{
		rules: {
			'no-unused-imports': 'warn',
			'no-unused-vars': 'warn'
		}
	}
]

export default eslintConfig

4. Fix tsconfig.json to only run on src or except build directories and node_modules

{
	"compilerOptions": {
		"target": "ES2017",
		"lib": ["dom", "dom.iterable", "esnext"],
		"allowJs": true,
		"skipLibCheck": true,
		"strict": true,
		"noEmit": true,
		"esModuleInterop": true,
		"module": "esnext",
		"moduleResolution": "bundler",
		"resolveJsonModule": true,
		"isolatedModules": true,
		"jsx": "preserve",
		"incremental": true,
		"plugins": [
			{
				"name": "next"
			}
		],
		"paths": {
			"@/*": ["./src/*"]
		}
	},
	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
	"exclude": ["node_modules", ".next"]
}