microsoft / vscode-edge-devtools

A VSCode extension that allows you to use browser devtools from within the editor. The devtools will connect to an instance of Microsoft Edge giving you the ability to alter CSS styling, perform diagnostics, and debugging. Get it now at http://aka.ms/devtools-for-code
https://docs.microsoft.com/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension
MIT License
745 stars 254 forks source link

Ensure node and npm are installed (not WSL) #2390

Closed trolleyboy closed 3 days ago

trolleyboy commented 2 weeks ago

Environment:

Describe the bug:

Similar to #1145, pop-up upon loading a html file says "Ensure `node` and `npm` are installed to enable automatically reporting issues in source files pertaining to accessibility, compatibility, security, and more."

The output of the Microsoft Edge Tools extension suggests it can't install the "hint" package:

Error loading shared "hint" package
Error: Cannot find module 'hint'
Require stack:
- c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1152:15)
    at Function.resolve (node:internal/modules/helpers:190:19)
    at loadPackage (c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:6070)
    at a (c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:8713)
    at t.loadWebhint (c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:9231)
    at t.Analyzer.initWebhint (c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:3292)
    at t.Analyzer.validateTextDocument (c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:3966)
    at c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:147226
    at o.invoke (c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:35810)
    at i.fire (c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:36571) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'c:\\Users\\user1\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.5\\node_modules\\vscode-webhint\\dist\\src\\server.js'
  ]
}
Unable to install shared webhint instance Error: spawn EINVAL
    at ChildProcess.spawn (node:internal/child_process:421:11)
    at spawn (node:child_process:799:9)
    at t.run (c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:7419)
    at createPackageJson (c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:5657)
    at t.updateSharedWebhint (c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:8143)
    at async a (c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:9004)
    at async t.Analyzer.initWebhint (c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:3270)
    at async t.Analyzer.validateTextDocument (c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:3955)
    at async c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:147218 {
  errno: -4071,
  code: 'EINVAL',
  syscall: 'spawn'
}
Unable to load shared webhint instance Error: Cannot find module 'hint'
Require stack:
- c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1152:15)
    at Function.resolve (node:internal/modules/helpers:190:19)
    at loadPackage (c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:6070)
    at a (c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:9055)
    at async t.Analyzer.initWebhint (c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:3270)
    at async t.Analyzer.validateTextDocument (c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:3955)
    at async c:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\vscode-webhint\dist\src\server.js:1:147218 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'c:\\Users\\user1\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.5\\node_modules\\vscode-webhint\\dist\\src\\server.js'
  ]
}
Installing shared version of "hint"

The shared version of "hint" never seems to be installed. I'm reporting this separately to #2348 as I'm not using WSL, although this comment on that issue seems relevant: https://github.com/microsoft/vscode-edge-devtools/issues/2348#issuecomment-2284221667

Repro steps:

  1. Install NodeJS LTS (v20.17.0). (tried using WinGet and manual MSI download/install)
  2. Install Edge Tools extension. (order of 1 & 2 doesn't seem to matter)
  3. Restart VS Code
  4. Open HTML file
  5. Pop-up is displayed in VS Code, and errors thrown in extension output.

Expected behavior:

A shared version of "hint" is installed correctly and the extension is able to report issues in the opened html file.

Additional context:

Similar to suggestion on #1145, I tried removing C:\Users\user1\AppData\Roaming\Code\User\globalStorage\ms-edgedevtools.vscode-edge-devtool\node_modules, however the \ms-edgedevtools.vscode-edge-devtool directory was empty.

Per the errors above, I tried removing the C:\Users\user1\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.5\node_modules\ directory and running npm i -D. After doing some work, then restarting VS Code, nothing seems to change - the popup and error still occur.

If I change to my profile directory C:\Users\user1\ and run npm install hint the extension detects that and uses it as a "shared" instance. But, I'd expect the extension to be properly handling this.

AB#53620388

captainbrosset commented 1 week ago

Thank you for filing, and providing these details. I'll make sure this is on our bugs backlog.