[VSCode Guide] Basic Operations: File Management, Explorer & Tab Usage

Hello! If you're reading this article, you're probably just starting your web development journey and feeling that "using this editor is kind of difficult..." right? Believe me, I was in the exact same boat just a few months ago. I had zero programming knowledge. I started from a level of "What even is HTML?"

But with the help of AI, I went through a lot of trial and error, and in a month and a half, I was able to single-handedly launch two websites (buyonjapan.com, copicode.com). Through this experience, I came to realize that "the skill of mastering your tools is just as important as the skill of writing code."

In particular, the editor loved by many professionals, "VSCode (Visual Studio Code)," is so rich in features that it can seem a bit complex for beginners. In this article, based on my actual experience, I'll focus on the core of web development: "file operations." I'll break down how to handle VSCode's basic UI (User Interface), like the "Explorer" and efficient "Tab" management, along with useful "basic operations." I'll avoid jargon as much as possible and explain everything thoroughly, sharing the points where I actually got stuck.

By the time you finish this article, your vague anxiety about file management in VSCode should be gone, and you'll be able to tackle your projects with confidence. Now, let's take the first step towards a comfortable coding life together!

Why are "File Operations" in VSCode the Foundation of Everything?

When I was just starting to learn, I would save my HTML files to the desktop and open them by dragging and dropping them directly onto the VSCode icon. At first glance, this seems fine, right? However, when I wanted to edit the CSS, I had to find and open another CSS file, and when I wanted to add an image, I had to open yet another folder... my workflow became extremely cumbersome.

This "single-file editing" is the first trap that beginners often fall into. A website only takes shape when numerous files—HTML, CSS, JavaScript, images, etc.—work together in coordination. The true power of VSCode lies in its ability to manage the entire project as a single "unit," rather than dealing with these files separately.

The most crucial basic operation for this is "Open Folder." This is completely different from just opening a file. By opening the entire parent folder of your project in VSCode, the entire file structure of the project is displayed in the "Explorer" on the left sidebar, enabling centralized management.

This philosophy of "managing the entire project" is the cornerstone of VSCode's UI design. The layout—the entire project on the left (Explorer), individual files in the center (Editor), and various information at the bottom (Terminal or Problems panel)—is optimized for efficient development.

Conquer the Explorer: Your Project's Command Center

Once you've successfully "Opened a Folder," it's time to master the heart of VSCode, the "Explorer" view. It's the icon on the far left Activity Bar that looks like two overlapping documents. This is where the contents of your opened folder are displayed in a tree structure.

When you hover your mouse cursor to the right of the folder name (in the example, "MY-PROJECT"), several small icons will appear. These UI elements will become your powerful weapons.

• New File: Creates a new file (e.g., .html or .css).
• New Folder: Creates a new folder (e.g., images or scripts).
• Refresh Explorer: Updates the display to the latest state if files have been changed outside of VSCode.
• Collapse Folders in Explorer: Closes all open folders to clean up the tree view.

Creating Files and Folders: The First Step to Organization

As your project grows, organizing your files becomes essential. For example, it's common practice to group CSS files in a css folder and JavaScript files in a js folder.

Let's try creating a style.css file inside a css folder. First, create the css folder with the "New Folder" icon. Next, with the created css folder selected, click the "New File" icon, type style.css, and press the Enter key.

1. Click the "New Folder" icon → type `css` and press Enter
2. Select the created `css` folder
3. Click the "New File" icon → type `style.css` and press Enter

What to Watch Out For: The Close Relationship Between File Operations and "Paths"

Renaming files and folders (select the file and press F2), moving them (drag & drop), and deleting them (Delete key) can be done intuitively. However, there is a very important point to be aware of here: "broken paths."

For example, let's say you're loading logo.png from an images folder in your index.html. The HTML code would look like this:

<img src="images/logo.png" alt="Company Logo">

In this state, what would happen if you changed the name of the images folder to assets? The HTML code still has the old path, so the browser won't be able to find the image, and the display will be broken.

My Failure Story: While building a site, I once changed a folder name to better organize my images. VSCode was smart enough to suggest automatically updating the paths, but I missed a few, and I made the mistake of having several images on the site fail to display. From that experience, I developed the habit of always checking the relevant file paths after moving files or folders.

You need to manually correct it to the right path.

<!-- Corrected to the right path -->
<img src="assets/logo.png" alt="Company Logo">

He Who Masters Tabs, Masters Coding

When you open a file from the Explorer, it appears as a "tab" at the top of the editor. Understanding the behavior of these tabs is the key to smoothly navigating between multiple files.

The Beginner's Hurdle! Understanding "Preview Mode"

"Huh? I just clicked on the file, but the tab I had open before disappeared!" This is a phenomenon that 100% of VSCode beginners experience. I, of course, experienced it too. The culprit behind this phenomenon is "Preview Mode."

• Preview Mode: When you single-click a file in the Explorer, it opens in this mode. It's characterized by the file name in the tab being in italics. This is a mode for "just taking a quick peek inside." When you single-click another file, this tab will automatically close and the new file will be previewed in the same tab.
• Normal Mode: When you double-click a file, or double-click a tab that's in preview mode, it switches to this mode. The tab name becomes normal (not italicized), and the tab will stay open until you explicitly close it.

Since understanding this difference, I've been able to distinguish between "files I want to edit carefully, I'll double-click" and "files I just want to check quickly, I'll single-click," and I no longer get confused by an infinite number of tabs.

Boost Your Work Efficiency to 200% with Split Screen!

For a web creator, a feature that is almost fatal not to know is "Split Screen." You can display and edit the CSS that defines the style while writing the HTML at the same time.

It's easy to do. Just right-click on a tab and choose "Split Right" or "Split Down." Alternatively, you can also split by dragging and dropping a tab to the right, left, top, or bottom edge of the editor area. Complex layouts, such as up to a four-way split, are also possible.

Thanks to this feature, the wasted time of switching back and forth between files becomes zero. If you change a class name in the HTML, you can immediately correct the selector in the CSS on the adjacent screen. Once you experience this smooth workflow, you can't go back.

Taking It a Step Further: Accelerate Productivity with Workspaces

Once you get used to the basic operations, you should definitely try tackling the concept of a "Workspace." This is a feature that can be considered the first step towards becoming an intermediate user.

For example, let's say the site you're building is divided into separate folders for the user-facing "frontend" part and the server-side "backend" part. It's a hassle to open these separately every time, right? That's when a workspace comes in handy.

1. First, open the first folder (e.g., frontend-project) in VSCode.
2. Next, from the "File" menu, choose "Add Folder to Workspace..." and select the second folder (e.g., backend-project).
3. Once both project folders are displayed in the Explorer, click "Save Workspace As..." from the "File" menu.

This will create a file with a .code-workspace extension, like my-project.code-workspace. This is a "settings file" that records how to open your project. From the next time on, just by opening this one .code-workspace file, you can instantly reproduce the state with multiple folders set up.

By the way, the contents of this settings file look something like this.

{
    "folders": [
        {
            "path": "frontend-project"
        },
        {
            "path": "backend-project"
        }
    ],
    "settings": {}
}

As you can see, it just records which folders to open. It's not a black box, and understanding how it works will allow you to apply it more effectively.

Conclusion: Make the Tools Your Ally and Spread Your Creative Wings

This has been a long article, but if you firmly grasp the content explained here, you'll have a sufficient understanding of the basic operations for file management in VSCode. Finally, let's review the important points one more time.

• Opening a "Folder" instead of individual files is the beginning of everything.
• Master the Explorer's UI (icons) to organize your files.
• Be careful of "broken paths" with file operations (especially moving and renaming).
• Consciously use the "Preview Mode (single-click)" and "Normal Mode (double-click)" for tabs.
• Dramatically improve development efficiency by opening HTML and CSS simultaneously with "Split Screen."

Once you learn these operations, you'll be able to do them without thinking. As the saying goes, "practice makes perfect." Using this article as a reference, please try creating and deleting lots of files and folders on your own PC. Once your anxiety about the tools disappears, you'll be able to concentrate more on the coding itself, and both learning and creating will become much more enjoyable than they are now. I'm rooting for you!