visual-studio-codeeslint

Change the configuration file location of ESLint in VSCode

My working environment looks like this:

I'm using the new flat configuration file that is documented here. The docs say that the file "[...] should be placed in the root directory of your project". However, my project root is starting to get cluttered with many other configuration files for other tools like Prettier, ShellCheck, etc. That's why I want to place my eslint.config.js file under a .config directory at the project. Since I only have a global file and don't require merging configurations, this approach works for me.

However, the file resolution algorithm looks for the file at the cwd, or alternatively, it starts looking at the parent directories until the project root is reached. Since the .config directory won't have my code, it won't get resolved correctly.

The docs also suggest that when calling eslint from the command line, the --config argument can be used to manually set the path to the configuration file. I want the equivalent of this argument in the VSCode extension, so that it loads the file from .config/eslint.config.js.

This StackOverflow question suggests that the configuration file path can be set by adding this to the VSCode settings.json:

{
    "eslint.options": { "configFile": "./.config/eslint.config.js" }
}

However, when running with that option, the extension complains that this setting has been removed:

Error: Invalid Options:
- Unknown options: configFile
- 'configFile' has been removed. Please use the 'overrideConfigFile' option instead.
Solution

  • The solution is to define an overrideConfigFile option to point to the location of the ESLint configuration file in the workspace in the settings.json like so:

    {
    "eslint.options": { "overrideConfigFile": "./path/to/eslint.config.js" }
}

    Since ESLint v8.x, the ESLint extension in VSCode uses the ESLint Class API to "[...] configure how ESLint is started". The extension documents that "[...] to point to a custom .eslintrc.json file using the new ESLint API" is as shown above.

    For good measure, since the configuration file used is the new flat config file, the eslint.useFlatConfig setting can also be explicitly set to true. In the settings.json:

    {
    "eslint.useFlatConfig": true
}

    Since version 3.0.5 of the extension, the activation of this setting works like this: