Related
I need to setup my development environment multiple times a day, I want to automate the process to a one-click solution.
The goal is to having a main script which opens up two VS Code instances, one for the frontend, one for the backend project.
The steps should be the following:
- open VS Code
- open Backend Project (located at e.g.: C:/myCompany/backend)
- run git pull
- open terminal
- run docker-compose up
- open split terminal
- run npm run start:dev
- open another vscode
- open terminal
- git pull
- open terminal
- run npm run start:dev
I am running windows, I can create very basic ps1 files, I know you can use terminal and run 'code' command to start an instance of VS Code. After that I don't find information what to do next.
I know there some kind of scripts you can run in Vs Code too, but I cannot put it all together.
There's a certain level of automation that can be achieved with VSCode's tooling itself.
Let's start with the backend part of the project. Inside C:/myCompany/backend create a folder .vscode and inside of it place two files: settings.json and tasks.json. They should be as follows:
// C:/myCompany/backend/.vscode/tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "git pull",
"type": "shell",
"command": "git pull",
"problemMatcher": [],
"runOptions": {
"runOn": "folderOpen"
}
},
{
"label": "docker-compose up",
"command": "docker-compose up",
"type": "shell",
"presentation": {
"reveal": "always",
"panel": "dedicated",
"group": "dev"
},
"group": "build",
"runOptions": {
"runOn": "folderOpen"
}
},
{
"label": "start:dev",
"type": "shell",
"command": "npm run start:dev",
"presentation": {
"panel": "dedicated",
"group": "dev"
},
"runOptions": {
"runOn": "folderOpen"
}
}
]
}
// C:/myCompany/backend/.vscode/settings.json
{
"task.allowAutomaticTasks": "on"
}
Similarly, under C:/myCompany/frontend create the same .vscode folder and the same two files under it; settings.json would stay the same, but tasks.json would be as follows:
// C:/myCompany/frontend/.vscode/tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "git pull",
"type": "shell",
"command": "git pull",
"problemMatcher": [],
"runOptions": {
"runOn": "folderOpen"
}
},
{
"label": "start:dev",
"type": "shell",
"command": "npm run start:dev",
"presentation": {
"panel": "dedicated",
"group": "dev"
},
"runOptions": {
"runOn": "folderOpen"
}
}
]
}
To finish things up, the powershell script would be as simple as this:
code C:\myCompany\backend
code C:\myCompany\frontend
In previous VSCode versions it was necessary to invoke workbench.action.tasks.manageAutomaticRunning and then to choose Allow Automatic Tasks in Folder once for each folder, but that doesn't seem to be the case any more (the setting in settings.json seems to suffice).
For further customisation (e.g. task execution order and dependency), you can look at the documentation: https://code.visualstudio.com/Docs/editor/tasks. You can also experiment with running git pull right from the powershell script instead of the VSCode tasks.
Same as this post but no answer.
How can we run a JavaScript Debug Terminal instead of a classic shell for tasks.json ?
I actually use it to run several npm goals at startup, but for some of them I need some debugging. I have to stop process, open terminal and then restart my app in this dedicated terminal.
One of my actual tasks.json task :
{
"label": "webpack",
"type": "shell",
"command": "npm run -s start-webpack -- -w",
"isBackground": false,
"problemMatcher": [],
"presentation": {
"group": "main"
}
}
I solved this problem using a different approach to debug NodeJS applications: Auto Attach instead of JavaScript Debug Terminal.
After creating a Task and setting "task.allowAutomaticTasks": "on", press Ctrl + Shift + P to open the command palette, search for Debug: Toggle Auto Attach, set it to Smart, restart vscode and it just works.
This is the created Task for reference:
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start:dev",
"problemMatcher": [],
"label": "npm: start:dev",
"detail": "nodemon",
"runOptions": {
"runOn": "folderOpen"
}
}
]
}
I'm on a Mac 💻. I'm trying to explore a way to create 4 Terminals as soon as I dbl-clicked on my workspace file.
I've tried to get one working, but I seem stuck
{
"folders": [
{
"path": "/Users/bheng/Sites/laravel/project"
}
],
"settings": {
"workbench.action.terminal.focus": true,
"terminal.integrated.shell.osx": "ls",
"terminal.integrated.shellArgs.osx": [
"ls -lrt"
]
},
"extensions": {}
}
My goal is to open 4 Terminals
Terminal1 : run 'npm run watch'
Terminal2 : run 'ls -lrt'
Terminal3 : run 'ssh_staging'
Terminal4 : run 'mysql'
I've been following this doc : https://code.visualstudio.com/docs/editor/integrated-terminal#_terminal-keybindings
Any hints for me ?
I've been playing around with this which seems to work. Combining the ability to run a task on folder open and to make that task depend on other tasks I came up with the following. It looks cumbersome but it is actually pretty simple and repetitive.
First, you will need a macro extension like multi-command. Put this into your settings:
"multiCommand.commands": [
{
"command": "multiCommand.runInFirstTerminal",
"sequence": [
"workbench.action.terminal.new",
{
"command": "workbench.action.terminal.renameWithArg",
"args": {
"name": "npm watch"
}
},
{
"command": "workbench.action.terminal.sendSequence",
"args": {
"text": "npm run watch\u000D" // \u000D is a return so it runs
}
}
]
},
{
"command": "multiCommand.runInSecondTerminal",
"sequence": [
"workbench.action.terminal.new",
{
"command": "workbench.action.terminal.renameWithArg",
"args": {
"name": "ls -lrt"
}
},
{
"command": "workbench.action.terminal.sendSequence",
"args": {
"text": "ls -lrt\u000D"
}
}
]
},
{
"command": "multiCommand.runInThirdTerminal",
"sequence": [
"workbench.action.terminal.new",
{
"command": "workbench.action.terminal.renameWithArg",
"args": {
"name": "ssh_staging"
}
},
{
"command": "workbench.action.terminal.sendSequence",
"args": {
"text": "ssh_staging\u000D" // however you run the ssh_staging command
}
}
]
},
{
"command": "multiCommand.runInFourthTerminal",
"sequence": [
"workbench.action.terminal.new",
{
"command": "workbench.action.terminal.renameWithArg",
"args": {
"name": "mysql"
}
},
{
"command": "workbench.action.terminal.sendSequence",
"args": {
"text": "mysql\u000D" // however you run the mysql command
}
},
// "workbench.action.focusActiveEditorGroup"
]
}
]
There is one command for each terminal. But within each of those you can do as much as you can get into a macro - which is a lot, especially thanks to the sendSequence command. You can change directories and send another sendSequence command to the same terminal instance, run all the non-terminal commands too, change focus to an editor at the end of the last terminal set-up, etc.
I added the nicety of naming each terminal based on your command using the command workbench.action.terminal.renameWithArg.
In tasks.json:
"tasks": [
{
"label": "Run 4 terminals on startup",
"runOptions": {"runOn": "folderOpen"},
"dependsOrder": "sequence", // or parallel
"dependsOn": [
"terminal1",
"terminal2",
"terminal3",
"terminal4"
]
},
{
"label": "terminal1",
"command": "${command:multiCommand.runInFirstTerminal}"
},
{
"label": "terminal2",
"command": "${command:multiCommand.runInSecondTerminal}",
},
{
"label": "terminal3",
"command": "${command:multiCommand.runInThirdTerminal}"
},
{
"label": "terminal4",
"command": "${command:multiCommand.runInFourthTerminal}"
}
]
Now whenever you open (or reload) the workspace folder this tasks.json is in the four terminals should be opened, named and run. In my experience, there is about a short delay before vscode runs any folderOpen task.
If you prefer to manually trigger the Run 4 terminals task, you can set up a keybinding like so:
{
"key": "alt+r", // whatever keybinding you want
"command": "workbench.action.tasks.runTask",
"args": "Run 4 terminals on startup"
},
Here is a demo running with the keybinding, easier to demonstrate than reloading vscode, but there is no difference. I added an interval delay to each terminal running just for demonstration purposes - otherwise it is extremely fast.
I noticed that vscode freezes if I don't interact with one of the terminals or open another before deleting them all.
There is also a Terminal Manager extension which may be of interest. I haven't tried it.
An extension for setting-up multiple terminals at once, or just
running some commands.
But it isn't obvious to me whether this extension can be configured to run on folderOpen - but it appears to contribute a run all the terminals command so you should be able to use that in a task.
I like the accepted answer. However, I prefer not to use the multi-command extension as shown in the accepted answer, I think my approach is simpler.
Please note in my case:
my project only needs three tasks and all three tasks should run in parallel (craft-server, craft-app, and craft-site) -- but this approach should work for more than three tasks
I prefer to see the output of three tasks in three separate terminals (vs combined in one terminal)
my tasks never "finish" (all three tasks "watch" for file changes, so I need the terminals to remain open)
See my tasks.json file below. You'll need to modify the "label" and "command" properties to suit your project. See my notes about the important parts, below.
{
"version": "2.0.0",
"tasks": [
/// ...other tasks...
{
"label": "runDevelopment",
"runOptions": {
"runOn": "folderOpen"
},
"dependsOrder": "parallel",
"dependsOn": [
"craft-server",
"craft-site",
"craft-app"
]
},
{
"label": "craft-server",
"type": "shell",
"command": "npx nodemon --watch . --ignore craft-angular/projects/craft-app/ --ignore craft-angular/projects/craft-site/ --ignore dist/ --ignore bin/ --ignore log/ --ignore cypress/ --ignore cypress.json ./bin/www",
"presentation": {
"panel": "dedicated"
}
},
{
"label": "craft-site",
"type": "shell",
"command": "cd ./craft-angular && node --max_old_space_size=8000 ./node_modules/#angular/cli/bin/ng build craft-site --verbose=false --progress=true --watch --output-path=\"./dist/development/craft-site\"",
"presentation": {
"panel": "dedicated"
}
},
{
"label": "craft-app",
"type": "shell",
"command": "cd ./craft-angular && node --max_old_space_size=8000 ./node_modules/#angular/cli/bin/ng build craft-app --verbose=false --progress=true --watch --output-path=\"./dist/development/craft-app\"",
"presentation": {
"panel": "dedicated"
}
}
]
}
Please note:
I only use the VS Code tasks.json / custom tasks feature (I don't use a VS Code extension)
I use the "dependsOn" approach as shown in the accepted answer, so that one task can invoke multiple other tasks in parallel (note "dependsOrder": "parallel")
I use the "runOptions": {"runOn": "folderOpen"} approach as shown in the accepted answer, so that VSCode will automatically run my "combined" task when I open my workspace/project
"runOn": "folderOpen" is convenient for me (I always want to run
my main task when I open the folder containing my project),
but it is optional; you could also use keybindings as shown in the accepted answer or here
and if you use "runOn": "folderOpen" you need give VS Code a one-time permission to do that, as described here
I don't use the "problemMatcher" property (i.e. a VS Code feature to scan output of each terminal); therefore when I run the task, I choose "Continue without scanning the task output"
I use the "presentation" property with {"panel":"dedicated"} so each of my tasks gets a separate terminal (aka separate panel)
The runDevelopment task should run automatically when I open the workspace/project/folder (i.e. the location containing the .vscode folder, and the .vscode/tasks.json file, using File > Open Folder... (Ctrl+K Ctrl+O), or File > Open Recent...)
While I want this task to run automatically , below shows how run the task manually (if needed -- like if the automatic task fails, or I kill the automatic task);
You could use Ctrl+Shift+B to run the build task, as commented by #Ruben, and described in the VSCode Keyboard Bindings here.
Or you could use a more step-by-step approach:
I use Ctrl+Shift+P (or F1) to open the "command window"/ "Show All Commands"
then type "Run Tasks"; (hit Enter)
then choose the single "combined" task (for me, it's named runDevelopment; hit Enter)
finally choose "Continue without scanning the task output" and hit Enter (because none of my tasks have a "problemMatcher", I can interpret the task output for myself):
This is how the task looks after it is run; note there are 3 separate terminals for 3 separate subtasks:
I like the second answer that only uses vscode task, but it does not work for my requirement because I cannot input other instructions in the open terminals, otherwise, it will close. I prefer to use the Restore Terminals in vscode.
After the extension installed, you can just create a restore-terminals.json file in .vscode folder:
{
"artificialDelayMilliseconds": 300,
"keepExistingTerminalsOpen": false,
"runOnStartup": true,
"terminals": [
{
"splitTerminals": [
{
"name": "server",
"commands": ["npm i", "npm run dev"]
},
{
"name": "client",
"commands": ["npm run dev:client"]
},
{
"name": "test",
"commands": ["jest --watch"]
}
]
},
{
"splitTerminals": [
{
"name": "build & e2e",
"commands": ["npm run eslint", "npm run build", "npm run e2e"],
"shouldRunCommands": false
},
{
"name": "worker",
"commands": ["npm-run-all --parallel redis tsc-watch-start worker"]
}
]
}
]
}
Hello I am following this tutorial
https://code.visualstudio.com/docs/typescript/typescript-tutorial
to debug typescript but I have encountered error as shown in the screenshot.
If I choose debug anyway, the debugger works but I cant set any breakpoint. I suspect it has something to do with failing to set up the task file.
Any advise guys?
I had a similar problem. In my case, the tsconfig.json file was not in the main folder, but in a subfolder. In my case, the working configuration looked like this
{
"type": "node",
"request": "launch",
"name": "Launch server",
"program": "${workspaceFolder}/server/index.ts",
"preLaunchTask": "tsc: build - server/tsconfig.json",
"outFiles": ["${workspaceFolder}/out/**/*.js"]
}
Task tsc: build - tsconfig.json by default comes from VSCode when it detects the existence of tsconfig.json. Based on your screenshot, I can tell that you already have the file. So, it is odd if it can't be detected.
Please make sure the file content of tsconfig.json is valid.
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"outDir": "out",
"sourceMap": true
}
}
Also to check whether the tasks are exist, you can choose menu Terminal -> Run Build Task or press Shift + Command + B on MacOS. If correct, you can see two tasks available there as the image below.
Otherwise, there must be something wrong with the steps. Perhaps, there is an extra space in preLaunchTask. For reference, I also copy paste my launch.json here.
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/helloworld.ts",
"preLaunchTask": "tsc: build - tsconfig.json",
"outFiles": [
"${workspaceFolder}/out/**/*.js"
]
}
]
}
For other language users, the tsc: build command maybe be another command, such as tsc: 构建 in Chinese.
my launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/index.ts",
"preLaunchTask": "tsc: 构建 - tsconfig.json",
"outFiles": [
"${workspaceFolder}/out/**/*.js"
]
}
]
}
When you Ctrl+Shift+B terminal will run Run Build Task.. You'll see in the terminal
">Executing task: tsc -p c:....
Terminal will be reused by tasks, press any key to close it."
Then after that double click a ts file and press F5 you will have to select at which environment do you want your ts file to run and then you will see the output in the debug console.
because it does not find path of tsconfig file....
see your folder structure whether the structure contains multiple same folder with same name...so y debugger confused to find path....so make sure the devlopement folder which you work on has proper path with unique name no same name with its parent folder and contains tsconfig files...
This happens also if the Extension Host crashed. This prevents the task engine from finding the requested task. Usually, you should see a message in the toaster where you can immediately restart the Extension Host. After that the debugger and tasks work.
For Ubuntu Linux 20.04 LTS (but may well be the same on other OS's) what got preLaunchTask working for me, was using both a local tasks.json and launch.json
So my folder structure (pre-build) is:
.vscode/launch.json
.vscode/tasks.json
dist
src/index.ts
package.json
tsconfig.json
My launch.json contains:
{
"configurations": [
{
"type": "node",
"request": "launch",
"name": "TS preLaunchTask-build",
"program": "${file}",
"preLaunchTask": "tsc: build",
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"skipFiles": [
"<node_internals>/**", "node_modules",
]
},
]
}
My tasks.json contains:
{
"version": "2.0.0",
"tasks": [
{
"type": "shell",
"command": "echo hello yes working!",
"problemMatcher": [],
"label": "myTask"
},
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": ["$tsc"],
"group": "build",
"label": "tsc: build"
},
]
}
And my tsconfig.json contains:
{
"compilerOptions": {
"outDir": "./dist",
"sourceMap": true,
"target": "es5",
"module": "commonjs"
},
"include": [
"src/**/*"
]
}
Usage: whilst within the index.ts just hit F5 with a breakpoint set
I have also included another task, "myTask" you can change the preLaunchTask line in your launch.json to: "preLaunchTask": "myTask", (where it will output some text to console to verify preLaunchTask is now working)
That way, if you still have issues, you can see if the issue is in your tsconfig setup, or if it's a preTaskLaunch setup issue.
(I would have thought it should have resolved this itself, but apparently not at the current time of writing anyway - but does force the advantage (for me) of committing debug config to the repo on project basis rather than global config)
Be sure to check the exact structure/spelling of Task by pressing Ctrl+Shift+B (on Windows) and Cmd+Shift+B(on Mac).
In my case, it was tsc: build - projectName/tsconfig.json
I want to execute 2 commands on 1 hotkey "F4"
workbench.action.toggleSidebarVisibility
workbench.action.toggleActivityBarVisibility
I am trying to use this code, but it doesn't work.
{
"key": "F4",
"command": "workbench.action.toggleSidebarVisibility && workbench.action.toggleActivityBarVisibility"
}
Not possible, at least not as of today with a vanilla installation.
But you can try this extension here, it creates macros from multiple commands, which can then be bound to a shortcut: https://marketplace.visualstudio.com/items?itemName=geddski.macros
Another way to achieve this without an extension:
Run "Tasks: Open User Tasks" command to create or open a user level tasks file.
Define commands as separate tasks, like so:
{
"version": "2.0.0",
"tasks": [
{
"label": "my-f4-1",
"command": "${command:workbench.action.toggleSidebarVisibility}"
},
{
"label": "my-f4-2",
"command": "${command:workbench.action.toggleActivityBarVisibility}"
},
{
"label": "my-f4",
"dependsOrder": "sequence",
"dependsOn": [
"my-f4-1",
"my-f4-2"
],
"problemMatcher": []
}
]
}
In your keybindings.json:
{
"key": "f4",
"command": "my-f4"
}