Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 593
PaulIsLoud Avatar asked Jun 26 '18 19:06

PaulIsLoud


People also ask

How do you start an app in VS Code?

To run or debug a simple app in VS Code, select Run and Debug on the Debug start view or press F5 and VS Code will try to run your currently active file. However, for most debugging scenarios, creating a launch configuration file is beneficial because it allows you to configure and save debugging setup details.

How do I start VS Code in a project folder?

Start VS Code. Select “File > Open Folder” (or “File > Open” in macOS) from VS Code's main menu. In the selection dialog, create a new folder, rename it accordingly, then click “Select Folder” (“Open” on macOS). Open VS Code's terminal (command prompt) by selecting “View,” then click on “Terminal.”

What is launch json in VS Code?

A launch. json file is used to configure the debugger in Visual Studio Code. Visual Studio Code generates a launch. json (under a . vscode folder in your project) with almost all of the required information.

How do I open start in VS Code?

Go to the 'Help' tab in the top menu and then select 'Welcome'. Look at the bottom of the page and click the checkbox below that says 'Show welcome page on startup'.


Video Answer


3 Answers

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.

like image 120
Coco Avatar answered Oct 20 '22 13:10

Coco


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.

like image 5
PaulIsLoud Avatar answered Oct 20 '22 15:10

PaulIsLoud


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.

like image 2
Matt Bierner Avatar answered Oct 20 '22 13:10

Matt Bierner