Change sidebar NPM scripts action - visual-studio-code

VSCode has a section at the bottom of the sidebar which lets you click a play icon to run the scripts you have in your package json.
The default action it runs (and it's visible for a brief moment in the console) is "npm run " and then the action starts.
At the moment I am using #antfu/ni, which automatically uses the correct package manager to run the actions (eg: "nr" acts as "npm run" in npm projects, as "yarn" in yarn projects and as "pnpm run" in pnpm projects).
I'm trying to change that click action to run "nr" instead of "npm run", I know there is a setting called npm.packageManager that chooses automatically the package manager, but instead of this how can I use "nr"?
Trying to force override it in settings.json results in nr run <my-action> which doesn't work, I just need nr <my-action>.
Any extension that overrides the default "npm scripts" panel and supports editing those commands will be appreciated too.

Related

How to open multiple integrated terminals in vs code and run command on them?

I'm working on my react project so every time I want to start working I have to open 3 terminals one for npm start which starts the react dev server, one for tsc -w which watches the typescript changes, and one sass src/sass:src/dist for sass compiler and it takes time every time having to manually open the terminals and running the command and switch to the next one, is there a way to automate this process, like an npm script or keyboard shortcut on vs-code? and if so is there a way to split them into one page on the terminal box in vs-code so I can see all three at once just by running the script or shortcut on vs-code?
Thanks!

How to execute a npm/yarn script when testing a VSCode extension?

I'm writing a VSCode extension which I bundle with esbuild, as suggested in VSCode docs. Following the docs, I added new script entries in my package.json, including:
"esbuild": "yarn run esbuild-base -- --sourcemap"
Now I must run yarn run esbuild, then hit f5 each time I want to test my extension. This is a source of confusion, because if I forget the first part, I'm going to test my old code.
To avoid this I wonder if it's possible to automatically run yarn run esbuild when I press f5.
Create a task to perform the yarn call
add this task as a preLaunchTask to your debug launch config
Or maybe you can setup an npm-watch script

Set up default browser in the Visual Studio Code

How can i change the default browser fired up when running npm start for a create-reac-app created app?
It'll run Firefox but I'd like the Chrome...
I think these links might help:
https://coderrocketfuel.com/article/open-create-react-app-in-a-specific-browser
create-react-app: How do I "npm start" with a specific browser?
Both set the BROWSER environment variable before executing the start command.
In your case you'll have to edit the start command package.json file according to this answer: https://stackoverflow.com/a/59882442/10250548

VSCode: Freezes after compilation

I tried to compile VSCode source for the first time ever, I ran the "yarn run watch" command and eventually the compilation finished with the message "Finished Compilation with 0 errors" but then the console just gets stuck there. I tried using different consoles but still facing the same problem.
I killed the process and had no later problems using VS Code from this build.
In the directory where vscode was cloned, I checked with du -s that nothing was changing over a few minutes of testing will the logging was stopped on your message above.
Having stopped yarn run watch I then carried out the next instruction of the build process: yarn watch.
This also hung with the same message. I used du again. And again there was no change in the size of the directory. I stopped yarn watch and was then able to run vscode, editing files without a problem.
All custom commands like watch that you can yarn run are defined in the file package.json in the project root. In this case, it's package.json on Github. Even before looking at it, I assumed from the name that what the command does is probably to build once and then go into a loop that watches for new changes and then rebuilds. In the section called scripts of package.json we see that watch is defined to be gulp watch --max_old_space_size=4095. Google gulp watch, and you'll see that that's what it does.
I think you're looking for yarn run compile, which the vscode team setup to build the project once and then exit.

WebStorm run npm script in tool window (Protractor)

I would like to be able to run an npm script in the Protractor tool window rather than npm. This is easily doable creating a new Protractor Run/Debug config but I need to add a command line argument which the Run config doesnt currently support.
More specifically I am trying to run
protractor --capabilities.chromeOptions.args=--headless --capabilities.chromeOptions.args=--disable-gpu
Would like to do this without modifying the protractor config file.
Essentially, I want to be able to do this without having to provide multiple config files in my project. One for headless, one without.
There is currently no way to specify cmd options in Protractor run configuration, please follow WEB-25165 for updates