{"id":315,"date":"2023-12-26T22:30:20","date_gmt":"2023-12-26T22:30:20","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=315"},"modified":"2023-12-26T22:30:41","modified_gmt":"2023-12-26T22:30:41","slug":"vs-code-auto-run-commands","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/vs-code-auto-run-commands\/","title":{"rendered":"Make VS Code Automatically Run Your Project Startup Commands When You Open That Project’s Folder"},"content":{"rendered":"\n

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<\/code> 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.<\/p>\n\n\n\n

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<\/code> when a particular projects root folder is opened. To do this: create a file called tasks.json<\/code> in the root project folder’s .vscode<\/code> folder, then add this:<\/p>\n\n\n

{\n  \"version\"<\/span>: \"2.0.0\"<\/span>,\n  \"tasks\"<\/span>: [\n    {\n      \"type\"<\/span>: \"npm\"<\/span>,\n      \"script\"<\/span>: \"dev\"<\/span>,\n      \"runOptions\"<\/span>: {\n        \"runOn\"<\/span>: \"folderOpen\"<\/span>\n      }\n    }\n  ]\n}<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
It should look something like this within your project:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
(It’s the same folder that holds the settings.json<\/code> file you can use for per-project settings. I use that for stuff like what files\/folders to ignore in the sidebar and search.)<\/p>\n\n\n\n
Now next time you open that project folder, it’ll run that script:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
You may get a permissions popup to approve if it’s your first time.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
You can also manually approve or disapprove this functionality. From the Command Palette search for “Manage Automatic Tasks” and you’ll get this.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
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.<\/p>\n\n\n\n
This is all well-documented in the VS Code documentation.<\/a> Note that the full command “npm run dev” doesn’t appear in that tasks.json<\/code> 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<\/code> is an array, so you can set up and run multiple commands. <\/p>\n\n\n\n
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<\/a>, 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.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":323,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[52,43],"class_list":["post-315","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-command-line","tag-vs-code"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2023\/12\/tasks-thumb.jpg?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=315"}],"version-history":[{"count":4,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/315\/revisions"}],"predecessor-version":[{"id":324,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/315\/revisions\/324"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/323"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}