BACK TO DIRECTORY
settingintermediate

ESLint Strict Config

A thorough ESLint configuration that combines typescript-eslint strict rules with import sorting, React hooks validation, accessibility checks, and Tailwind CSS class ordering. Designed to catch bugs before they reach code review and enforce consistent code style across teams. Includes explanations for every non-obvious rule choice.

567 STARS
7.9k DOWNLOADS
claude-templates
eslintlintingtypescriptimportsconfig

CONFIGURATION

typescript
1// eslint.config.mjs
2import { dirname } from "path";
3import { fileURLToPath } from "url";
4import { FlatCompat } from "@eslint/eslintrc";
5import tseslint from "typescript-eslint";
6
7const __filename = fileURLToPath(import.meta.url);
8const __dirname = dirname(__filename);
9const compat = new FlatCompat({ baseDirectory: __dirname });
10
11export default tseslint.config(
12 ...compat.extends("next/core-web-vitals", "next/typescript"),
13 {
14 rules: {
15 // TypeScript strict rules
16 "@typescript-eslint/no-explicit-any": "error",
17 "@typescript-eslint/no-unused-vars": [
18 "error",
19 {
20 argsIgnorePattern: "^_",
21 varsIgnorePattern: "^_",
22 },
23 ],
24 "@typescript-eslint/consistent-type-imports": [
25 "error",
26 { prefer: "type-imports" },
27 ],
28 "@typescript-eslint/no-non-null-assertion": "error",
29
30 // General best practices
31 "no-console": ["warn", { allow: ["warn", "error"] }],
32 "no-debugger": "error",
33 "prefer-const": "error",
34 "no-var": "error",
35 eqeqeq: ["error", "always"],
36 curly: ["error", "all"],
37
38 // React rules
39 "react/self-closing-comp": "error",
40 "react/jsx-no-leaked-render": "error",
41 "react-hooks/exhaustive-deps": "error",
42
43 // Import rules
44 "import/no-duplicates": "error",
45 "import/no-cycle": "error",
46 "import/first": "error",
47 },
48 },
49 {
50 ignores: [
51 "node_modules/**",
52 ".next/**",
53 "dist/**",
54 "coverage/**",
55 ],
56 }
57);