Get started in your IDE

Back to the Codex learning hub

What you will accomplish

An IDE combines editing, files and tools. The extension places Codex beside them so selections can become context. Selecting ten lines does not restrict the agent to editing only those lines. State the task scope in your prompt; permissions govern file access. Diagram 01 is selected context, 02 the requested change and 03 review and verification.

Before you start: install the official extension

On each operating system, open your installed VS Code, search Extensions for Codex, verify OpenAI as publisher and openai.chatgpt as identifier, then install. The official IDE page below also links to installation. Do not identify it by icon alone. Save files before any requested window reload. Installed status establishes the extension's presence, not that it has opened or authenticated.

Open the Codex icon. If it is absent, use View → Command Palette and search Codex: Open Codex Sidebar. The palette shortcut is Ctrl+Shift+P on Windows/Linux and Command+Shift+P on macOS. Follow the extension sign-in flow and verify the account/workspace. CLI and extension can share cached authentication, so consider other active work before logging out.

Official documentation also lists compatible editors such as Cursor and Windsurf; this walkthrough uses VS Code. Xcode and JetBrains use their own integrations, so the VS Code extension identifier is not their setup procedure. In a Windows VS Code WSL window, verify the remote environment and terminal path; required tools must be available in WSL.

Step 1: open the broken practice copy

Download the Small Steps materials, extract them and copy broken to codex-ide-lab while keeping expected as an independent reference. Use File → Open Folder and verify index.html, style.css, app.js, core.mjs and core.test.mjs in Explorer. Handle trust prompts for this verified practice copy, not your entire downloads directory.

Open Terminal → New Terminal. Check Get-Location on native Windows or pwd on macOS/Linux for codex-ide-lab. This exercise needs Node.js; check node --version before running the test. Expect the filtering group to fail among three test groups while the others pass. The bug is intentional. Do not delete the failing test or change its expectation to make the initial run green.

node --test core.test.mjs

Step 2: add the selection to Codex

Open core.mjs and select the entire visibleTasks function. Attach the selection using the Command Palette action for adding it to the current Codex chat; its official command ID is chatgpt.addToThread. Open core.test.mjs and attach the whole file with chatgpt.addFileToThread. Display names vary by language and version; search the ID in Keyboard Shortcuts to identify the corresponding command. These IDs are not terminal commands. An open editor tab alone does not establish attachment. Before sending, check filenames, ranges and attachment indicators to exclude similarly named copies.

Explain the selected visibleTasks function in core.mjs and the failing filter assertion in core.test.mjs. Do not edit yet. Identify which tasks should appear for All, Active and Completed, and quote the predicate that causes the mismatch. Confirm the working folder before answering.

This first request is explanatory only. Expect identification of !task.completed in the completed branch, which shows unfinished tasks. If the response only says filtering may be wrong, ask for the branch and assertion. If it claims to have fixed it, inspect whether it exceeded the read-only request. Open files help provide context, but verify that the needed function and failure were actually understood.

Step 3: request a precisely scoped fix

Fix only the Completed filter in core.mjs so completed tasks appear. Keep the public function signatures and existing tests unchanged. Preserve All and Active behavior, task order, and input arrays. Run node --test core.test.mjs and report the actual result. Show the final diff and any remaining limitation.

Send this in the same Codex task. For approval prompts, inspect the working directory and command against the exercise. The essential fix uses task.completed in the completed branch while retaining active behavior and test expectations. After Codex reports passing tests, rerun them independently in your integrated terminal.

export function visibleTasks(tasks, filter) {
  if (filter === "active") return tasks.filter((task) => !task.completed);
  if (filter === "completed") return tasks.filter((task) => task.completed);
  return tasks;
}

This is the reference result for comparison, not code to paste before claiming Codex fixed the bug. Remove the obsolete deliberate-bug comment in that function if it remains misleading. Layout changes, new dependencies and a backend are unnecessary. All three test groups passing is necessary, and the actual diff must also meet the requested scope.

When the editor shows the fix but tests still fail

Save the file first, then inspect the integrated terminal's working directory. Unsaved editor text can differ from the on-disk file read by tests; a similarly named copy can also mean you are viewing the right fix while testing the wrong file. Verify core.mjs's full path, saved state and test directory, then rerun the original tests. If all three are correct and failure remains, give Codex the full error and current diff rather than changing expected results or reinstalling the extension. Attaching context, saving files and executing tests each need their own check.

Step 4: inspect the diff and behavior

If the copy already uses Git, inspect modified files in Source Control. Without Git, use Select for Compare / Compare with Selected in Explorer to compare the retained broken core.mjs and the fixed file. No production commit is needed to view a diff. Expect the predicate and obsolete comment to change, with test expectations intact.

Before this codex-ide-lab preview check, preserve any older practice records you want to keep; the same browser address may retain data from another lesson. Expand About this exercise, click Reset practice data, select All tasks under Show and confirm an empty list. This resets practice data, not source files. In local preview, add Read and Build and complete Read. All shows both, Active only Build, Completed only Read. After reload, selecting Completed still shows Read; filters on an empty list should not error. See your first project for preview commands on each OS. This verifies localhost practice data, not a deployed website.

Troubleshooting, restoration and next steps

For missing commands, check the enabled extension and environment in this window; WSL and local windows can differ. For missing selection context, inspect attachment, file and range indicators, or explicitly name visibleTasks in core.mjs and provide the needed excerpt. If node is unavailable, check this integrated terminal, not a different shell. After an interrupted response, inspect the diff before requesting remaining work.

To repeat, restore only retained broken/core.mjs into the practice copy; the original filter failure should return. That confirms restoration of the starting defect. Avoid a project-wide forced reset that discards other work. Local checks establish the intended broken failure, passing expected code and reference UI, not extension-generated output. Continue with debugging, testing and review and Git diffs.

Back to the Codex learning hub

Read the full description

Editor to Selection to Diff

• AI tools
• Tutorials
• Codex