Table of contents :
Index:
- 1. Visual Studio Code, VSCode, introduction.
- 2. VSCode, install and screen explanation.
- 3. VSCode, Settings.
- 4. VSCode, Settings.json file.
- 5. VSCode, plugins.
- 6. VSCode, plugin: Live Server.
- 7. VSCode, Workspaces.
- 8. VSCode, Project and Project plugins.
- 9. VSCode, Live Sass Compiler.
- 10. VSCode, Live Sass Compiler and Bootstrap.
- 11. VSCode, Watching. To be written.
- 12. VSCode, Other plugins.
- 13. VSCode, Tips for Visual Studio Code.
- 14. VSCode, Usefull Links.
8. VSCode, Project and Project plugins.
The easiest way of working with projects, is first to create 1 or more Workspaces, as described in the previous chapter.
There are 2 Project plugins I will describe. I suggest you install both of them and do some experiments to see which one you like most. Those 2 plugins are:
8.1. VSCode, Project Dashboard by Kruemelkatze.
Projects can be organized into groups, that can be edited and reordered on the dashboard tab itself. (see the next chapter)
The dashboard itself can be configured in many ways:
- You can change the startup behaviour.
- You van change the visibility of the Project path
- Project title size can be changed
- You can define where projects are stored
- And many more options are available
Clicking on one of those windows, opens that project in your workspace.
8.2. VSCode, Working with Projects in Project Dashboard.
To create your first Project Dashboard Project, act as follows:
Make sure you have opened the directory my-webdesign, the one we have used in creating our test environment.
Click here to add one.
This opens a box in which you can enter the name of your first group.
Now you have to define what type of group it will be.
You get the next screen where you can choose the directory that will be your first project.
Next we click on Select Folder as Project
Which gives us:
We choose Random Color, so the plugin will take a random color. This gives us our first Project Dashboard Project!
My Webdesign.
When we want to add a new group we can click on the New Group button (with the little plus-sign in front of it)
Now hold your mouse above the little Project window:
While still holding your mouse, you also see 3 little icons appear in the top-right of the little project window. From left to right they are for:
changing the color topbar,
Editing the name of the project,
Removing the project. (Carefull with that)
In grey you see the windows original position.
Now you know how to add projects, I suggest you add a project for the other 3 directories of the environment example, so you get something like this:
8.3. VSCode, Project Manager by Alessandro Fragnani.
Some of the features of Project Manager are:
- You can save a folder or one or more of your workspaces as a Project
- You can add Tags to your Projects and organize them with those Tags
- You can open projects in the same or in a new window
- Reach your Projects through a Side Bar
- And more
8.4. VSCode, Working with Projects in Project Manager.
When you have no projects in the Project Manager yet, first make sure you select a workbench directory in the explorer. Here I have chosen for the subdirectory from the environment settings we previously made:
That will be the new projects name. Either press enter to accept it, or change its contents to the name you want, before pressing enter.
You now have a project like this:
Try holding your mouse above the project as in the following screenshot: (Do not click ! !)
The yellow area points to more actions for this project.
We now have our first Project Manager project.
But as you remember in our test environment we had this:
From the menu choose File / Open Folder...
After clicking the explorer shows the map and contents of course-material in the Explorer tab.
To assign the next project, first make sure to open the directory my-webdesign/mywebsite in the explorer window, by choosing File / Open Folder from the main menu. Resulting in:
Click on the Project Manager icon in the left sidebar to open the Project Manager Sidebar.
Result:
So we have to use another method to save our new project: As you can see in the screenshot above, there is a tiny save project icon behind Favorites (right arrow)
Click on that Project Manager Save Project icon to open that project name box again:
Repeat the process for the last 2 directories of our environment example, so you get:
8.5. VSCode, Combining the Project Managers.
You might think it would be handy to combine the 2 Project manager plugins. So far that is not possible. You CAN however use them side by side, but the information and properties are and stay separate.Around april 2020 however, an issue was filed by the creator of Project Dashboard to combine the 2 plugins, but sofar this has not been done. Read about that here:
Github: Interact with Project Dashboard Extension