How to use new "flat config" approach in Eslint? #49337
-
SummaryI have Eslint working in a TypeScript Next.js project, but I want to switch to the new "flat config" approach that Eslint offers. (Why is that not Next.js's default?) I created Part 1How can I migrate the Part 2Other than missing But my VSCode no longer shows errors. I see How can I get the flat config to run automatically in VSC? Additional informationNo response ExampleNo response |
Beta Was this translation helpful? Give feedback.
Replies: 6 comments 18 replies
-
|
This worked for me. I haven't tested it thoroughly, but it reports that I shouldn't use the import nextPlugin from '@next/eslint-plugin-next';
import reactPlugin from 'eslint-plugin-react';
import hooksPlugin from 'eslint-plugin-react-hooks';
export default [
{
plugins: {
react: reactPlugin,
},
rules: {
...reactPlugin.configs['jsx-runtime'].rules,
},
settings: {
react: {
version: 'detect', // You can add this if you get a warning about the React version when you lint
},
},
},
{
plugins: {
'react-hooks': hooksPlugin,
},
rules: hooksPlugin.configs.recommended.rules,
},
{
plugins: {
'@next/next': nextPlugin,
},
rules: {
...nextPlugin.configs.recommended.rules,
...nextPlugin.configs['core-web-vitals'].rules,
},
},
{
ignores: ['.next/*'],
},
];You need to install |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for your response @milos-sikic-nimbus-tech . I ran My only eslint settings in my VSC's "eslint.experimental.useFlatConfig": true,
"eslint.debug": true,
"eslint.options": {
"overrideConfigFile": "eslint.config.mjs"
},
"settingsSync.ignoredSettings": [
"eslint.experimental.useFlatConfig"
],I've tried putting the config at
I have no My guess is that you're not using TypeScript. Using your approach, I was able to get VSC to highlight errors in regular JS, but I never want to use JS. I always use TS and TSX now. Here is my import nextPlugin from '@next/eslint-plugin-next';
import reactPlugin from 'eslint-plugin-react';
import hooksPlugin from 'eslint-plugin-react-hooks';
import ts from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';
import functional from 'eslint-plugin-functional';
import imprt from 'eslint-plugin-import'; // 'import' is ambiguous & prettier has trouble
const myRules = {
// https://eslint.org/docs/latest/rules/max-len
// Temporary rule to see if eslint will work:
'max-len': ['warn', { code: 3, ignoreComments: false, ignoreRegExpLiterals: true, ignoreStrings: true, ignoreTemplateLiterals: true }],
};
export default [
{
rules: myRules,
},
{
plugins: {
react: reactPlugin,
},
rules: {
...reactPlugin.configs['jsx-runtime'].rules,
},
settings: {
react: {
version: 'detect', // You can add this if you get a warning about the React version when you lint
},
},
},
{
plugins: {
'react-hooks': hooksPlugin,
},
rules: hooksPlugin.configs.recommended.rules,
},
{
plugins: {
'@next/next': nextPlugin,
},
rules: {
...nextPlugin.configs.recommended.rules,
...nextPlugin.configs['core-web-vitals'].rules,
},
},
{
ignores: ['.next/*'],
},
{
files: ['**/*.ts', '**/*.tsx'],
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaFeatures: { modules: true },
ecmaVersion: 'latest',
project: './tsconfig.json',
},
},
plugins: {
functional,
import: imprt,
'@typescript-eslint': ts,
ts,
},
rules: {
...ts.configs['eslint-recommended'].rules,
...ts.configs['recommended'].rules,
...myRules,
'ts/return-await': 2,
},
},
];
However, my VSC is not showing them as I type (the way it did before switching to flat config). Thanks for any ideas. |
Beta Was this translation helpful? Give feedback.
-
|
Hmm, it worked for me for TS and TSX files. Might be that it's missing the matcher? We could maybe put the React and Next stuff into one object and add Something like this: And yes, sorry, I didn't include one other plugin that we're using that's internal that might be helping. But I just took a look, and it's very similar to what you're doing, even the order in the array is the same. Also, if you're not already, always restart the ESLint Server within VS Code when you change the config if you want to see the changes - it doesn't pick up on them all the time. Doing a restart guarantees that the newest config is loaded. Also, check out the output of the ESLint plugin (Cmd + Shift + P and type "ESLint output", you'll find the command). Let me know if that helps! |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much, @milos-sikic-nimbus-tech !! I had already seen in the terminal Seeing it again in ESLint Show Output Channel made me wonder whether VSC was aborting there and not bothering to run any more rules. And that seems to be the case. Once I removed Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
For the Install that as a dev dependency Import it as And then just include it as a plugin Do note that the name of the plugin is important here. In order for rules to be picked up, you need to specify a name for the plugin that's the same as the one that's used in the rules string, and comes before the And according to the documentation, also this (haven't tested it): Also, you're welcome! Glad it's working for you! :) |
Beta Was this translation helpful? Give feedback.
-
|
Thanks. Yeah, I partially got 'canonical' working like this: eslint/eslint#17228 But as I describe there, there is much more I'd love to get working. I might switch from |
Beta Was this translation helpful? Give feedback.
-
|
hey maybe you can help me too. I can activate the rules only if I enter them individually the standard rules have no effect. import type { ConfigItem, OptionsHasTypeScript, OptionsOverrides, OptionsStylistic } from '../types'
import { GLOB_NEXT } from '../globs'
import { parserTs, pluginNext, pluginReact, pluginReactHooks } from '../plugins'
export function next(
options: OptionsHasTypeScript & OptionsOverrides & OptionsStylistic = {},
): ConfigItem[] {
const {
overrides = {},
stylistic = true,
} = options
return [
{
name: 'nyxb:next:setup',
plugins: {
'next': pluginNext,
'react': pluginReact,
'react-hooks': pluginReactHooks,
},
},
{
files: [GLOB_NEXT],
languageOptions: {
parser: options.typescript ? parserTs as any : null,
parserOptions: {
ecmaFeatures: {
jsx: true,
},
sourceType: 'module',
},
},
name: 'nyxb:next:rules',
rules: {
...pluginReact.configs['jsx-runtime'].rules as any,
...pluginReactHooks.configs.recommended.rules as any,
...pluginNext.configs.recommended.rules as any,
...pluginNext.configs['core-web-vitals'].rules as any,
'next/google-font-display': 'error',
...stylistic
? {
}
: {},
...overrides,
},
},
]
}in the screenshots you can see that only conditional rules are activated and in the next rules actually only the one that I have activated individually. React: React Hooks: Next: all other are off: the packages are all on the latest version |
Beta Was this translation helpful? Give feedback.
-
|
@ryancwalsh, did you consider using import path from "node:path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
import { defineFlatConfig } from "eslint-define-config";
import ts from "@typescript-eslint/eslint-plugin";
import tsParser from "@typescript-eslint/parser";
import js from "@eslint/js";
const baseDirectory = path.dirname(fileURLToPath(import.meta.url));
const compat = new FlatCompat({
baseDirectory,
resolvePluginsRelativeTo: baseDirectory,
});
export default defineFlatConfig([
{
files: ["**/*.{ts,tsx}"],
plugins: {
"@typescript-eslint": ts,
},
languageOptions: {
parser: tsParser,
},
rules: {
...js.configs.recommended.rules,
...ts.configs.recommended.rules,
},
},
compat.config({
overrides: [
{ files: "ui/**/*.{ts,tsx}", extends: "next/core-web-vitals" },
],
})
]);I'm having issues getting this to work, but theoretically I think this is the ideal solution. |
Beta Was this translation helpful? Give feedback.
-
|
I see from #49337 (reply in thread) that I was using FlatCompat, but it has been a long time, so I don't remember anything that isn't documented above. If I recall, I probably kept using original eslint configs instead of the new flat style. Switching my projects to flat config was taking more time than it was worth. |
Beta Was this translation helpful? Give feedback.
-
|
EDIT again: I have created a package Just another option whilst we wait for the updated config. EDIT: After some more research, I believe the best options thus far until Next.js releases a flat config is: eslint.config.mjs // flat compat
import url from "node:url";
import eslint from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";
const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
const compat = new FlatCompat({ baseDirectory: __dirname });
/** @type {import('eslint').Linter.FlatConfig[]} */
export default [eslint.configs.recommended, ...compat.extends("next")];or (but you miss out on setting other eslint rules and parsing, and just get access to the default nextjs rules) import eslint from "@eslint/js";
import next from "@next/eslint-plugin-next";
/** @type {import('eslint').Linter.FlatConfig[]} */
export default [
eslint.configs.recommended,
{
plugins: {
"@next/next": next,
},
rules: {
...next.configs.recommended.rules,
},
},
];you can also just use the legacy config and not upgrade to eslint v9, which probably is the best idea for maximum compatability (i had some issues using FlatCompat in a monorepo) Hello, sorry for reviving an answered discussion but I have discovered an (external) package that offers the Next.js rules for use in ESLint Flat config. Not affiliated with them at all -- discovered it in use on the discord.js repo (discord.js/eslint.config.js).
from ESLint Config Neon: https://github.com/iCrawl/eslint-config-neon FlatCompat is also an option |
Beta Was this translation helpful? Give feedback.
-
|
ESLint has just released @eslint/compat, which looks much more elegant. // eslint.config.js
import { fixupConfigRules } from "@eslint/compat";
import { FlatCompat } from "@eslint/eslintrc";
const compat = new FlatCompat();
/** @type {import("eslint").Linter.FlatConfig[]} */
const config = [
...fixupConfigRules(compat.extends("next/core-web-vitals", "prettier")),
{ ignores: [".next"] },
];
export default config;This works fine, until |
Beta Was this translation helpful? Give feedback.
-
|
when trying @dir step's above I get the following error: ` Error: Cannot read config file: /node_modules/.pnpm/eslint-config-next@14.2.3_eslint@9.5.0_typescript@5.4.5/node_modules/eslint-config-next/index.js |
Beta Was this translation helpful? Give feedback.
-
|
A couple differences between my setup and yours I notice off the bat @jkaleshi14:
I have a hunch that addressing 3 on your end might fix it. But, could be one of the many other externalities as well. |
Beta Was this translation helpful? Give feedback.
-
|
@dir Thanks that fixed my issue |
Beta Was this translation helpful? Give feedback.
-
Could you share fix, please |
Beta Was this translation helpful? Give feedback.
-
|
@r34son I believe I already did, refer to my previous message. |
Beta Was this translation helpful? Give feedback.
-
|
Wish the Vercel team prioritized this a bit higher. It's a fairly small lift but is impacting the developer experience for a lot of us. If Next is striving so aggressively to use the newest standards (RSC, server actions, etc), can we not reflect that same mindset with things as small as our ESLint configs? |
Beta Was this translation helpful? Give feedback.
-
|
I wrote a setup guide for Eslint 9 with Next.js detailing my approach to flat config with Next.js : Eslint 9 & Next.js — Setup Guide Also for a TLDR; check my comment here |
Beta Was this translation helpful? Give feedback.
Hmm, it worked for me for TS and TSX files. Might be that it's missing the matcher?
We could maybe put the React and Next stuff into one object and add
files: ['**/*.ts', '**/*.tsx'],to it.Something like this:
And yes, sorry, …