ESLint VSCode plugin not working with eslint.config.mjs

Question

I have an Express.js API, and I'm using the latest version of ESLint (9.10.0). I've been trying to enable code warnings and errors in VS Code, but when I run npx eslint --init, ESLint creates an eslint.config.mjs file instead of a .eslintrc file, even though the ESLint plugin documentation mentions that it works with .eslintrc.

I also tried creating my own .eslintrc.js file manually with the following configuration:

module.exports = {
    env: {
        commonjs: true,
        es2021: true,
        node: true
    },
    extends: [
        'airbnb-base'
    ],
    parserOptions: {
        ecmaVersion: 12
    },
    rules: {}
};

However, it still doesn't work. VS Code is not showing any warnings or errors from ESLint. I've tried restarting VS Code and reloading the extensions, but nothing seems to help.

Any suggestions on how to resolve this?

Answer 1

ESLint recently changed the default config format. The legacy .eslintrc file format is no longer enabled by default. Instead, the new ("flat") config format uses a file like eslint.config.js. You can read more about this on:

• https://eslint.org/docs/latest/use/configure/configuration-files: the new config files documentation
• https://eslint.org/docs/latest/use/configure/migration-guide: is a migration guide

You'll also want to make sure your VS Code ESLint extension ("dbaeumer.vscode-eslint") is up-to-date. Older versions needed eslint.useFlatConfig -or, even older, eslint.experimental.useFlatConfig- to be enabled in the VS Code settings. Search useFlatConfig on https://github.com/microsoft/vscode-eslint to see how older versions enabled flat config by default starting in 3.0.5.