Configuring ESLint for a project with separate backend and frontend folders

[MertcanYuzer]

Hello,

Imagine a repository with two folders named backend and frontend, and we are opening the repository's main folder with VSCode.

How should the ESLint configurations be set up? Should they be done separately for the backend and frontend, or can a configuration be made to cover both folders?
When I try to do it separately, VSCode gives the error "Extension 'Eslint' is configured as formatter but it cannot format 'TypeScript' -files" and it gives this error not only for TypeScript but also JavaScript and JSON file types, so I can't format any files.

[thenbe]

Use a single eslint.config.js in the root of your repo (docs). If you want to apply different rules to your directories, use globs to target the directory:

import antfu from '@antfu/eslint-config';

export default antfu(
	{
		stylistic: {
			indent: 'tab',
			semi: true,
		},
	},
	{
		files: ['**/*'],
		rules: {
			'no-console': 'off',
		},
	},
	{
		files: ['apps/frontend/**/*'],
		rules: {
			'react/prefer-destructuring-assignment': 'off',
		},
	},
);

If you are using pnpm, one caveat you should be aware of is that you should install any eslint plugins in the root of your repo as well.

One piece of advice is to first focus on making eslint behave the way you want when running it from the command line (i.e. run pnpm eslint .). Once eslint lints your project properly through the cli, start messing with the eslint-vscode setup. Eslint LSP has gotten better over time, but there are times where it won't behave (like when using typescript-eslint in a monorepos). When in doubt, trust the cli! If the cli works ok, then the issue is almost always with the LSP settings. If you hit a wall, see if it's a known issue on the LSP bug tracker.

Also see https://github.com/typescript-eslint/typescript-eslint/blob/main/docs/getting-started/typed-linting/Monorepos.mdx for typescript specific setup in monorepos.

[max-oyedele]

You can configure both .eslintrc.js for separate folders. But in my experience when you are working with only one language(e.g. JavaScript or TypeScript) It is better to create one eslint configuration file at the root path.
Besides Eslint extension in VScode, you need to install eslint related packages like below.

"eslint": "^8.38.0", "eslint-config-prettier": "^9.1.0", "eslint-loader": "^4.0.2", "eslint-plugin-jest": "^28.2.0", "eslint-plugin-json": "^3.1.0", "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-simple-import-sort": "^8.0.0", "@typescript-eslint/eslint-plugin": "^6.7.4", "@typescript-eslint/parser": "^6.7.4" ...

This is one I am frequently using in my project.

[MertcanYuzer]

Thank you for your responses. Even though I like Anthony's settings, dealing with eslint has been very exhausting for me. Having to use a lot of packages, extensions, and other problems. I think every attempt is a complete waste of time for eslint. Therefore, I started using biomejs. Although I haven't yet achieved the configuration I want, I was able to get it working so quickly that I'm sure I won't use eslint again.