Hi all,
I’m v new to VS code (and using it as my first code editor so about as lost as a camel in the middle of the Atlantic Ocean). When it says ‘add workspace folder’ on the welcome board, what does that mean? If I go ahead and add a workspace folder it gives me this mystery file called ‘[file-name].code-workspace’ - which is very generous and all but what am I supposed to do with it?
Bonus Q: I’m confused about how to open up a VS-based project (let’s say a simple webpage) in a browser which will show me all the files involved in contributing to the project (e.g. HTML, CSS and JavaScript) rather than e.g. just the HTML in isolation? I end up with as many separate files for each part of the project as I have programming languages I’m using, but how do I combine them and open as one webpage (as it does automatically in codepen?) - or is this what the ‘workspace’ is for?
IDC about looking stupid (well I care a bit) but I have no idea what is going on and thank you in advance to anyone who can answer either of these questions! + if anyone knows of some VS code walkthrough for incompetents feel free to let me know 
1 Like
@Parandrus, To open the project on VS Code, the best way is to go File>Open Folder, and select the folder you have the files. It will open your whole folder with all sub folder and files.
Hope it helps you little bit.
Happy Coding!
2 Likes
With VSCode, you open the program window, that’s basically your workspace. So adding the first folder to the workspace means opening a folder in VSCode. And down the left hand side there will be a file navigator panel.
You can add more folders to the workspace, either use the relevant command to add another folder, or by just right clicking on the empty space at the bottom of the navigator and selecting “add folder to workspace”. So this allows you to work on multiple projects at once in the same window, and you can navigate between them using the file navigator, or search in all the open folders, or find and replace across projects etc.
What it also.means is that you can apply VSCode settings to that workspace. This is what the .code-workspace file is for. So, as an example, say you were working on a project that required tabs instead of spaces in the code. You could open that project, apply the setting that automatically always used tabs, then save the workspace. Everything else you opened would still use spaces. But if you reopened that workspace file, it would set up the VSCode window you opened it in with that project folder and that tabs setting.
1 Like
There are a bunch of tutorials on VS Code on YouTube, like basic use, extensions and so on.
As said, the .code-workspace file is related to multi-root workspaces, not likely something you want at this point. For a simple HTML, CSS, JS page you will use a single folder project.
Here is the part from a tutorial video showing ways of opening a project, I’d say watch all of the video to learn more. Note that some things may have changed since this video was made (like the icons) but it should cover the basics.
Side note, I would also suggest installing the Live Server extension to serve pages.
2 Likes