Yarn PnP + vscode‑linter‑xo compatibility

[Yanis-Kouidri]

I'm not able to use VScode-linter-xo in my environment.

Environment

Yarn 4.9.2 in Plug’n’Play (PnP) mode.

Installed xo using yarn add -D xo.

yarn xo works flawlessly in terminal.

Error in VSCode

With the vscode-linter-xo extension, I get the following error:

Failed to resolve module: xo. Ensure that xo has been installed.

Troubleshooting steps tried

Ran yarn dlx @yarnpkg/sdks vscode to generate Yarn SDKs for VSCode, but the error remains.

Installed and attempted using pnpify with settings pointing to .vscode/pnpify, but xo is still not detected in VSCode.

Additional context

I also use Prettier with the official VSCode Prettier extension, which works fine under PnP—no module resolution issues there.

🔗 Reference to existing issue (#71)

I noticed that issue #71 – “Fails to load when XO is installed using yarn PnP” is still open, created over 5 years ago. It describes the same behaviour and recommends using Yarn’s pnpify or allowing a user-settable xo.path in settings to support PnP.

Questions and Proposals

Has there been any progress or plans to support Yarn PnP natively in recent versions?
With major updates (Yarn v3/v4, newer VSCode, React + Vite), compatibility could now be feasible.

Thank you for your efforts on this extension. Let me know how I can support a fix or workaround

[spence-s]

This extension currently requires xo to be installed in the projects local node_modules folder.

yarn does something else completely with PNP and we won't be supporting PNP by default as there would be a many edge cases and both pnpm and npm work by default with no special detection.

You can set up yarn to use node_modules. OR you can use the xo.path option in vscode options to tell this extension to look in the yarn install folder or wherever it goes.

vscode settings (probably project settings). We do now also support relative paths from the project root for this option I believe.

Let me know if you have any issues with this option, we will fix those if needed.

non tested example

"xo.path":  "~/.yarn/cache/xo/dist/index.js"

[Yanis-Kouidri]

Well, I tried to use xo.path option but unfortunatly yarn store dependencies as zip file so it shoud be something like that but of course doesn't work:

"xo.path": "~.yarn/berry/cache/xo-npm-1.2.1-6b9f6569a6-10c0.zip/node_module/xo/dist/index.js"

I also tried with ZipFS extension that is supposed to solved the problem but same problem:

  "xo.path": "/zip:/home/user/.yarn/berry/cache/xo-npm-1.2.1-6b9f6569a6-10c0.zip/node_module/xo/dist/index.js"

I don't want to use node_modules folder, however this suggestion from here could do the job but it didn't work for me:

My suggested solution will be switching to eslint-config-xo + ESLint VSCode plugin combo. The ESLint VSCode Extension currently supports Yarn's Editor SDK, so there will be no problem linting with Yarn v3 and PnP enabled (though you need to manually generate the Editor SDK).

Do you have any idea to fix the problem ?

[spence-s]

I might be wrong about this, but it looks to me like yarn berry internally fixes things for vscode extensions. You may want to open an issue there to see if they can add xo and vscode-linter-xo support.

see: https://github.com/yarnpkg/berry/blob/master/packages/yarnpkg-sdks/sources/sdks/vscode.ts

Hard for me to say exactly how it works, seems insanely complicated.

I personally just stick with npm and try to keep it simple :) - I hear good things about pnpm as well.

[spence-s]

Looks like an issue has already been opened there, perhaps ping on this issue:

yarnpkg/berry#4066

[spence-s]

Finally, note that the newest versions of xo have much better support for eslint. which seems to be supported by yarn

[Yanis-Kouidri]

You're right — it does seem more like it's up to Yarn to adapt plugin compatibility for VS Code, rather than the other way around.
Maybe yarn isn't as solid as I thought; I’ll consider switching to pnpm or going back to npm.

Anyway, here’s the solution that worked best for me for now:

Solution using Eslint

Install xo and eslint:

yarn add -D xo eslint

Run the Yarn SDK command to enable editor integration (VS Code):

yarn dlx @yarnpkg/sdks vscode

Then configure eslint.config.js as mentioned here, as you pointed out:

Finally, note that the newest versions of xo have much better support for eslint. which seems to be supported by yarn

Don't use a xo.config.js file.

With this setup, I now get proper linting directly in VS Code — errors are underlined as expected

Thanks for your help