I have Eslint working in a TypeScript Next.js project, but I want to switch to the new "flat config" approach that Eslint offers.
I created /eslint.config.js
to look something like this: https://stackoverflow.com/a/74819187/470749
Part 1
How can I migrate the extends: ['next/core-web-vitals'],
to the flat config, which doesn’t support extends
?
Part 2
Other than missing ‘next/core-web-vitals’, if I run eslint pages/*
, I see the errors that I expect.
But my VSCode no longer shows errors.
I see "eslint.experimental.useFlatConfig": true,
in my VSC settings, and I’ve restarted VSC, but it still doesn’t work.
How can I get the flat config to run automatically in VSC?
2
Answers
I had already seen in the terminal
TypeError: Could not find the rule "canonical/filename-match-exported".
, but I'd ignored it.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
/* eslint-disable canonical/filename-match-exported */
from the files that had those comments, VSC started honoring my ESLint rules (even in tsx files).It seems like a bug (or questionable design choice) that the VSC ESLint extension would fail in a nearly silent way if it can't find a rule definition.
Part 1
extends syntax that was compatible with config files is not needed in the flat file config that is code – just import/require the plug-in as a normal lib.
Part 2
The vscode-eslint extension was slow to adopt the flat file config and I do not think it is fully supported yet (in the case of workspaces), but 2.4.0 supposedly works. I have not used this version but I did use the pre-release that it is based on.
extra
After multiple engineers burning lots of time on eslint’s mess (not just the flat file config) we are moving away from eslint. Lots of gravity behind eslint but Id rather bare that cost than the hair-pulling insanity of eslint.