Npm Scripts view not available if package.json located only in nested folder

[IllusionMH]

Issue Type: Bug

Noticed that in project where there is no package.json file in root folder I cannot show Npm Scripts view (even from context menu on other views in explorer folder. Structure

project-folder
|--backend1
|--backend2
|--static
\--ui
   |--src (contains app source)
   |--tools
   |  |--tool1
   |  |  \--package.json
   |  |
   |  \--tool2
   |     \--package.json
   |
   \--pacakge.json (main)

In this case unless I open any of 3 package.json files (in ui, ui/tools/tool1, and ui/tools/tool2) it's not possible to get that view, see tasks an run them. I also haven't found any command to force Npm Scripts visibility.

However as soon as I open any of them - I can see view with all 3 package.json files and their tasks in it.

UPD. Removed wrong code pointers and assumptions.

Tried with default value of npm.autoDetect and explicitly putting "npm.autoDetect": "on" in User and Workspace settings.

VS Code version: Code - Insiders 1.55.0-insider (6f726bcdf6a4d6cb518a3fcdb03c21be7293f417, 2021-03-25T08:19:33.237Z) OS version: Windows_NT x64 10.0.19041

System Info

|Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz (12 x 3192)| |GPU Status|2d_canvas: enabled
gpu_compositing: enabled
multiple_raster_threads: enabled_on
oop_rasterization: enabled
opengl: enabled_on
protected_video_decode: enabled
rasterization: enabled
skia_renderer: enabled_on
video_decode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled| |Load (avg)|undefined| |Memory (System)|31.72GB (19.75GB free)| |Process Argv|--crash-reporter-id cf52dbde-2c94-45c3-9bf3-45d8b9966b04| |Screen Reader|no| |VM|0%|

Extensions: none

[vscodebot[bot]]

(Experimental duplicate detection) Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• Npm: Unable to debug scripts in subfolders (#116705)

[alexr00]

@IllusionMH this is by design. We don't want to do a potentially long running search for package.json in the entire workspace to activate the NPM extension. However, if you do something that causes the extension to be activated then we do do that potentially long running search and cap it after 1 second. In your case, opening a .json file causes the extension to activate.

[IllusionMH]

Can it be then repurposed for feature request that will add configuration to force extension activation?

Idea is that I need to opt in with something like "npm.alwaysPerformLookup": true in my .vscode/settings.json so extension would activate anyway and eventually find package.json files that are not in exclude list. In this way I can keep consistent flow for projects that has package.json in root or somewhere deeply.

Without any way to force Npm Scripts to activate and search for package.json files as long as it needs - it forces user to open that package.json (not obvious at all, noticed randomly when decided to check if JSON has errors in it) in hope that it will be activated (hi old loaded HDD) and shown until next window reload. Repeat again next time.

[alexr00]

Certainly, that's a reasonable feature request!

[IllusionMH]

Question about implementation detail: is it possible to activate extension if config available or it would need to use "*" or "onStartupFinished" with early exit depending on config?

[alexr00]

It is currently not possible to activate when a config is available. That is tracked by this feature request (which would be needed first): https://github.com/microsoft/vscode/issues/55299

[q00u]

Did this change recently? I could previously see my npm scripts, even though the package.json was one folder deep. Until I updated today, that is.

[alumni]

Yepp, since v1.55, script explorer is not available at all anymore, and in my case package.json is in the root folder.

[kennethh72]

In the latest version of Visual Code the "npm scripts" were missing and i was not able to find it under views either. Found a solution by going manually to the correct folder and running "code ." to start the the visual code editor, then the npm scripts tab is available and it is possible to run the scripts.

[alumni]

@kennethh72 our issue is #120279, somehow I didn't find it when I wrote the comment.

[WORMSS]

I've just updated my work machine to 1.56.2 and npm scripts is completely missing. I don't even have an option to show the panel.. it's just gone completely.. My home machine on 1.54.3 works perfectly and shows it.

So, do I just disable vscode updates until this "feature" bug is changed?

[q00u]

Still not working in 1.57.1

Opening a .json file does NOT cause the scripts to be found either

I don't know if these matter, but:

• Npm: Auto Detect is on
• Npm: Enable Run From Folder is on

Is it trying to find the scripts but failing because they're not found within one second? But the package.json is only one folder deep.

[mrgiao]

@q00u The NPM SCRIPTS panel appeared for me when I clicked on the actual package.json file not just any .json file.

• VS Code version: 1.59.1

[q00u]

@mrgiao that works for you 100% of the time?

NPM SCRIPTS previously sometimes appeared when I opened package.json, unless it was already open when I reopened the folder, or if I Reloaded the window.

Now, it doesn't appear to load at all anymore if I have any other VS Code windows open when I reopen this folder. Or maybe it's random?

• VS Code version 1.60.0

Definitely still not fixed.

[mrgiao]

@q00u yes it's working 100% for me.

[bf-software]

can we have a setting in <project folder>/.vscode/settings.json that's like this:

"npm.packageJsonPath": "./sub-path/goes/here/"

this would indicate the main package.json for the project that should be active when the project is first opened in vscode. It can also be a global setting if you want to standardize on a folder structure for all projects. So, if you always have your package.json in ./dev/package.json you could set that globally too.

[alexr00]

@bf-software if https://github.com/microsoft/vscode/issues/55299 is added then yes, we should add a setting as you describe.

[stromseng]

Having this exact issue now, I have two folders with different package.json files in my repo. The NPM Scripts view does not appear and cannot be toggled.

[mrgiao]

Still experiencing the issue of NPM scripts not autodetecting deeply nested package.json and have been looking for workaround. One alternative is to use this extension: Task Explorer. It has similar functionality but also shows groups of recently used and favorites. Oddly as soon as I touch the extension (and presumably starts deep diving after package.json files) it also seems to wake NPM scripts which then shows available tasks. You can position the panel where you like.

[KentuckyMC]

Should be great when this will be added. Same issue on a nested package.json

[baranelitez]

this is still a thing. It's 2024 people. At least give a right-click -> show npm scripts kinda action flow.

Not even detecting a package.json in a one directory deep structure. Clicking, editing, saving a package.json file won't make it visible too. Only way for me is to cd into each package.json's directory and run a script from them from the integrated terminal. then they appear.

[baranelitez]

I've found out running a script like pnpm run invalidscript causes the NPM SCRIPTS dropdown box to appear.

[tanchekwei]

To view NPM Scripts from nested package.json files, I created an empty package.json in my project's root directory.

[bf-software]

@tanchekwei OMG, what a great hack!! It actually works!
Hah, what the heck vscode?? It can be done obviously!