@@ -9,49 +9,52 @@ While Next.js 14 was designed to work with ESLint 8.x and traditional configurat
99## Setup
1010
11111 . Install dependencies:
12+
1213``` bash
1314npm install --save-dev @hypetech/eslint-config@^3.0.0 eslint@^9.0.0 prettier@^3.0.0
1415```
1516
16172 . Create ` eslint.config.mjs ` in your project root:
18+
1719``` js
18- import hypetechConfig from ' @hypetech/eslint-config' ;
20+ import hypetechConfig from ' @hypetech/eslint-config'
1921
2022export default [
21- ... hypetechConfig,
22- {
23- // Add any project-specific overrides here
24- rules: {
25- ' no-console' : ' warn' ,
23+ ... hypetechConfig,
24+ {
25+ // Add any project-specific overrides here
26+ rules: {
27+ ' no-console' : ' warn' ,
28+ },
2629 },
27- },
28- ];
30+ ]
2931```
3032
31333 . Update your ` package.json ` scripts:
34+
3235``` json
3336{
34- "scripts" : {
35- "lint" : " eslint ." ,
36- "lint:fix" : " eslint . --fix"
37- }
37+ "scripts" : {
38+ "lint" : " eslint ." ,
39+ "lint:fix" : " eslint . --fix"
40+ }
3841}
3942```
4043
4144## Important Notes
4245
43- - Next.js 14's built-in ESLint integration (` next lint ` ) expects traditional config format
44- - Use ` npx eslint ` directly instead of ` next lint ` when using flat config
45- - The flat config provides the same rules and functionality as the legacy config
46- - You may need to disable Next.js's built-in linting in ` next.config.js ` :
46+ - Next.js 14's built-in ESLint integration (` next lint ` ) expects traditional config format
47+ - Use ` npx eslint ` directly instead of ` next lint ` when using flat config
48+ - The flat config provides the same rules and functionality as the legacy config
49+ - You may need to disable Next.js's built-in linting in ` next.config.js ` :
4750
4851``` js
4952module .exports = {
50- eslint: {
51- // This allows production builds to complete even if there are ESLint errors
52- ignoreDuringBuilds: true ,
53- },
54- };
53+ eslint: {
54+ // This allows production builds to complete even if there are ESLint errors
55+ ignoreDuringBuilds: true ,
56+ },
57+ }
5558```
5659
5760## Migration from Legacy Config
@@ -64,56 +67,61 @@ If you're migrating from the legacy configuration:
6467
6568## Benefits of Using Flat Config
6669
67- - Future-proof your project for ESLint 9.x ecosystem
68- - Simpler configuration with better composability
69- - Better performance with ESLint 9.x
70- - Consistent with modern JavaScript tooling
70+ - Future-proof your project for ESLint 9.x ecosystem
71+ - Simpler configuration with better composability
72+ - Better performance with ESLint 9.x
73+ - Consistent with modern JavaScript tooling
7174
7275## Example Configuration with Custom Rules
7376
7477``` js
75- import hypetechConfig from ' @hypetech/eslint-config' ;
76- import reactPlugin from ' eslint-plugin-react' ;
78+ import hypetechConfig from ' @hypetech/eslint-config'
79+ import reactPlugin from ' eslint-plugin-react'
7780
7881export default [
79- ... hypetechConfig,
80- {
81- files: [' **/*.{js,jsx,ts,tsx}' ],
82- plugins: {
83- react: reactPlugin,
82+ ... hypetechConfig,
83+ {
84+ files: [' **/*.{js,jsx,ts,tsx}' ],
85+ plugins: {
86+ react: reactPlugin,
87+ },
88+ settings: {
89+ react: {
90+ version: ' detect' ,
91+ },
92+ },
93+ rules: {
94+ ' no-console' : [' warn' , { allow: [' warn' , ' error' ] }],
95+ ' @typescript-eslint/no-unused-vars' : [
96+ ' error' ,
97+ {
98+ argsIgnorePattern: ' ^_' ,
99+ varsIgnorePattern: ' ^_' ,
100+ },
101+ ],
102+ },
84103 },
85- settings: {
86- react: {
87- version: ' detect' ,
88- },
104+ {
105+ // Ignore specific files or directories
106+ ignores: [' **/dist/**' , ' **/build/**' , ' .next/**' ],
89107 },
90- rules: {
91- ' no-console' : [' warn' , { allow: [' warn' , ' error' ] }],
92- ' @typescript-eslint/no-unused-vars' : [' error' , {
93- argsIgnorePattern: ' ^_' ,
94- varsIgnorePattern: ' ^_' ,
95- }],
96- },
97- },
98- {
99- // Ignore specific files or directories
100- ignores: [' **/dist/**' , ' **/build/**' , ' .next/**' ],
101- },
102- ];
108+ ]
103109```
104110
105111## Troubleshooting
106112
107113### VSCode Integration
108114
109115Make sure your VSCode is using the workspace version of ESLint:
116+
1101171 . Open Command Palette (Cmd/Ctrl + Shift + P)
1111182 . Run "ESLint: Select Node Path"
1121193 . Choose "Use Workspace Version"
113120
114121### Type Errors
115122
116123If you encounter type errors with TypeScript, ensure you have the latest versions:
124+
117125``` bash
118126npm install --save-dev @typescript-eslint/parser@latest @typescript-eslint/eslint-plugin@latest
119- ```
127+ ```
0 commit comments