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"]
}
]
}
]
}
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"
}
I'm asking because I don't know if it is possible.
But, I'm using VSCode to run a few makefiles.
My tasks.json:
{
"version": "0.1.0",
"command": "sh",
"args": ["-c"],
"isShellCommand": true,
"showOutput": "always",
"suppressTaskName": true,
"tasks": [
{
"taskName": "CTRL + SHIFT _ B",
"isBuildCommand": true,
"args": ["$make run-db"]
},
{
"taskName": "run",
"args": ["make -C ${fileDirname} run;"]
},
{
"taskName": "install",
"args": ["make -C ${fileDirname} install;"]
},
{
"taskName": "test",
"args": ["make -C ${fileDirname} test;"]
}
]
}
I'd like to know If it is possible to create just one run make line, instead of creating one method for each task in my makefile, I just pass the extra argumment in the vscode command pallet(EX: ctrl+p task make install)
{
"taskName": "make",
"args": ["make -C ${fileDirname} $Method;"]
},
you can probably use environment variable
"env": {
"NODE_ENV": "development"
},
as in this exemple