CODEWITHSUNDEEP
visual-studio-code
PaulIsLoud
PaulIsLoud

Reputation: 694

Start app when opening project in VS Code?

Is it possible to have VS code run several commands and start an app (or several) upon opening a project?

The ideal case for what I am doing would be:

  1. Open the project in vscode
  2. Runs a particular ngrok command
  3. Starts Mongo
  4. Starts an NPM script

The goal being to open the project in VS code and just get to work instead of running through several setup steps.

Upvotes: 18

Views: 11022

Answers (3)

Coco
Coco

Reputation: 906

Add this into your .vscode/tasks.json in a project folder to run a script or execute a command when you open the folder in VS code:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Launch app", // Name of task
      "type": "shell",
      "command": "npm start", // Enter your command here
      "group": "none",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "runOptions": {
        "runOn": "folderOpen"
      }
    }
  ]
}

Then you need to enable automatic tasks:

  1. Press CTRL + shift + P and type > Tasks: Manage Automatic Tasks in Folder
  2. Hit Enter then choose "Allow Automatic Tasks in Folder".

Your task will execute next time you open VS Code in that folder.

Upvotes: 20

PaulIsLoud
PaulIsLoud

Reputation: 694

Update August 12, 2019

@Andrew Wolfe had a great point in the comments, asking about workspace activation events. As I implement similar configurations in future projects, I will probably go in that direction.

Original answer:

Ended up using @HansPassant's solution: https://code.visualstudio.com/docs/editor/tasks#_custom-tasks

So something similar to this in my .vscode/tasks.json file:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Launch Ngrok",
      "type": "shell",
      "command": "ngrok http -subdomain=<SUBDOMAIN> <PORT>",
      "windows": {
        "command": "ngrok http -subdomain=<SUBDOMAIN> <PORT>"
      },
      "group": "none",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    {
      "label": "Launch App",
      "type": "shell",
      "command": "npm start",
      "windows": {
        "command": "npm start"
      },
      "group": "none",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    }
  ]
}

I also saved my project as a named Workspace, so that I can quickly identify which project I am looking at as I cycle through open projects.

Added a similar tasks.json file in .vscode for every project, and then just use the command palette to kick off each task every time I want to work on something.

Each app has different requirements for dependencies which need to be running simultaneously, some start via node locally, some I am starting on a remote server, some I need to have TypeScript always running, and then Rsync to the remote dev server (and bound the Rsync task to cmd+option+s for quick updates, more here).

This solution makes all of the above a breeze, and saves me from having to remember the magic incantation to get each project running every time.

Upvotes: 5

Matt Bierner
Matt Bierner

Reputation: 65453

Yes, extensions have access to node so they can run pretty much any scripts. You can also launch shell scripts within the VS Code terminal using the VS Code extension API.

Use activation events to start your extension when a user loads a workspace. The workspaceContains is probably the best fit.

Upvotes: 2

Related Questions