In articles about site management using Codex or Claude Code, the explanation “opening a folder in VS Code” often appears. However, for those who usually only use a browser and the WordPress management screen, it’s natural that they don’t understand the point of opening VS Code or folders in the first place.
In this article, we will not connect to the server yet. First, create a practice folder on your computer, open it in VS Code, and move on to understanding how the screens and extensions work.
- What is VS Code?
- What does “open a folder” mean instead of “file”?
- 1. Install VS Code from the official website
- 2. Create a practice folder
- 3. Open the entire folder in VS Code
- 4. There are only four screens to remember at first.
- 5. Create a practice file
- 6. Find and install extensions
- When using the Codex extension
- When using Claude Code
- What the AI sees after opening the folder
- First time setup confirmation table
- Summary
- Reference materials
What is VS Code?
Visual Studio Code (VS Code) is a free editor that can be used on Windows, macOS, and Linux. Unlike Notepad for text, you can edit multiple files in a folder while viewing them as a list, check changes, operate the terminal, and add extensions.
Just installing VS Code does not automatically change WordPress or the server. You decide which folders to open, which extensions, and what to allow.
What does “open a folder” mean instead of “file”?
When managing one WordPress site, the text, images, settings, and work rules are divided into multiple files. A folder is a box that contains summaries.
Accommodation site operation folder
├── AGENTS.md Operation rules shared with AI
├── CLAUDE.md Information for Claude Code
├── articles Folder for article manuscripts
├── images Folder where images are placed
└── notes Folder for storing research notes
When you open this outermost folder in VS Code, you can search for the files inside from the list on the left. Codex and Claude Code also use open folders as units of work, making it easier to understand related files and rules.
If you open only one file, other manuscripts from the same site or AGENTS.md may not be included in the work scope. Remember, “Open a box with your entire site in it.”
1. Install VS Code from the official website
- Open VS Code official website
- Choose the version that suits your computer, such as Windows or macOS
- Open the downloaded installer
- Follow the on-screen instructions to install
- Start VS Code
Do not enter from search ads or unofficial download sites, and make sure the URL is code.visualstudio.com.
2. Create a practice folder
Create a new folder somewhere you can find it, such as your desktop or your documents folder. For example, name it inn-site-practice.
Please do not include the production site’s files, password list, or guest list from the beginning. Leave only notes for practice.
3. Open the entire folder in VS Code
- Select “File” at the top of VS Code
- Select “Open folder”
- Select the created
inn-site-practicefolder - Press “Open” or “Select Folder”
If the folder name is displayed on the left side, it is successful. In VS Code, an open folder is sometimes called a “workspace.”Don’t think too much about it; it simply means “the box used for this work.”
When asked “Do you trust this folder?”
VS Code’s Workspace Trust is a mechanism that determines whether the code contained in that folder can be executed. If you create an empty practice folder yourself, you can check the contents and trust it. Do not easily trust folders received from the Internet until you can confirm the creator and contents.
4. There are only four screens to remember at first.
- Explorer: List of files and folders on the left
- Editor: A place to read and write the contents of the central file
- Extensions: A place to add features from the square icon on the left
- Terminal: Where you enter commands. Do not paste and run it at first.
All you have to do is learn the other functions when you need them.
5. Create a practice file
Create memo.md from “New File” in Explorer, enter the following and save.
# Practice website operation
- This time we will not connect to the production site
- Will not be deleted or published
- Confirm any operations you are unsure of before executing them.
.md is a text file in Markdown format. It can save ordinary sentences and can also handle headings and bullet points.
6. Find and install extensions
Extensions are small pieces of software that add functionality to VS Code.
- Select the “Extensions” icon on the far left
- Enter the extension name in the search field
- Check not only the name but also the publisher on the details screen
- Read the description, required permissions, and terms of use
- Check that it is the desired one and press “Install”
There is also an unofficial extension with a similar name. Instead of choosing it because it’s at the top of the search results, go to the official documentation, navigate to Marketplace, and match the publisher with the extension ID.Extensions run with the same permissions as VS Code, so you don’t have to install a lot of unnecessary extensions.
When using the Codex extension
Select “Install the extension” from the OpenAI official Codex IDE extension and follow the instructions on the Marketplace. After installation, you can sign in within VS Code and consult it, including open files and selections.
The first request should be read only.
Check the file name in this folder,
Please explain what each file is for.
Please do not create, edit, delete files, or execute commands.
When using Claude Code
Claude Code has a way to integrate with VS Code. Since the installation method and supported OS may change, please check the current method from Anthropic official VS Code integration procedure.
When using Claude Code from the terminal, start it in an open folder and make that folder your work target. Don’t run the installation command without knowing what it means; instead, check the supported OS, contract, and authentication method.
What the AI sees after opening the folder
If you allow AI to manipulate files, you may be able to read the manuscript and settings in the opened folder. The following items will not be placed in the working folder.
- Password and private key
- API key
- Personal information of guests and inquiries
- Payment information
- WordPress database backup
- Download file whose contents have not been checked
Opening a folder not only displays a list on the screen, but also determines the scope of work to be passed to the AI.
First time setup confirmation table
- Installed VS Code from the official website
- Opened the practice folder I created.
- You can see the folder name and
memo.mdon the left side - Find the location of Explorer, Editor, Extensions, and Terminal
- Workspace Trust is not allowed without confirmation
- Verified publisher and official link of extension
- Do not put confidential or personal information in folders
- Made the first AI request read-only.
- Not connected to production server yet
Summary
In VS Code, a folder containing a summary of files related to the site is opened as a work location. Then, check with the publisher to add the official extensions, and start by reading the practice files.
Once you have made this preparation, first check the Introduction to Codex/Claude Code consultation for the host to learn how to proceed from vague concerns to consultation, investigation, and implementation. After that, proceed to Safety rules for managing WordPress with Codex/Claude Code and WP-CLI basics.
Reference materials
- VS Code Official: Introduction
- VS Code official: Open folder
- VS Code official: Use extensions
- OpenAI official: Codex IDE extension
- Anthropic official: Use Claude Code in VS Code
Note: Screen names and installation methods may be updated. Please be sure to check each product’s official page for current instructions.
