Learn Your VS Code Workspace for Working with AI

1. Today, make one page of work instructions

In part 1, you thought about work you would like to give AI. Now you will save those ideas as a file on your computer. Today's result is one page of work instructions describing AI's role, materials, and goals. This is not the stage for building an app or signing up for an AI service.

Visual Studio Code, or VS Code, is an editor for opening and changing files. You can use it to write documents, much like a word processor. The difference is that you open and manage a whole folder of related files, not just one document. Later, you will use the same screen to inspect AI-generated files and revise instructions.

Today's workflow is:

Open a folder → Create an instruction file → Write → Save → Preview

AGENTS.md is the work instruction file used in this course. OpenCode automatically reads a project-root AGENTS.md as instructions. Other AI tools may use different conventions. In the exercise, ask the AI to confirm the instructions so you can check what it understood.

This file is the top-level reference brief for myproject01: what AI helps with, which materials it uses, and what counts as success. Any later plans or designs derive from it. If documents disagree, AI should ask the teacher rather than choose on its own. Today, you do not need docs/ or three design documents. The next exercise is to complete a worksheet task using this brief.

You do not need to memorize commands. Watch each demo, do the same task on your computer, and check that the result remains there.

2. Prepare VS Code and an empty folder

Install and launch VS Code

If VS Code is already installed, launch it and move to the next step.

1. Download the Windows or macOS version from the official VS Code download page.
2. On Windows, run the installer. On macOS, unzip the download and move the Visual Studio Code app to Applications.
3. Launch Visual Studio Code from the Start menu or Applications.

If installation is blocked on a school-managed computer, ask the administrator. Do not bypass the restrictions.

The demos reproduce the Korean Windows UI with the Dark+ theme. You do not need to change your settings if your screen has different colors. On macOS, the File menu is in the menu bar at the top of the screen, and the window buttons look different. Follow menu names and file names, rather than exact positions.

If you want Korean menus, select the block-shaped Extensions icon on the left and search for Korean Language Pack for Visual Studio Code. Check that the publisher is Microsoft, install it, and follow the language-change instructions. You can also follow along with English menus; their names appear in the instructions here.

Create and open the folder from VS Code

Choose File → Open Folder... in VS Code. Create the project in that folder-selection dialog, rather than opening a separate file manager or asking OpenCode.

Windows: Select Documents, click New folder, type myproject01, and press Enter. Select it and click Select Folder. If it already exists, open it instead. The actual Documents location may vary with OneDrive settings.

macOS: In the open dialog, press Cmd+Shift+G and enter ~/project/. Use New Folder or Cmd+Shift+N to create myproject01, then click Open. If project does not exist, go to ~ and create it first. ~ means your home folder.

Use only public or fictional materials here, not student records or passwords.

3. Watch each demo, then follow along on your computer

The embedded scenes below are learning demos that reproduce the main screens, not a running VS Code window. They use the Korean UI. Instead of clicking the File menu inside a scene, use its step controls. Files shown here are not created or saved on your computer.

Each scene sits directly below its explanation. When it enters view, that scene plays automatically once and stops. Use 이 장면 다시 보기 (Replay this scene) to repeat it, or 일시 정지 (Pause) while you follow along in your own VS Code. Reduced-motion settings disable automatic playback. On small screens, you can scroll horizontally inside the demo. The first scene reproduces the Windows folder picker; on macOS, follow the menu guidance above.

① Open a folder — is its name on the left?

Watch: Play the scene below. The 파일 (File) menu opens at the top, and the cursor moves to 폴더 열기... (Open Folder...). This is the menu that starts your work.

On your computer:

1. In VS Code, choose File → Open Folder....
2. Find and select the myproject01 folder you created.
3. Click the Open button to return to VS Code.

Check: If myproject01 appears in the Explorer on the left, you succeeded. Explorer lists the files in the folder you currently have open. The folder name may appear in uppercase on screen.

If Explorer is hidden, choose View → Explorer. If you only see a document tab in the middle, check whether you opened a single file instead of a folder, then choose Open Folder again.

You may be asked whether you trust the folder. Check its location and confirm that it is the empty practice folder you created before deciding. Keep projects downloaded from the internet in Restricted Mode until you have checked their contents. Trust settings affect which tasks and extension features can run.

② Create a file — does its name end in .md?

Watch: A file-name input appears in Explorer on the left. This is where you name the file, not where you write its contents.

On your computer:

1. Right-click the myproject01 folder name in Explorer.
2. Choose New File.
3. Type AGENTS.md and press Enter.

Check: You should see AGENTS.md in the list on the left and an editor tab with the same name in the middle. Find files on the left; edit the selected file's contents in the middle.

The .md ending identifies a Markdown document. Markdown uses simple symbols to mark headings and lists. # marks a main heading; ## marks the next heading level. Today's example uses only three headings, ## 역할 (Role), ## 자료 (Materials), and ## 목표 (Goals), with numbered items such as 1. and 2.. Put a space after each heading symbol or list number.

③ Write instructions — did you type in the editor, not the name field?

Watch: The central editor shows line numbers and text. The blue lines are headings beginning with ##. VS Code displays the left-hand line numbers for reference; do not type them yourself. The 1. and 2. inside the text are list numbers and should be included. The demo uses Korean text. The example below keeps the same three Korean headings, with English instructions beneath them.

On your computer: Click the AGENTS.md editing area in the middle and paste the following text. Use only the contents of the code box, without the surrounding backtick markers.

## 역할
1. Help a teacher draft worksheets.
2. Confirm the target grade, unit, and learning objectives first.

## 자료
1. Refer to the public curriculum materials and blank worksheet template provided by the teacher.
2. If materials are missing or a decision is ambiguous, ask the teacher instead of guessing.

## 목표
1. Produce a draft worksheet and teacher explanations for one lesson.
2. Propose a writing plan first and wait for the teacher's approval before drafting.
3. Check that the questions and explanations match the learning objectives, and flag anything that needs review.

Check: Numbered sentences should appear under 역할 (Role), 자료 (Materials), and 목표 (Goals). Colors and line numbers do not need to match the demo exactly. In a narrow window, long sentences may wrap onto another line or extend to the right.

Now adapt the second role item within the worksheet example. For instance, write, "Help Grade 7 students explain integer addition using a number line." Update the materials to match the public resources and blank template you will provide. The goal is to describe the reference materials, completion criteria, and question-and-approval sequence, rather than only writing what you want. You can use the same three headings for other work, but the next post continues this worksheet task.

④ Save — does your text remain after closing and reopening?

Watch: During playback, the File menu shows 저장 (Save) and Ctrl+S. After the save command is selected, the menu closes and the unsaved indicator disappears. That change happens only inside the demo; you must save your own file yourself.

On your computer:

1. Choose File → Save. You can also use Ctrl+S on Windows or Cmd+S on macOS.
2. Close the AGENTS.md editor tab. If asked again whether to save, choose Save.
3. Reopen AGENTS.md from Explorer on the left.

Check: If your revised sentences remain, you succeeded. With the default settings, an unsaved tab may show a dot. With Auto Save enabled, that indicator may disappear quickly, so check the contents after reopening, not just whether a dot is visible.

Saving in VS Code records changes in the current file. It is not the same as recording a version in Git or backing up to another computer. We will cover change history in a later chapter.

⑤ Preview — do heading symbols become formatted headings?

Watch: The scene shows headings and paragraphs instead of # symbols and line numbers. It is not a different document, but an easier-to-read display of the same Markdown file.

On your computer:

1. With AGENTS.md open, press Ctrl+Shift+V on Windows or Cmd+Shift+V on macOS.
2. Alternatively, right-click the AGENTS.md file tab above the editor and choose Open Preview.
3. Check for the three headings, 역할, 자료, and 목표, their numbered lists, and your revised sentences.

Check: If the ## symbols become formatted headings and the list numbers appear, you succeeded. If the menu is missing or the result is unexpected, check that the file is named AGENTS.md, not something with an extra extension such as AGENTS.md.txt.

To edit again, select AGENTS.md in Explorer to return to the source editor. Change a sentence once more, save, and reopen the preview. If the revised sentence appears, you have completed one cycle of "edit the file → save → check the result."

Preview displays the document's appearance. It does not judge its accuracy or run an app. Even nicely formatted text still needs your own reading and review.

4. If you get stuck, check in this order

What you see	What to check first
The practice file is missing on the left	Check whether the top folder in Explorer is myproject01. If not, use Open Folder again.
You entered a file name but cannot write the document	Press Enter to confirm the name, then click the central editing area.
Your revised sentence is missing after reopening	Check that you opened the file in the same location, then edit the source and save it.
Preview shows symbols instead of headings	Check that it is an .md file and that headings begin with a symbol followed by a space, such as # .
The demo has a file, but your computer does not	The demo does not control your computer. Carry out the same task in your own VS Code.

A problem does not mean you need to reinstall everything. Start by checking which folder is open → which file you are viewing → whether you saved. The same order will help when AI creates or changes files later.

5. Connect this workflow to AI work

Today, you created the file yourself. Later, you can ask AI to draft it. Even then, do not stop after reading "I created it." Find the file in Explorer → read it in the editor or preview → decide what needs changing. Today's workflow becomes your review process.

The AI conversation screen depends on the service and extension you use. Installing VS Code and signing in to an AI service are separate preparations. You do not need an AI chat window or account for this exercise.

A terminal is a screen where you type commands and see their results, including when you run programs. You can open one inside VS Code, but it is not needed to write or check today's instructions. When an exercise requires running something, we will cover both the working location and the meaning of the command.

Creating a separate practice folder does not automatically restrict AI's access to that folder. When you connect an AI tool, also check its file access, command execution, external data transfer, and approval settings.

6. Check today's result

Finish by checking what remains on your computer, not whether you watched every demo.

• myproject01 contains AGENTS.md.
• The instructions have the three headings 역할, 자료, and 목표, with numbered working requirements.
• Your revised sentences remain after closing and reopening the file.
• You can read the preview and return to the source editor.

If you can do all four, today's preparation is complete. You do not need to memorize every menu or shortcut. What matters is knowing where to find files, where to edit them, and how to check the result.

In the next post, we will continue in the same myproject01 folder. We will explicitly ask AI to read AGENTS.md and an existing worksheet, then record its structure and teaching intent in Markdown. The following chapters develop the new manuscript and printable document.

References

• Download VS Code
• VS Code user interface and Explorer
• VS Code Markdown editing and preview