microsoft/vscode-eslint

ESLint Configuration Update in VSCode

saravanakumar2504 opened this issue · 9 comments

We've successfully migrated our ESLint configuration from .eslintrc to the new flat config format, and it is functioning well within our CI/CD pipelines.

To integrate the new eslint.flat-config.js file with VSCode, we've updated our settings.json as follows:

{ "eslint.workingDirectories": [ "directory-1", "directory-2", "directory-3" ], "eslint.options": { "overrideConfigFile": "eslint.flat-config.js" }, "eslint.useFlatConfig": true // Other config }

However, due to the size of our monorepo and the complexity of the flat config with multiple file groups and overrides, we encounter an issue where changes to the ESLint config require a manual restart of the ESLint server in VSCode to take effect.

Question: How can we streamline this process to avoid manually restarting the ESLint server every time we update the configuration?

The problem is different naming of the flat config file. Is it necessary that you use a name different than the standard name?

"We've migrated from .eslintRc.js to a flat config by custom file name eslint.flat-config.js.
Our pipeline supports this change, but VSCode doesn't fully yet.

In. our pipeline we are pointing to ESLINT_USE_FLAT_CONFIG=true eslint -c eslint.flat-config.js
We're enabling flat config in VSCODE with a small group of developers to identify and fix any issues with flat config. Once everything works smoothly, we'll remove .eslintRc.js."

So the default one is we have follow this eslint.config.js right ?

Yes, if you use the default one everything should work without a restart of the ESLint server.

@dbaeumer : "I renamed eslint.flat-config.js to eslint.config.js for development purposes and removed the line"eslint.options": { "overrideConfigFile": "eslint.flat-config.js" }from .vscode/settings.json. However, I'm still experiencing the same behaviour where i need to restart eslint server so that i can see the updated rule in VSCODE"

@dbaeumer : I found the root cause of my issue is my eslint.flat-config.js will look like below.

const test1 = require('./eslint.test1-flat-config.js');
const test2 = require('./eslint.test2-flat-config.js');

module.exports = [
	...test1.map((config) => ({
		...config,
		name: `test1 - configuration`,
	})),
	...test2.map((config) => ({
		...config,
		name: `test2 - configuration`,
	})),
];

So when i'm changing eslint.test1-flat-config.js or eslint.test2-flat-config.js the changes were not reflecting as our .vscode/settings.json has config of "eslint.options": { "overrideConfigFile": "eslint.flat-config.js" }

I accidentally marked as completed and re-opened now