JavaScript Project and File Management

Now that we have our development environment installed, we need to consider some best practices in terms of where we should store projects on our local machine, and how we should organize folders and files within each project. We'll also walk through a small exercise that will demonstrate how to load a project (including all associated files) into Visual Studio Code.

Project Folders and Files

It is advisable to set aside a directory on your local machine where you will place all the projects that you may be working on. For instance, you could create a directory called Projects on your local disk and then create specific project folders within it—one for each distinct project. This way, you can be sure of where all your projects are located. You can even create a shortcut to your Projects folder to get at it easily whenever you like:

Figure 2.6: Example of a Projects directory on macOS

Individual projects will exist in specific folders within your main Projects directory. Depending on how many projects you work on, you may have to create many subfolders. Each project should be clearly named for ease of identification.

Exercise 2.01: Creating a Working Project Directory

Let's look at how to create a directory so that we can contain our working project and all its associated files and subfolders:

1. In your filesystem, locate a place that is easily accessible and to which your account has full read/write rights, as you'll be writing files at this location. If you already have a preexisting Projects directory, this is likely to be an ideal location.
2. Within this folder, create a new folder and name it JavaScript, or another name of your choice, like so:
   

   Figure 2.7: Creating a new folder on macOS

3. With your new project folder created, navigate to its parent directory. You may be there already or may need to go up one level in the filesystem. This all depends on your operating system and how you've created the folder.
4. Using your mouse, stylus, or touchpad, drag the working project folder from the file explorer into the Visual Studio Code application window:
   

   Figure 2.8: Loading the project into Visual Studio Code

5. The current tab's content within Visual Studio Code will become obscured, indicating that you can release the folder onto it. Go ahead and do this.
6. This will effectively set the folder you dragged onto the Visual Studio Code interface as your working project folder. Look to the left-hand pane and navigate the files and folders in it:
   

Figure 2.9: The declared working project folder

The newly created folder is now the working project folder within Visual Studio Code. Normally, you'd see a list of files and folders in the leftmost sidebar. We haven't created any files or folders yet, so there is nothing there.

Note

You can also declare the working project folder by choosing File | Open from the application menu and browsing for the folder.

Visual Studio Code, like many other editors, will remember projects you've opened within it and present a list of them when you next open the application.

In this section, you learned about the importance of having an organized folder structure on your local machine for managing all your projects. We also saw how to create a new working folder for a project and then opened it within our code editor.

In the next section, we'll use the project we just created to start writing and examining JavaScript syntax and common structural elements.