I recently set up an Nx monorepo with a lot of sensible defaults. My linting config was working perfect in CI. Running ESLint on terminal through Nx would work fine as well but I was not seeing any ESLint issues on my VSCode editor.
On digging deeper, turns out we need to manually specify the working directories within an Nx monorepo correctly for VSCode to pick up the changes. This is as of Oct 12, 2023.
If you run into a similar issue, the first thing to check would be to
hit
Cmd+shift+p
Type
ESLint: show output channel
and click that option
and make sure you don't see any errors on the terminal that pops up. In my case, the ESLint output channel was complaining about a missing node module within the ESLint flat config. Adding the dependency got rid of that issue.
The next step was to make VSCode aware of the Nx monorepo setup. This can be fixed by opening your VSCode settings.json file. If you're working in a team and need to ensure everyone gets the setup that you do, you can
create
.vscode/settings.json
file in your Nx monorepoAdd the following config to list each app/package within your monorepo.
{
"eslint.workingDirectories": [
{ "pattern": "./apps/*/" },
{ "pattern": "./packages/*/" }
]
}
Find docs here - https://github.com/microsoft/vscode-eslint#settings-options
After making this change,
hit
Cmd+shift+p
Type
ESLint: Restart ESLint server
and click that option.
That's it! Your Nx monorepos app and package level warnings/errors should now show up within VSCode as you open files. Happy coding!