Use the npx @eslint/migrate-config .eslintrc.json command.
It produces ugly output, but seems to work - I assume we will eventually be able to do it as recommended in the eslint docs.
Heres the output I got (placed inside eslint.config.mjs file).
import path from "node:path"; import { fileURLToPath } from "node:url"; import js from "@eslint/js"; import { FlatCompat } from "@eslint/eslintrc"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); const compat = new FlatCompat({ baseDirectory: __dirname, recommendedConfig: js.configs.recommended, allConfig: js.configs.all }); export default [...compat.extends("next")];
Videos
» npm install eslint-config-next
Use compatibility mode
Original:
{
"extends": [
"next/core-web-vitals",
"plugin:@tanstack/eslint-plugin-query/recommended",
"prettier"
],
"plugins": ["@tanstack/query"]
}
Flat:
import { FlatCompat } from "@eslint/eslintrc"
import path from "path"
import { fileURLToPath } from "url"
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const compat = new FlatCompat({
baseDirectory: __dirname,
})
/** @type {import('eslint').Linter.Config[]} */
const configs = [
...compat.extends("next/core-web-vitals"),
...compat.extends("next/typescript"),
...compat.extends("plugin:@tanstack/eslint-plugin-query/recommended"),
...compat.extends("prettier"),
...compat.plugins("@tanstack/query"),
]
export default configs
https://github.com/vercel/next.js/issues/71763#issuecomment-2436288395
Next.js 15 introduced changes to ESLint configuration, which can cause issues with VS Code integration. To simplify the setup and ensure ESLint and Prettier work correctly, I created a CLI that automates everything.
- NPM: https://www.npmjs.com/package/eslint-prettier-next-15
- GitHub: https://github.com/danielalves96/eslint-prettier-next-15
You can install and run it, and it will configure everything properly. Plus, you can customize the setup as needed. Hope this helps!
Anybody else watching this issue and checking every month (for 9 months now):
https://github.com/vercel/next.js/issues/64409
What is the big issue here? Why is this taking so long?
It a complete shitshow.
» npm install @next/eslint-plugin-next