Is there a way to open a Visual Studio Code internal powershell window from NPM Script? - powershell

I am currently doing some work with npm scripts and can't find an answer to my question online!
I want to run 3 NPM scripts by typing one command. Here the scripts:
"start-jsonserver:platform": "ng serve --configuration jsonserver"
"start:corePlugins": "ng serve corePlugins",
"start:jsonserver": "cd ../json-server & npm run start",
"start:allJsonEnvironment": "npm run start-jsonserver:platform && npm run start:corePlugins && npm run start:jsonserver",
Note that the last command is not working as I want it to as it stops after the first ng serve is "done". I have also tried the same command with just one & but this has the same effect
I have found a solution which is opening 3 seperate Powershell windows:
"start:allJsonEnvironment": "start powershell npm run start-jsonserver:platform && start powershell npm run start:corePlugins && start powershell npm run start:jsonserver"
The Problem is this opens the normal 'standalone' Powershell windows which, to be honest is really ugly and I am used to seeing the VS Code internal Powershell windows (3 at the same time) since its easy to spot if something went wrong.
Like that:
So if there is a way to open these 'internal' Powershell windows from the npm script I would really appreciate help.
(I know there is a way to run all three scripts in one internal window but that is not what I am looking for!)

Okay after some research I have found another solution.
Its not envolving NPM scripts but it is actually the better solution.
My personal solution to the Problem was to use the VS Code Tasks and dependsOn to connect all three commands:
{
"version": "2.0.0",
"tasks":
[
{
"label": "corePlugins",
"type": "shell",
"options": {
"cwd": "${workspaceFolder}/frontend"
},
"command": "ng serve corePlugins"
},
{
"label": "serve_conf_json",
"type": "shell",
"options": {
"cwd": "${workspaceFolder}/frontend"
},
"command": "ng serve --configuration jsonserver"
},
{
"label": "json-server",
"group": "test",
"type": "shell",
"options": {
"cwd": "${workspaceFolder}/json-server"
},
"command": "npm run start"
},
{
"label": "startAllJson",
"dependsOn": [
"json-server",
"corePlugins",
"serve_conf_json",
]
}
]
}
So now I can just run the Task startAllJson and it opens 3 VSCode Terminals and runs those commands.
I know this might not be the perfect answer to my question but it was the best solution I found in a short amount of time.

Related

VSCode terminal task not using zsh profile

I'm trying to run a task on window load in VSCode where a terminal opens and nvm use && yarn dev is run by default. However, running this shell tasks seems to not load my zsh profile.
The output I get from running my task is:
The terminal process "zsh '-c', 'nvm use && yarn dev'" terminated with exit code: 127.
Terminal will be reused by tasks, press any key to close it.
But if I then manually start a new terminal and run the same command (ie: by pressing plus, opening a new integrated terminal), it will work as intended.
Suspecting that VSCode isn't loading my profile for some reason, I tried adding the following to my task, it resulted in the error /bin/zsh: can't open input file: nvm use && yarn dev The terminal process "zsh '-l', 'nvm use && yarn dev'" terminated with exit code: 127..
// in dev task
"options": {
"shell": {
"executable": "zsh",
"args": ["-l"]
}
},
.vscode/tasks.json
{
"version": "2.0.0",
"presentation": {
"echo": false,
"reveal": "always",
"focus": false,
"panel": "dedicated",
"showReuseMessage": true
},
"tasks": [
{
"label": "Create terminals",
"dependsOn": [
"Dev",
],
// Mark as the default build task so cmd/ctrl+shift+b will create them
"group": {
"kind": "build",
"isDefault": true
},
// Try start the task on folder open
"runOptions": {
"runOn": "folderOpen"
}
},
{
"label": "Dev",
"type": "shell",
"command":
["nvm use && yarn dev"],
"isBackground": true,
"problemMatcher": [],
"presentation": {
"group": "dev-group"
}
},
]
}
This worked for me-
"terminal.integrated.profiles.osx": {
"zsh": {
"path": "/bin/zsh",
"args": ["-l", "-i"]
}
},
github.com/microsoft/vscode/issues/143061
try adding this to your settings.json
"terminal.integrated.profiles.osx": {
[...]
"zsh": {
"path": "/bin/zsh -l",
"args": [
"-l"
]
},
[...]
},
Note that the important part is
"path": "/bin/zsh -l",
I had the same problem and I found that for some reason VScode does not take into consideration the -l flag passed in args. So you can just include it with path.
If you do not have terminal.integrated.profiles.osx in your settings, you can copy it from the default settings (open the Command Palette and search for 'default settings').
I did not need to do this, but you can make sure that zsh is the default terminal profile for VScode by setting terminal.integrated.defaultProfile.osx to zsh
Try running echo $SHELL from VSCode's integrated terminal. If you're on a Mac or Linux machine, you can compare that output to the output from the terminal app (outside VSCode). It's possible your default shell in VSCode is set incorrectly or using a copy of zsh at another location. If so, set VSCode's default shell through the command palette (Terminal: Select Default Shell).
Also check out your shell's default profile (Terminal: Select Default Profile) from the command palette and make sure it's set to zsh -l... using the -c argument (non-login non-interactive) will prevent ~/.zshrc from being executed, which sounds like what's going on here given your error output.
Finally, confirm your profile is located correctly (at ~/.zshrc) and that both nvm and yarn PATHs are exported. Alternatively, if you're trying to reference yarn locally (if for some reason you only installed it locally), you'll need to run yarn via npx...
You may need to add an automation profile as well
"terminal.integrated.profiles.osx": {
"zsh": {
"path": "/bin/zsh -l",
"args": ["-l"]
}
},
"terminal.integrated.automationProfile.osx": {
"path": "/bin/zsh"
}
macOS 12.6.1 | vscode 1.74.0
I did not manage to do any if it since none of this worked, so I have just removed warning...
"terminal.integrated.showExitAlert": false
Or via GUI
I hope that will not get minus points here...

(tasks.json) I can't figure out how to use escaping characters using WSL as a shell

I'm running VSCode 1.54.3 on Windows10 along with Ubuntu in WSL.
This is the task I'm trying to build.
{
"label": "Verilog: Compile iVerilog File ",
"command": "iverilog",
"type": "shell",
"args": [
"-t vvp",
"-o ${fileBasename}.vvp",
"-l /opt/Xilinx/14.7/ISE_DS/ISE/DCM_SP.v",
"-I /opt/Xilinx/14.7/ISE_DS/ISE/verilog/src/unisims",
"-I /opt/Xilinx/14.7/ISE_DS/ISE/verilog/src/XilinxCoreLib/",
"wslpath ${workspaceFolder}${pathSeparator}${relativeFileDirname}${pathSeparator}${fileBasenameNoExtension}.v"
],
"problemMatcher": [
"$tsc"
],
"presentation": {
"reveal": "always"
},
"group": "build"
}
Clearly I'm here because it doesn't work so I'm here to throw myself at the feet of smarter people.
This is what it actually runs
> Executing task in folder xilinx_projects: iverilog '-t vvp' '-o pulse2.v.vvp' '-l /opt/Xilinx/14.7/ISE_DS/ISE/DCM_SP.v' '-I /opt/Xilinx/14.7/ISE_DS/ISE/verilog/src/unisims' '-I /opt/Xilinx/14.7/ISE_DS/ISE/verilog/src/XilinxCoreLib/' 'wslpath C:\demand\xilinx_projects\pulse2\pulse2.v
I've been to the following pages for help:
Single quotes not escaped in debug commands #91578
how-do-i-use-bash-on-ubuntu-on-windows-wsl-for-my-vs-code-terminal
Regression: WSL Shell Task command containing spaces fails
Paths separators in build config being escaped/stripped out prior to build command being run #35593
All double quotes removed from command in tasks.json in powershell #72039
Variable Reference
And of course: Integrate with External Tools via Tasks
I see other people struggling with it. I can't tell if that is current. These things find a way dead ending when someone finally gets it or the problem goes away from some other feature that I must not know about.
I'm sure the answer is somewhere in those links. I just can't find one that works for me. I've tried all kinds of variations of escape characters and none work for me.
You'll also see that the final argument is obscene compared to what someone that knows what they are doing would use. That same command works in "command":, but not as an arg.
I try to avoid asking questions but this is killing me. I fill very close to being able to use tasks to do more but I find the documentation incomplete and without examples of what the shell sees.
You can probably see what I'm trying to accomplish. Can you offer any advice on how to do this as painlessly as possible?
From the "containing spaces fails" issue that you linked to, I wasn't able to get the original version of the sample "My Task" to work, so it almost does seem like the fixed regression has regressed again. Either that, or the new 2.0.0 task system doesn't parse it the same way.
That example used one long "command", but specified the "executable" as wsl.exe. Something else may have changed here, because reading the ${env:windir} as specified there doesn't work for me either when launching vscode from WSL. But no matter, I'm just going to leave off the path for now.
One alternative presented there was to specify each element as a separate arg (i.e. "args": [ "ls", "/", "&&", "echo", "OK", "#", "comment" ]). That does work for me, and your iverilog arguments seem to work when parsed that way as well. At least, it comes out as an unquoted command line. To be honest, the way the "Quoting" section of the Tasks doc reads, it sounds like that is the expected way to do it -- Have each element be a separate "arg". From that page:
If a command and arguments are provided, the task system will use single quotes if the command or arguments contain spaces.
That's exactly what we are seeing, of course.
But there's another alternative I found, as well. A comment further down that thread mentioned passing -c to the (old) ubuntu1804.exe executable. That led me to try something similar for the wsl.exe command, and it worked to pass in args of "-e", "sh", and "-c", along with the full commandline in the "command", like so:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Verilog: Compile iVerilog File",
"options": {
"shell": {
"executable": "wsl.exe",
"args": [
"-e"
"sh",
"-c"
]
}
},
"type": "shell",
"command": "iverilog -t vvp -o ${fileBasename}.vvp -l /opt/Xilinx/14.7/ISE_DS/ISE/DCM_SP.v -I /opt/Xilinx/14.7/ISE_DS/ISE/verilog/src/unisims -I /opt/Xilinx/14.7/ISE_DS/ISE/verilog/src/XilinxCoreLib/ wslpath ${workspaceFolder}${pathSeparator}${relativeFileDirname}${pathSeparator}${fileBasenameNoExtension}.v",
"problemMatcher": [
"$tsc"
],
"presentation": {
"reveal": "always"
},
"group": "build"
},
{
"label": "My Task",
"options": {
"shell": {
"executable": "wsl.exe",
"args": [
"-e",
"sh",
"-c"
]
}
},
"type": "shell",
"command": "ls / && echo OK # comment",
"problemMatcher": [],
"presentation": {
"reveal": "always"
},
"group": "build"
}
]
}
I believe that's your consolidated full command-line for iverilog. I've also included the "My Task" example, which is generic enough that it should work on any WSL system.
Can you replace corresponding setion of tasks.json with this ?
"type": "shell",
"command": "wsl",
"args": ["bash", "-c", "iverilog\
-t vvp -o ${fileBasename}.vvp -l /opt/Xilinx/14.7/ISE_DS/ISE/DCM_SP.v\
-I /opt/Xilinx/14.7/ISE_DS/ISE/verilog/src/unisims\
-I /opt/Xilinx/14.7/ISE_DS/ISE/verilog/src/XilinxCoreLib/\
$(wslpath '${workspaceFolder}${pathSeparator}${relativeFileDirname}${pathSeparator}${fileBasenameNoExtension}.v')"]

Configuring multiple commands to run in parallel in VS Code tasks (to compile and autoprefix Sass)

I had previously been using Koala to compile my Sass with autoprefixing and minifying (on Windows), but have come to find that Koala is no longer maintained. I'm therefore trying to figure out how people usually compile Sass, autoprefix it, and minify it automatically on save.
I'm not super experienced with command line tools like Gulp but have used NPM enough to get to the point of being able to install Dart Sass, PostCSS, etc., and since I use VS Code, have decided that its internal Tasks feature seems like the easiest way to go.
Currently if I do this in the VS Code terminal:
sass --watch sass:. --style compressed
It works, i.e., it successfully watches for changes in the sass directory and outputs a minified .css file in the parent directory.
If I stop that and do this instead:
postcss style-raw.css --output style.css --use autoprefixer --watch
It also works. I had to rename the original .scss file because apparently postcss doesn't allow --replace and --watch at the same time.
So right now, I have style-raw.scss which compiles to style-raw.css when I run the sass command, and style-raw.css gets autoprefixed and output to style.css when I run the postcss command.
Where I'm stuck is getting both commands to run at the same time via a Task. In my tasks.json file I have:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Sass Compile",
"type": "shell",
"command": "sass --watch sass:. --style compressed | postcss style-raw.css --output style.css --use autoprefixer --watch",
"problemMatcher": [
"$node-sass"
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
This is connected to the Build task, which has a keyboard shortcut of ctrl+shift+B, so my ultimate goal thus far has been to be able to just hit ctrl+shift+B to start everything up getting watched and compiled and autoprefixed, etc.
Currently though, only the Sass command runs when I use the keyboard shortcut. I found another post somewhere that said the pipe should work for multiple commands, but it doesn't seem to, or perhaps you can't --watch two things at the same time, I have no idea. I tried an array for command: but that either doesn't work or I didn't have the right format.
Or perhaps there's an entirely different and better way to go about all this, but if anyone can help with using these two commands together, that'd be much appreciated.
UPDATE: SOLUTION --------------------------------------------------------
With the kind help of #soulshined below, I got the multiple commands working (the dependsOn option was the trick), but evidently it won't run two commands with the --watch parameter in the same terminal. For my use case this wouldn't work and I eventually found this extremely helpful article that explains how to run multiple tasks in a split terminal by grouping them.
If anyone else runs across this with the same use case, here is the working tasks.json file:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Compile CSS",
"dependsOn": [
"Sass Compile",
"Prefix Output",
],
"group": {
"kind": "build",
"isDefault": true
},
},
{
"label": "Prefix Output",
"type": "shell",
"command": "postcss style-raw.css --output style.css --use autoprefixer --watch",
"presentation": {
"group": "cssCompile"
}
},
{
"label": "Sass Compile",
"type": "shell",
"command": "sass --watch sass:. --style compressed",
"problemMatcher": [
"$node-sass"
],
"presentation": {
"group": "cssCompile"
}
}
]
}
UPDATE 2: GULP --------------------------------------------------------
Randomly ran across my own post and thought I would add that I now use Gulp. I don't remember why but the VS Code tasks turned into a hassle later on, and Gulp turned out to be not that hard to learn.
Where I'm stuck is getting both commands to run at the same time via a Task
Running concurrently can be tricky to accomplish; consider taking advantage of the dependsOn property. Here is a brief example of running commands tasks consecutively:
"version": "2.0.0",
"tasks": [
{
"label": "Echo All",
"type": "shell",
"command": "echo Done",
"dependsOn": [
"Last"
],
"group": {
"kind": "build",
"isDefault": true
}
},
{
"label": "Last",
"type": "shell",
"command": "echo 'Did it last'",
"dependsOn": "First",
},
{
"label": "First",
"type": "shell",
"command": "echo 'Doing it first'",
}
]
That's a language [shell] agnostic solution. If you would like to run multiple commands you can try adding a semi colon after each statement:
"command": "sass --watch sass:. --style compressed; postcss style-raw.css --output style.css --use autoprefixer --watch"

VS Code build task: "cd" command not working

I am trying to create a build task to quickly deal with building the project. However, I am not able to cd into the project directory to execute the makefile containing the commands.
{
"version": "2.0.0",
"tasks": [
{
"label": "Build",
"type": "shell",
"command": "cd /path/to/folder; make build",
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
Error message:
The terminal process terminated with exit code: 1
Even just the cd command gives the same error. Running pwd instead shows that I am in root /.
Am I missing something. Couldn't find any help on web search.
Environment:
- Windows 10
- I have WSL installed
EDIT:
Tried setting
"options": {
"cwd": "${fileDirname}/.."
}
fileDirname was pointing to the .vscode folder inside my project folder, so thought .. from it would work. But pwd still show it is in root.

Can't run npm task in vscode task version 2.0.0

I have my package.json and task:start script
"scripts": {
"task:start": "rm -rf bin && npm run prepare_env && npm run build",
"prepare_env": "bash ../scripts/prepare-node-modules.sh",
"build": "tsc --watch"
},
I wanna have build command to prepare my whole environment in vscode tasks.
I am trying new 2.0.0 version of task for vscode, but npm task doesn't work.
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "task:start",
"group": {
"kind": "build",
"isDefault": true
}
}
]
The output is:
> Executing task: npm run task:start <
Usage: npm <command>
where <command> is one of:
access, adduser, bin, bugs, c, cache, completion, config,
ddp, dedupe, deprecate, dist-tag, docs, edit, explore, get,
help, help-search, i, init, install, install-test, it, link,
list, ln, login, logout, ls, outdated, owner, pack, ping,
prefix, prune, publish, rb, rebuild, repo, restart, root,
run, run-script, s, se, search, set, shrinkwrap, star,
stars, start, stop, t, tag, team, test, tst, un, uninstall,
unpublish, unstar, up, update, v, version, view, whoami
npm <cmd> -h quick help on <cmd>
npm -l display full usage info
npm help <term> search for help on <term>
npm help npm involved overview
Specify configs in the ini-formatted file:
C:\Users\Dariusz\.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config
npm#3.10.10 C:\Program Files\nodejs\node_modules\npm
Which doesn't make any sense. My previus configuration works well...
"version": "0.1.0",
"command": "npm",
"isShellCommand": true,
"showOutput": "always",
"suppressTaskName": true,
"tasks": [
{
"taskName": "install",
"args": [
"run",
"task:start"
],
"isBuildCommand": true
}
]
but I wanna use new one. My configuration:
vscode 1.15.1
windows 10