Extension can't find typescript-eslint parser with yarn's pnpm linker installation layout

[ecraig12345]

With Yarn v4's pnpm linker, this extension no longer works on TS files due to issues the installation layout causes with the regexps the extension uses to detect parsers.

(This is probably blocking my team's repo from moving to yarn v4 + pnpm linker, since we'd really prefer not to lose eslint support in the editor, and I got everything else working.)

Repro

https://github.com/ecraig12345/repro-yarn-pnpm-eslint

1. Clone repo and open in VS Code
2. yarn
3. Run yarn lint and observe two errors
4. Open index.js (which works with the default parser) and observe a prefer-const lint error in the editor
5. Open index.ts and observe that there's no lint error shown with the same code

There are also no related diagnostic messages shown in the "Output" console for the plugin, either in normal or debug mode.

Analysis

With Yarn v4's pnpm linker, the realpath of @typescript-eslint/parser is something like node_modules/.store/@typescript-eslint-parser-virtual-783997822c/package as shown below. (node_modules/@typescript-eslint/parser also exists, but it's a symlink.)

node_modules
├── .store
│   └── @typescript-eslint-parser-virtual-783997822c
│       ├── node_modules
│       │   └── @typescript-eslint
│       │       └── parser -> ../../package
│       └── package
│           ├── (contents)
│           └── package.json
└── @typescript-eslint
    └── parser -> ../.store/@typescript-eslint-parser-virtual-783997822c/package

This breaks the extension's TS parser detection because it expects the resolved parser realpath to match one of these regexps. (The paths for babel-eslint and vue-eslint-parser would be broken too because of the auto-generated suffixes on the folders, as well as the extra package folder in the path.)

vscode-eslint/server/src/eslint.ts

Lines 755 to 757 in 8173467

	const typescript = /\/@typescript-eslint\/parser\//;
	const babelESLint = /\/babel-eslint\/lib\/index.js$/;
	const vueESLint = /\/vue-eslint-parser\/index.js$/;

Suggested fix

One option would be to change the regexps to be slightly more flexible, e.g.: /\/@typescript-eslint[/+-]parser[/@-]/. I think the other regexps with paths would need to be like /\/babel-eslint(-[^/]*\/package)?\/lib\/index.js$/.

Another option would be to modify whichever part of the code is resolving the extension to a realpath to preserve the symlinked path instead, but that would probably be harder to track down.

Notes

Interestingly, this is NOT broken with actual pnpm (note the @typescript-eslint/parser segment at the end of the path).

node_modules
├── .pnpm
│   └── @typescript-eslint+parser@7.3.1_eslint@8.57.0_typescript@5.4.2
│       └── node_modules
│           └── @typescript-eslint
│               └── parser
│                   ├── (contents)
│                   └── package.json
└── @typescript-eslint
    └── parser -> ../.pnpm/@typescript-eslint+parser@7.3.1_eslint@8.57.0_typescript@5.4.2/node_modules/@typescript-eslint/parser

[dbaeumer]

@ecraig12345 you can always tell the extension to validate certain file types by using the eslint.validate setting. Then the probing part is skipped.

"eslint.validate": [
    "typescript"
]

Should make the extension work in your setup.

Let me know if this helps.

[ecraig12345]

@dbaeumer That worked, thanks so much!

In case anyone else finds this, I also added typescriptreact to ensure TSX files are linted.

  "eslint.validate": ["typescript", "typescriptreact"]

[dbaeumer]

Great to hear it is working for you.