Search

Make VS Code Automatically Run Your Project Startup Commands When You Open That Project’s Folder

Do you have a project where every time you open up that project’s root folder in VS Code, you need to run something like npm run dev to get started working? It’s likely that spins up the compiler and server and such needed to see and work on the site. Myself, I’ve got lots of projects like that.

I think it’s tremendously useful to automate this, and fortunately VS Code makes it easy. Say our whole goal is literally to run npm run dev when a particular projects root folder is opened. To do this: create a file called tasks.json in the root project folder’s .vscode folder, then add this:

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "dev",
      "runOptions": {
        "runOn": "folderOpen"
      }
    }
  ]
}Code language: JSON / JSON with Comments (json)

It should look something like this within your project:

(It’s the same folder that holds the settings.json file you can use for per-project settings. I use that for stuff like what files/folders to ignore in the sidebar and search.)

Now next time you open that project folder, it’ll run that script:

You may get a permissions popup to approve if it’s your first time.

You can also manually approve or disapprove this functionality. From the Command Palette search for “Manage Automatic Tasks” and you’ll get this.

You can also search for “task” in the Command Palette and the tasks that you’ve defined will appear as commands you can run on-demand.

This is all well-documented in the VS Code documentation. Note that the full command “npm run dev” doesn’t appear in that tasks.json file. That’s because npm is a special “auto detected” task type in VS Code, which is also true for Gulp, Grunt, and Jake. You aren’t limited to those though, you can any shell or process command. Also note that tasks is an array, so you can set up and run multiple commands.

Me, I just like keeping it simple and running a single command. But if this appeals to you, check out those docs as there is lots of configurable power here. My experience beyond this in local development that needs to run a lot of commands to get going is centered around tmux, so check that out if you find yourself in a situation where you are needing run, say, more than 4 commands to kick off a dev enviornment.

Need front-end development training?

Frontend Masters logo

Frontend Masters is the best place to grow in your career as a developer. We have courses on all the most important front-end technologies and beyond, from React to CSS, to backend with Node.js and Full Stack.

Leave a Reply

Your email address will not be published. Required fields are marked *