Skip to content

Add instruction how to use opencode with VS code for agentic ai page #67

Description

@kurniawano

Add the following or something similar


# Student Handout: Install and Set Up OpenCode with Visual Studio Code

## What you will do
In this activity, you will:

1. Install **Visual Studio Code (VS Code)**
2. Install **OpenCode**
3. Open a folder in VS Code
4. Test that OpenCode works

This handout is for students with little or no coding experience.

---

# Part 1: Install Visual Studio Code

Visual Studio Code is a free code editor made by Microsoft. ([code.visualstudio.com](https://code.visualstudio.com/docs/getstarted/overview))

## Step 1: Download VS Code
1. Go to the official Visual Studio Code website. ([code.visualstudio.com](https://code.visualstudio.com/docs/getstarted/overview))
2. Download the installer for your computer:
   - Windows
   - macOS
   - Linux ([code.visualstudio.com](https://code.visualstudio.com/docs/getstarted/overview))

## Step 2: Install VS Code
Follow the instructions for your computer:

### Windows
1. Download the **User Setup installer** (`.exe`). ([code.visualstudio.com](https://code.visualstudio.com/docs/getstarted/overview))
2. Run the installer and follow the prompts. ([code.visualstudio.com](https://code.visualstudio.com/docs/getstarted/overview))
3. When installation finishes, VS Code is ready to use. The installer adds `code` to your PATH, so you can open a folder from the terminal with `code .`. ([code.visualstudio.com](https://code.visualstudio.com/docs/getstarted/overview))

### macOS
1. Download the `.dmg` installer. ([code.visualstudio.com](https://code.visualstudio.com/docs/getstarted/overview))
2. Open the `.dmg` file and drag **Visual Studio Code.app** to the **Applications** folder. ([code.visualstudio.com](https://code.visualstudio.com/docs/getstarted/overview))
3. Open VS Code from the Applications folder or Spotlight. ([code.visualstudio.com](https://code.visualstudio.com/docs/getstarted/overview))
4. To use the `code` command in the terminal, open the Command Palette with:
   - **Mac:** `Cmd+Shift+P` ([code.visualstudio.com](https://code.visualstudio.com/docs/getstarted/overview))
5. Search for and run:
   - **Shell Command: Install 'code' command in PATH** ([code.visualstudio.com](https://code.visualstudio.com/docs/getstarted/overview))

### Linux
1. Download the `.deb` package for Debian/Ubuntu, or the `.rpm` package for Fedora/RHEL. ([code.visualstudio.com](https://code.visualstudio.com/docs/getstarted/overview))
2. Install it using the correct command for your system:
   - Debian/Ubuntu: `sudo apt install ./<file>.deb` ([code.visualstudio.com](https://code.visualstudio.com/docs/getstarted/overview))
   - Fedora/RHEL: `sudo dnf install ./<file>.rpm` ([code.visualstudio.com](https://code.visualstudio.com/docs/getstarted/overview))

---

# Part 2: Install OpenCode

The official OpenCode documentation says the easiest way to install OpenCode is with the install script. ([dev.opencode.ai](https://dev.opencode.ai/docs))

## Step 1: Open a terminal
Open the terminal on your computer, or open the integrated terminal inside VS Code. VS Code has an integrated terminal built in. ([code.visualstudio.com](https://code.visualstudio.com/docs/editor/command-line))

## Step 2: Install OpenCode

### Recommended install method
Type this command exactly and press **Enter**:  

```bash
curl -fsSL https://opencode.ai/install | bash

This is the official install command listed in the OpenCode documentation. (dev.opencode.ai)

If you are on Windows

The OpenCode documentation recommends using WSL for the best experience on Windows. It also lists Windows installation options such as Chocolatey, Scoop, NPM, and Mise. (dev.opencode.ai)

If your instructor gives you a Windows-specific method, use that method exactly.


Part 3: Open VS Code and Set Up Your Workspace

Step 1: Open VS Code

Start Visual Studio Code.

Step 2: Open a folder

Open a folder where you will keep your work:

  1. Click File
  2. Click Open Folder
  3. Choose or create a folder for this activity

Working in a folder helps VS Code manage your files. VS Code can open folders directly from the command line with code . after setup. (code.visualstudio.com)

Step 3: Open the integrated terminal

In VS Code:

  1. Click Terminal
  2. Click New Terminal

VS Code’s integrated terminal opens inside the editor and lets you run command-line tools without leaving VS Code. (code.visualstudio.com)


Part 4: Install or Launch OpenCode in VS Code

The OpenCode IDE documentation says that to install OpenCode on VS Code:

  1. Open VS Code
  2. Open the integrated terminal
  3. Run opencode — the extension installs automatically. (opencode-tutorial.com)

Step 1: Type the command

In the VS Code terminal, type:

opencode

Then press Enter. (opencode-tutorial.com)

Step 2: Wait for installation or startup

OpenCode should either:

Step 3: If automatic install does not work

The OpenCode documentation says to check that:

  • you are running opencode in the integrated terminal,
  • the VS Code CLI command code is installed,
  • and VS Code has permission to install extensions. (opencode-tutorial.com)

If needed, on macOS or some setups, use the Command Palette and run:


Part 5: Test that the Setup Works

Use the following tests.

Test 1: Confirm the terminal works

In the VS Code terminal, type:

echo hello

Press Enter.

Expected result

The terminal should print:

hello

If this works, your terminal is working.


Test 2: Confirm VS Code can open your folder

Open a folder in VS Code and make sure you can see files in the Explorer panel.

You can also test the code command if it is installed:

  1. Open a terminal
  2. Go to a folder
  3. Type:
code .

VS Code documentation says this opens the current folder in VS Code. (code.visualstudio.com)


Test 3: Confirm OpenCode runs

In the VS Code terminal, type:

opencode

Press Enter. (opencode-tutorial.com)

Expected result

One of these should happen:

  • OpenCode starts
  • OpenCode installs automatically
  • A split terminal view opens
  • The extension appears in VS Code (opencode-tutorial.com)

If OpenCode starts, the setup is working.


Test 4: Confirm you can create a file

  1. In VS Code, click File
  2. Click New File
  3. Save the file as:
test.txt
  1. Type:
Hello OpenCode
  1. Save the file

If you can create and save a file, VS Code is working correctly.


Troubleshooting

If opencode is not recognized

Try:

  • making sure you typed opencode exactly
  • reopening the VS Code terminal
  • checking that OpenCode was installed successfully (opencode-tutorial.com)

If code is not recognized

Try:

  • restarting VS Code
  • on macOS, running Shell Command: Install 'code' command in PATH from the Command Palette (code.visualstudio.com)

If nothing appears to happen

Try:

  • waiting a few seconds
  • closing and reopening VS Code
  • asking your instructor for help

Success checklist

You are done when you can check all of these:

  • I installed VS Code
  • I installed OpenCode
  • I opened a folder in VS Code
  • I opened the integrated terminal
  • I ran opencode
  • I created and saved test.txt
  • I confirmed the setup works

Notes for students

If you get stuck, that is okay. Copy the exact error message and show it to your instructor.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions