An AI coding assistant can generate code, explain errors, and modify project files, but you still need a reliable place to see what it is doing. Visual Studio Code provides that workspace.
Visual Studio Code, commonly called VS Code, is a code editor that lets you open an entire project, navigate between files, run terminal commands, compare changes, and install extensions for tools such as GitHub Copilot. It can also be used alongside command-line tools such as Claude Code.
For a beginner, the most important step is not installing dozens of extensions or customizing every color and keyboard shortcut. It is learning how to open a project correctly and recognize the parts of the editor you will use throughout an AI-assisted development workflow.
By the end of this guide, you will have VS Code installed, know how to open a project folder, understand the main areas of the interface, and be ready for the next step in the series.
What You Will Learn
This guide will show you how to:
- install Visual Studio Code on Windows, macOS, or Linux;
- open a folder as a project workspace;
- recognize the Explorer, editor, terminal, Extensions, and Source Control areas;
- create and edit a simple file;
- verify that the integrated terminal is working;
- avoid common setup mistakes.
The exact wording of buttons or menu items may vary slightly between VS Code versions, but the core workflow remains the same.
Before You Install VS Code
You do not need an existing GitHub account, Git installation, WSL environment, or AI coding subscription for this article.
You only need:
- a supported Windows, macOS, or Linux computer;
- permission to install applications;
- an internet connection for downloading VS Code;
- a folder where you can create a small practice project.
VS Code and Visual Studio are different products.
Visual Studio is a larger integrated development environment often used for workflows such as .NET and Windows application development. Visual Studio Code is a lighter editor that supports many programming languages and development environments through extensions.
For this series, we will use Visual Studio Code.
Install Visual Studio Code
Always download VS Code from the official Visual Studio Code website rather than from an unofficial download page.
The download page normally detects your operating system and presents an appropriate installer. Before downloading, confirm that the selected option matches your computer.
Install VS Code on Windows
Windows users may see more than one installer type.
For most beginners using their own computer, the standard user-level installer is usually the most straightforward choice. It installs VS Code for the current Windows account and normally does not require system-wide configuration.
After downloading the installer:
- Open the downloaded file.
- Review and accept the license terms.
- Keep the default installation location unless you have a reason to change it.
- Review the optional setup choices.
- Complete the installation.
- Launch Visual Studio Code.
Depending on the installer version, you may see options related to the Windows context menu or the system path.
A context menu option can make it possible to right-click a folder and open it in VS Code. A path option can make the code command available in supported terminals.
These options are convenient, but they are not required to begin. The editor can still be opened normally from the Start menu.
When VS Code launches successfully, you should see a welcome page or an empty editor window.
Install VS Code on macOS
On macOS, the download is commonly provided as an application archive.
After downloading it:
- Open the downloaded archive if it does not open automatically.
- Move Visual Studio Code into the Applications folder.
- Open it from Applications, Launchpad, or Spotlight.
- Approve the launch if macOS asks you to confirm that the application was downloaded from the internet.
Placing VS Code in the Applications folder makes it easier to find and update.
The code terminal command may require an additional setup step on macOS. We do not need that command for this article, so you can continue even if it has not been configured.
Install VS Code on Linux
Linux installation differs by distribution.
The official download page generally provides packages for common package formats. Choose the package appropriate for your distribution and architecture.
For example, Debian- and Ubuntu-based distributions commonly use one package format, while Fedora- and Red Hat-based distributions use another.
Install the package using the normal software installer for your distribution or the documented package-management method.
After installation, open VS Code from the application menu.
Linux package commands and repository configuration can change over time, so use the current official instructions for your distribution rather than copying an old command from an unrelated tutorial.
Open a Project Folder, Not Just a File
One of the most important beginner habits is opening a folder as a workspace.
Suppose you create a file named index.html and open only that file in VS Code. You can edit it, but the editor has limited information about the larger project.
When you open the project folder, VS Code can see the surrounding files and directories. This allows it to:
- display the complete project structure;
- search across multiple files;
- run terminal commands from the correct location;
- detect configuration files;
- show Git changes later;
- provide better context to extensions and coding assistants.
For vibe coding, the project folder is especially important because AI tools often need to understand how files relate to one another.
Create a Practice Project Folder
Create a new folder somewhere easy to find.
You might name it:
vibe-coding-practice
For this first exercise, the exact location is not important. You might place it in your Documents folder or another location you use for personal projects.
Later in the series, Windows users will learn how project locations differ when using WSL. For now, use a regular folder that you can access easily.
Open the Folder in VS Code
In VS Code:
- Open the File menu.
- Choose Open Folder or the equivalent option for your operating system.
- Select the
vibe-coding-practice folder. - Confirm the selection.
The folder name should appear near the top of the Explorer area.
VS Code may ask whether you trust the authors of the files in the folder. This security feature matters when opening projects downloaded from the internet.
For a folder you created yourself, you can confirm that you trust it. For an unfamiliar project, review the source before granting trust because a project can contain scripts or configuration that affect tool behavior.
Understand the Main Areas of VS Code
VS Code contains many features, but beginners only need to recognize a few important areas.
The Activity Bar
The Activity Bar is the vertical row of icons usually displayed along one side of the window.
It provides access to major views, including:
- Explorer;
- Search;
- Source Control;
- Run and Debug;
- Extensions.
You do not need to memorize every icon. Hovering over one normally displays its name.
The Explorer
The Explorer shows the files and folders inside the project you opened.
This is where you will:
- create files;
- create folders;
- rename items;
- move between project files;
- understand the project structure.
Move your pointer over the project folder name. You should see controls for creating a new file or directory.
Create a file named:
README.md
Add the following text:
# Vibe Coding Practice
This folder is my first VS Code workspace.
Save the file.
The .md extension identifies a Markdown file. Markdown is a plain-text format often used for project documentation.
The goal is not to learn Markdown yet. This step simply confirms that you can create, edit, and save a file inside the open project.
The Editor Area
The editor occupies the largest part of the VS Code window.
When you select a file in the Explorer, it opens in the editor. Multiple files can be open in separate tabs.
A small marker on a tab may indicate that a file has unsaved changes. After saving, the marker should disappear.
Frequent saving is useful, but it is important to understand that saving a file is not the same as creating a Git commit.
Saving updates the current file on your computer. A Git commit, which we will cover later, records a checkpoint in the project’s version history.
The Command Palette
The Command Palette gives you searchable access to many VS Code actions.
Open it from the View menu or with the keyboard shortcut displayed in your version of VS Code.
Start typing the name of an action, and VS Code will filter the available commands.
For example, you might search for:
Format Document
The Command Palette becomes useful when you know what you want to do but do not know which menu contains the option.
Extensions can add their own commands to the palette, so it will later become one of the main ways to access AI-assisted features.
The Integrated Terminal
VS Code includes a terminal panel inside the editor.
Open the Terminal menu and choose the option to create a new terminal.
A panel should appear near the bottom of the window. The prompt will look different depending on your operating system and shell.
The terminal should normally begin in the folder currently open in VS Code.
To confirm your location, you can use a command that prints the current directory.
On macOS, Linux, and many WSL shells, use:
pwd
In Windows PowerShell, you can also use:
Get-Location
The displayed path should point to your vibe-coding-practice folder.
This matters because many development commands affect the current directory. Running a command from the wrong folder may install files in an unexpected location or fail because the expected project files are missing.
For now, do not worry about learning many terminal commands. The important result is that the terminal opens and starts in the correct project folder.
The Extensions View
Open the Extensions view from the Activity Bar.
Extensions add support for programming languages, tools, themes, formatters, and AI coding assistants.
Later in this series, we will use this area to install and configure GitHub Copilot and any officially supported VS Code integration needed for our workflow.
Avoid installing a large collection of extensions at the beginning.
Every extension adds code, settings, and possible interactions with your project. Installing too many at once can make troubleshooting difficult because you may not know which extension caused a conflict.
A better approach is to install an extension only when you understand its purpose.
Before installing one, check:
- the publisher;
- whether it is the official extension;
- the number and quality of recent reviews;
- the permissions or access it may require;
- whether its documentation matches your current task.
Tool names can be copied by unofficial publishers, so do not rely only on the extension title.
The Source Control View
The Source Control view is where VS Code displays Git-related information.
At this stage, it may show a message that no Git repository has been detected. That is expected if Git is not installed or the practice folder has not been initialized as a repository.
Later articles will explain how Git tracks changes and how VS Code displays modified files.
For now, the important point is that Source Control is not a separate online service. It is an editor interface for working with version-control tools such as Git.
GitHub is also not required for this panel to exist. A project can use Git locally without being uploaded to GitHub.
Make a Few Useful Setup Choices
VS Code offers many customization options, but only a small number matter at the beginning.
Enable Auto Save Only When You Understand It
VS Code can save files automatically.
This is convenient, but manual saving can help beginners notice when a file has changed. It also makes the distinction between edited and saved content easier to understand.
Either approach is valid. Do not assume that Auto Save creates version history. It only saves the current file.
Choose a Readable Theme
A theme changes the colors of the editor.
Choose one that is comfortable to read. Light and dark themes do not affect how your code runs.
Readability is more important than copying the visual setup of another developer.
Keep the Default Layout at First
It can be tempting to hide panels, move sidebars, and install themes immediately.
The default layout is useful while following tutorials because menu locations and screenshots are easier to recognize.
Once you understand the Explorer, terminal, Extensions view, and Source Control view, you can customize the workspace without losing track of important features.
Avoid Enabling Settings You Do Not Understand
AI tools and extensions may recommend changes to VS Code settings.
Before accepting a setting, ask:
- What behavior does this change?
- Does it apply to all projects or only this workspace?
- Can I reverse it?
- Is it required for the current task?
VS Code can store settings globally or inside an individual project. Project-specific settings may become part of the repository, which means they can affect other contributors.
This is one reason to review AI-generated configuration changes just as carefully as source code.
Common Setup Mistakes
Opening One File Instead of the Project Folder
This is one of the most frequent problems.
If only one file is open, the terminal may start in an unrelated directory, project search will be limited, and extensions may not understand the full workspace.
Check the Explorer. The project folder should appear as the top-level item.
Confusing VS Code with Visual Studio
Tutorials for Visual Studio may contain menus and setup steps that do not exist in VS Code.
Before following instructions, confirm that the tutorial refers specifically to Visual Studio Code.
Installing Unofficial Extensions
An extension with a familiar tool name is not automatically official.
Verify the publisher and current product documentation before installing extensions that can read project files, interact with terminals, or connect to online services.
Installing Too Many Extensions
A long extension list does not make the editor more professional.
It increases startup work, adds settings, and can introduce conflicting behavior. Begin with the default editor and add tools as each tutorial requires them.
Running Commands in the Wrong Folder
A terminal command usually works relative to the current directory.
Before installing packages, starting a server, or running a coding agent, confirm that the terminal is inside the correct project folder.
Treating the Editor as a Backup System
VS Code edits files, but it does not automatically preserve a reliable history of every project state.
Undo can help with recent changes in an open editing session, but it is not a replacement for Git. Closing files, running automated tools, or accepting multi-file edits can make simple undo operations unreliable.
Version control will provide the checkpoints needed for a safer workflow.
A Practical Way to Use VS Code with AI
In professional development, the editor is not only a place where code is typed. It is also where changes are inspected.
That role becomes more important when an AI assistant can create or modify several files quickly.
When an AI tool completes a task, use VS Code to answer practical questions:
- Which files were added?
- Which existing files changed?
- Is the new code located where it belongs?
- Did the tool change configuration files?
- Are there errors highlighted in the editor?
- Can the terminal still run the project?
- Does the Source Control view show unexpected changes?
A successful AI response is not the same as a successful software change. The editor gives you the evidence needed to evaluate the result.
This is why learning the workspace before installing an AI assistant is worthwhile. When you understand the normal project structure, unexpected changes are easier to recognize.
Verify Your Setup
Before finishing, confirm that you can complete each of these actions:
- Open VS Code.
- Open the
vibe-coding-practice folder. - See the folder in the Explorer.
- Open and edit
README.md. - Save the file.
- Open the Command Palette.
- Open the integrated terminal.
- Confirm that the terminal points to the project folder.
- Find the Extensions view.
- Find the Source Control view.
If all of these steps work, your VS Code installation is ready for the next part of the series.
You do not need to install GitHub Copilot or Claude Code yet. Adding AI tools before the basic workspace is understood would make it harder to separate editor issues from extension or account issues.
Conclusion
Visual Studio Code will serve as the central workspace for this series.
It gives you one place to manage files, edit code, run terminal commands, install extensions, and inspect version-control changes. The most important setup habit is opening the complete project folder rather than working with isolated files.
You should now be able to create a workspace, recognize the main areas of VS Code, and verify that the integrated terminal starts in the correct location.
For Windows users, the next step is understanding Windows Subsystem for Linux. The next article will explain what WSL does, why it is useful for some AI-assisted development workflows, and how to install it without replacing your existing Windows environment.
Frequently Asked Questions
Is Visual Studio Code free?
VS Code is available without a purchase for individual use. Some extensions and connected services may have separate account or subscription requirements.
For example, an AI coding extension may require sign-in or a paid plan even though the editor itself can be installed and used independently.
Do I need to install Git before using VS Code?
No. You can use VS Code to create and edit files without Git.
However, Git will become important once you begin making AI-assisted changes because it records project history and helps you inspect or reverse edits.
Should I install GitHub Copilot now?
It is better to become familiar with the basic editor first.
Once you can open a project folder, use the terminal, and recognize the Source Control and Extensions views, installing an AI assistant will be easier to understand and troubleshoot.
Comments
Post a Comment