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
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"
Install NodeJS LTS (v20.17.0). (tried using WinGet and manual MSI download/install)
Install Edge Tools extension. (order of 1 & 2 doesn't seem to matter)
Restart VS Code
Open HTML file
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.
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:
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:
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 runningnpm 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 runnpm 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