Working with Multiple Projects in VS Code

[Music] foreign [Music] this video is all about working in multiple projects if we have multiple projects and what I really mean by that is multiple folders or multiple GitHub repos so here I am in vs code I already have a folder in here for my site but let's say we wanted to expand this site a little bit more we have our front end which is under my site but let's say we have a new folder we'll call it my API now vs code has a cool feature built in called workspaces where I can go up here file and there is add folder to workspace we can open a workspace or we can save a workspace or really I can just take this my API drag it in here and it says do you want to copy my API or add my API as a folder to the workspace I'll add it to this workspace do you trust authors of the files in this folder yes I do and now we can see two folders one right here for HTML CSS website and one for my API and if I wanted to I could add my site as well I think I got the wrong folder there but let's go ahead and add it add folder to workspace there we go so now we have three different folders in this workspace and a workspace is really just vs code's way of saying multiple folders in a project so I can open up index.html here I can open up this index.html and notice how it has the folder or project name right next to the file name so I don't get confused at which one is which and I can close my open editors there now the cool thing about this is if you have two git repos let's say I went into here and this has already been changed you can see these git indicators right here and if I go into this other index.html file and say exclamation mark enter there and I'll save so I have saved this file but it doesn't look like there have been any changes in the git panel and I think that's because this my site doesn't have a git folder so it's not really get Source controlled to do this I could open up my terminal right click right here go to open an integrated terminal so that opens up this specific folder for my site and I can do ls-al and I don't see a git folder right here so I'll say git init and now that I've initialized a new git repo we can see there are four changes over here and you can see which ones are changed these are green because they're brand new files this is yellow because it's been changed so if I go over here now check this out we can see changes and we can see my site so we can see the separation between the two projects in the source control panel and you can start working with each one separately so if you have an API in the back end and a front-end folder and you have it all in one workspace that is very helpful to have by default vs code will keep this as an Untitled workspace or you could go up here a file and save workspace as so that you can keep opening the workspace right here under open workspace so that's helpful especially if you're using multiple projects if you don't want to jump into a mono repo setup you can use the workspace feature here I'll go ahead and remove everything let me remove this one remove folder from workspace and I'll remove my API remove folder from workspace so all we're left with is one folder and the git panel only shows that folder to close out this workspace all I have to do is close the vs code window and it says do you want to save your workspace configuration I'll click don't save let's go ahead and open vs code again and let's start talking about extensions for working with multiple projects the first extension I want to talk about is called project manager if I go over here let's install it project manager this is a great way to switch between different projects if you remember me opening up my Batcave folder you notice there's probably 10 different projects in there let's go over to vs code and I'll do command o to open a folder and I'll go into my Batcave folder I'll do productive vs code site and I'll click open now this vs code is this folder right here so it's all the things for the website but let's say I wanted to switch projects so the cool thing we can do with the project manager extensions I can do command shift p save project and now project manager will save this project and we can name it and we'll name it productive vs code site which is just the folder name I'll press enter now let's say we opened up a different project let's go back one to the Batcave folder let's say we wanted to open up the HTML CSS website I'll click open now we've opened up this folder in vs code I'll do command shift p save project and I'll save it as the folder name all right so now that we have two projects saved there are a couple different ways to activate project manager the first way is I can click the folder icon right here in the status bar I can click that and it'll open up the list of projects that I can switch to so if I click on productive vs code site it'll switch to that project that makes it really quick since I don't have to do command o and then find the folder in finder I can just do it right from this button right here and we can use the command shift p command palette to list projects and that's project manager list projects to open I'll click that and now we get the list of projects the other way we can open projects is the folder icon in our sidebar now we have favorites right here which are the two that we just created or there's this handy dandy git panel right here so if you have a bunch of folders that are git Source controlled which every single project in my Batcave folder is you can just say hey project manager go look in that folder and always look in that folder for any git repos that I can pull in so I'll go to open settings right here and it doesn't look like it actually went so let's go for base folders for project manager and let's see any base folders nope we want git base folder so let's add an item right here I'm going to paste in my folder structure which is going to be users Chris slash documents slash Batcave so any git repos in this folder please go ahead and open for us and look at that immediately it went ahead and said oh there are 11 projects that are git Source controlled in this folder so now instead of manually saving it as a favorite up here I can just go ahead and say oh here's the website let's click that and also there's this right here which still pulls up the git repos and our favorite ones we created manually so that's a great extension to have especially when you work with multiple git repos which I'm sure we all do the second extension that I want to talk about when working with multiple projects is called peacock and we already have it working here I have it on this site you can see the green around on the title bar the activity bar and the status bar and the way we do that is with an extension called Peacock let me go and search for peacock this is the one by John Papa I'll click install right here and we'll click enable to work with peacock you have to do command shift p search for peacock and you have to add the recommended favorites so once you click that it'll go ahead and add them to your settings and now if I'm in this project I can command shift p and say peacock change to a favorite color if I change to a favorite color I can go down the list and change this project to any of these colors let's go for react blue or maybe something different all right so now we have something different there's actually a button down here in the status bar where we can copy the hex value and the way that peacock works is it saves it into a DOT vs code folder under settings.json under color customizations so peacock is a tool that helps you create this object but vs code can read this object without needing the peacock extension itself with these two extensions we have the project manager extension where we can switch this out let's go over to the productive vs code site again and since this is a vs code site let's change out the color for purple so obviously peacock change to a favorite color let's go for I believe something different was pretty on the purple side that orange is fun let's just do orange so now when we switch projects or when we have multiple projects open for instance let me do command shift n I'll open up another vs code instance and I'll do option command p to switch projects so now when you have multiple projects open you can really see the difference when you have one being orange one being purple and if you were using Mac you could quickly switch between the two like this all right those are two great extensions to work with multiple projects definitely work with workspaces as well but vs code makes it really nice to work with multiple projects and be able to differentiate between the two foreign

Channel: DigitalOcean

Views: 51,572

Keywords: DigitalOcean, Digital Ocean, Cloud, Iaas, Developers

Id: MUlisk6Om20

Length: 10min 21sec (621 seconds)

Published: Fri Jul 15 2022