Fixing VSCode issues with ESLint on Nx monorepo

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 monorepo

• Add 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!