Set a dev container to open a terminal - vscode-devcontainer

Is it possible in the dev container specification to specify one or more terminals to be opened as part of the dev container?
My use case is that I'd like to open two terminals for the user:
Build and host the app.
Build and run the app API.
The idea is simply to save the user's time of having to open up the terminals themselves and run the relevant commands.

Same terminal
If you don't need the logs in separate terminals, you can use the postStartCommand lifecycle script.
Add your commands to the devcontainer.json file, with the commands separated by &&; use nohup as in this example to leave the processes running:
"postStartCommand": "echo hello && echo world"
Separate terminals
If you want separate terminals, you can create a custom task; the page also contains info on how to further customize your tasks.
// .vscode/tasks.json
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Build Host",
"type": "shell",
"command": "echo hello",
"group": "build",
"presentation": {
"group": "buildGroup",
"reveal": "always",
"panel": "new",
"echo": false,
}
},
{
"label": "Build API",
"type": "shell",
"command": "echo world",
"group": "build",
"presentation": {
"group": "buildGroup",
"reveal": "always",
"panel": "new",
"echo": false,
}
},
{
"label": "Build All",
"dependsOn": [
"Build Host",
"Build API"
],
"group": "build",
"runOptions": {
"runOn": "folderOpen" // This starts both tasks when the container is started
},
}
]
}
With Run and Debug
Finally, depending on what project your are working on, you can use the launch.json file to set a custom run command. Here you can find the documentation.

Related

Start VScode with named terminals and command ready to start

Everytime I open my vsCode project with multiple projects inside, I need to open multiple terminals and use the command "yarn <project_name>:start". I also rename them with the project name because they all have the name name by default (powershell in my case, then node when the command is launched).
I have 2 questions:
Is there a way to open a predefined list of terminals with a predefined name for each project.
Is there a way to input the command in each terminal with or without lauching the command.
Thank you for your help!
Using vscode tasks, I was able to add 2 tasks and call them together in another tasks that activates automatically on everytime I open the workspace.
{
"label": "Start Dev",
"runOptions": {
"runOn": "folderOpen"
},
"dependsOn": ["Common", "Hub"]
},
{
"label": "Common",
"type": "shell",
"command": "yarn dev:common",
"windows": {
"command": "yarn dev:common"
},
"group": "none",
"presentation": {
"reveal": "always",
"panel": "new"
}
},
{
"label": "Hub",
"type": "shell",
"command": "yarn dev:hub",
"windows": {
"command": "yarn dev:hub"
},
"group": "none",
"presentation": {
"reveal": "always",
"panel": "new"
}
}

VSCode using relative paths in build task on remote set up

I'm trying to add a build task to build the current file, just a simple "make path/to/file.o". I'm using vscode on windows 10 over a remote SSH connection to linux.
However, if I use ${relativeFileDirname} it converts the path separators to windows format. Eg...
${fileDirname}=/home/me/git/project/data/source
${relativeFileDirname}=data\source
I've read about explorer.copyRelativePathSeparator. Can that be applied to the build task in tasks.json? Or is there another way?
This is the build task...
{
"type": "cppbuild",
"label": "C/C++: gcc build active file",
"command": "/usr/bin/make",
"args": [
"${relativeFileDirname}/${fileBasenameNoExtension}.o"
],
"options": {
"cwd": "/home/me/git/project"
},
"problemMatcher": [
"$gcc"
],
"group": {
"kind": "build",
"isDefault": true
},
"detail": "compiler: /usr/bin/gcc",
"presentation": {
"clear": true
}
}
Thanks.
There is an extension for Visual Studio Code for this purpose that, after many failed attempts to use string substitution with bash built-ins and sed, was the only working solution for me:
"customOptions": "--workdir /home/user/${command:extension.commandvariable.file.relativeFileDirnamePosix}",

Debugging multiple Node js Function apps in VS Code

I am currently developing a couple of node js function apps in the same project that I would like to be able to debug together. After some effort I was able to run them without a debugger with compounds. And it kinda works since all functions are running although im only able to see output from one at a time.
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Func1",
"type": "node",
"request": "launch",
"port": 9000,
"preLaunchTask": "npm: start - func1"
},
{
"name": "Func2",
"type": "node",
"request": "launch",
"port": 9001,
"preLaunchTask": "npm: start - func2"
}
],
"compounds": [
{
"name": "Compound",
"configurations": [
"Func1",
"Func2"
]
}
]
}
tasks.json
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"path": "func1/",
"problemMatcher": [],
"label": "npm: start - func1",
"detail": "func start"
},
{
"type": "npm",
"script": "start",
"path": "func2/",
"problemMatcher": [],
"label": "npm: start - func2",
"detail": "func start"
}
]
}
I have also tried different configurations in tasks.json and launch.json using func start with moderate success and I have been able to attach a single function app to debugger while starting the rest.
"type": "func",
"label": "func: start - func1"
"command": "host start",
"problemMatcher": "$func-node-watch",
"isBackground": true,
"dependsOn": "npm: install - func1",
"options": {
"cwd": "${workspaceFolder}/func1"
}
But when I attempt to add a second one with another label it is only able to recognize one of them and the launch of the other app receives error "Could not find the task 'func: start - func2'".
My questions are if it is possible to have multiple Function App attached to debugger and in that case how? Would it also be possible to get the logs in the same output terminal or multiple terminals for each Function App. I know that both can be achived in Visual Studio with c# but is it possible in VS Code with Node.
I am currently developing a couple of node js function apps in the
same project
1, If your function app here refers to Trigger, then the default settings of VS Code should be able to be achieved (unprocessed functions will be in a waiting state, but every place marked with a breakpoint will be executed, but you cannot be in different at the same time Breakpoints).
2, If your function app here refers to a standalone app, then the key is the port. Below settings can change the default port of function app on local:
{
"IsEncrypted": false,
"Values": {
"AzureWebJobsStorage": "",
"FUNCTIONS_WORKER_RUNTIME": "python"
},
"Host": {
"LocalHttpPort": 5861,
"CORS": "*",
"CORSCredentials": false
}
}
After the above settings, you can start two VS Code programs Debug different function app at the same time without causing conflicts.

Typescript build task in VSCode on Windows 10 with Windows Subsystem for Linux

My VSCode settings (workspace settings in my case) are setup to use bash as the default terminal:
{
"terminal.integrated.shell.windows": "C:\\WINDOWS\\Sysnative\\bash.exe"
}
I need this to be able to debug my app.
My tasks.json looks like that:
{
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "./tsconfig.json",
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
So when I try to build my project / run the build task (i.e. Ctrl + B), I get the following error:
> Executing task: tsc -p "c:\PATH_TO_MY_PROJECT\tsconfig.json" <
error TS5058: The specified path does not exist: 'c:\PATH_TO_MY_PROJECT\tsconfig.json'.
The terminal process terminated with exit code: 1
If I disable bash in my settings an use the default Windows terminal, the build works fine.
I remember it working few VSCode updates ago, but it stopped working in the latest VSCode versions. Not sure how that's related.
I tried to fix this for a while, but finally gave up on the built-in Typescript task and instead just used a custom task:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Typescript watch",
"type": "shell",
"command": "tsc --watch",
"group": {
"kind": "build",
"isDefault": true
},
"presentation": {
"reveal": "always",
"panel": "new"
},
"problemMatcher": [
"$tsc"
]
}
]
}

Using "preLaunchTasks" and Naming a Task in Visual Studio Code

According to the documentation, it is possible to launch a program before debugging:
To launch a task before the start of each debug session, set the preLaunchTask to the name of one of the tasks specified in tasks.json.
I've not seen example syntax of a "named" task, but the schema documentation reveals a property called taskName. I tried using that to link my launch.json preLaunchTasks to the task, but it didn't work. When I launched my program, Visual Studio Code reported this error:
Could not find a unique task 'launch-core'. Make sure the task exists and that it has a unique name.
My custom "named" task looked something like this:
{
"taskName": "launch-core",
"version": "0.1.0",
"command": "C:\\utils\\mystuff.exe",
// The command is a shell script
"isShellCommand": true,
// Show the output window only if unrecognized errors occur.
"showOutput": "silent",
}
I then tried changing the property name from taskName to just name, based on this link. That also didn't work.
Intellisense gives no suggestions of how to name a task.
Does anybody know how to uniquely name a task in the tasks.json file? What is the syntax? What is the property name?
Ultimately I'd like to execute two or three node.js processes before my own node.js app is launched. For example, I'd like to have the following three apps launched before my app is launched into the debugger:
sh -c 'cd ./manager/ && node manager.js'
sh -c 'cd ./adapter/ && node adapter.js'
sh -c 'cd ./core/ && node core.js'
If I'm working on a Windows box, my task might look something like this:
{
"taskName": "core-launch",
"version": "0.1.0",
// The command is tsc. Assumes that tsc has been installed using npm install -g typescript
"command": "start",
// The command is a shell script
"isShellCommand": true,
// Show the output window only if unrecognized errors occur.
"showOutput": "silent",
// args is the HelloWorld program to compile.
"args": [
"ACD-Manager",
"/B",
"/D",
"./manager/",
"node",
"manager.js"
]
}
The above task using using the cmd start capability. I'm not sure yet how to make several node tasks launch instead of one, but I can't even get one task to launch because of this task-naming issue.
How do I name a task in the tasks.json file?
FWIW, I'm using VS Code 1.20.1 and here's how I got my preLaunchTask to work:
In launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
...
"preLaunchTask": "npm: build",
}
]
}
In my package.json:
{
...
"scripts": {
"build": "tsc"
...
}
}
So, if it's still relevant, or if someone finds this thread with the same problem, I've just figured it out how it works:
In the tasks.json, you need to create a 'tasks' array - code hint will help you with that - which holds an array of objects. Inside an object, you can have the 'taskName' key-value pair.
Example:
{
"version": "0.1.0",
"command": "npm",
"isShellCommand": true,
"args": ["run-script", "webpack"],
"showOutput": "always",
"tasks": [
{
"taskName": "runwebpack",
"suppressTaskName": true
}
]
}
In my case, I had to run the npm run-script webpack command before running my project.
In the launch.json file, the "preLaunchTask": "runwebpack" will work now.
Note: the suppressTaskName is true in my example. Omitting it, or setting it to false will result in VS Code appending the taskName after the command.
A more general approach would be something like this:
{
"version": "0.1.0",
"command": "npm",
"isShellCommand": true,
"args": ["run-script"],
"showOutput": "always",
"tasks": [
{ "taskName": "webpack" }
]
}
With the latter example, you can extend the tasks array with other scripts to be run also.
Hint for my usage: npm run-script fetches what to do from the package.json file's scripts object.
Edit: this works with VS Code 1.3.1
For version 2.0.0 configuration you now use label instead of taskName.
package.json:
...
"scripts": {
"tsc": "tsc",
...
}
...
launch.json (My source is in the src directory and tsc compiles to the dist directory):
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"preLaunchTask": "Compile",
"name": "Launch Program",
"program": "${workspaceFolder}/src/index.ts",
"outFiles": [
"${workspaceFolder}/dist/**/*.js"
],
"protocol": "inspector",
"sourceMaps": true
}
]
}
tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"label": "Compile",
"type": "npm",
"script": "tsc",
"problemMatcher": []
}
]
}
For vscode 1.36.1 (1.36.1):
tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"label": "build:tsc",
"type": "npm",
"script": "build:tsc"
},
{
"label": "clean",
"type": "npm",
"script": "clean"
},
{
"label": "build",
"dependsOrder": "sequence",
"dependsOn": ["clean", "build:tsc"]
}
]
}
launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/dist/main.js",
"preLaunchTask": "build",
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"console": "integratedTerminal"
}
]
}
Before running node ${workspaceFolder}/dist/main.js, the preLaunchTask will run build task firstly which includes two subtasks: clean and build. It will run clean task firstly, then run build task.
You can specify the label of a task to preLaunchTask option.
The question title is:
"Using “preLaunchTasks” and Naming a Task in Visual Studio Code
I needed to define preLaunchTask***s***.
You can config multiple tasks using the dependsOn property described here
For example, a compound task in your tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"label": "Client Build",
"command": "gulp",
"args": ["build"],
"options": {
"cwd": "${workspaceRoot}/client"
}
},
{
"label": "Server Build",
"command": "gulp",
"args": ["build"],
"options": {
"cwd": "${workspaceRoot}/server"
}
},
{
"label": "Build",
"dependsOn": ["Client Build", "Server Build"]
}
]
}
You can find more information about naming tasks here.
I've only really seen the taskName used in relation to Gulp; I'm sure there are others but nothing that I have much insight into. Perhaps this can get you off to a start with what you already have?
Run a pre-launch task in VSCODE

Resources