AI Code Editors: VS Code, Cursor, Windsurf & OpenCode

The Four Editors at a Glance

Here's the short version before we dive in — all four are excellent, they just fit different needs:

• VS Code (Free) — the most popular code editor. Free, open-source, and extensible with thousands of plugins. Works great with GitHub Copilot (free with the Student Pack).
• Cursor (AI-Native) — a fork of VS Code with AI deeply integrated into every part of the editor. Chat with your codebase, generate multi-file changes, and use Claude, GPT-4, and other models.
• Windsurf (AI-Powered) — another AI-native editor with deep codebase awareness and automatic suggestions as you work.
• OpenCode (Terminal-Based) — a terminal-based AI coding assistant. No GUI needed. Perfect for SSH workflows and lightweight setups.

Step-by-Step: Install & Configure VS Code

Step 1: Download and Install

1. Go to code.visualstudio.com and click the blue "Download" button for your operating system (Windows, macOS, or Linux).
2. Run the downloaded installer. On Windows, tick the checkboxes for "Add to PATH" and "Create a desktop icon" before clicking Install.
3. Launch VS Code. You'll land on a Welcome tab. Click "Mark Done" or close it with Ctrl+W.
4. Optional: open the Command Palette with Ctrl+Shift+P and type Shell Command: Install 'code' command in PATH (macOS/Linux) so you can launch the editor from your terminal with code .

Quick Tour of the VS Code Interface

When VS Code opens, you'll see four key areas. Knowing their names helps you follow any tutorial:

• Activity Bar (far left icons) — Explorer, Search, Source Control, Run, Extensions. Press Ctrl+B to hide/show it.
• Side Bar — shows the panel for whatever Activity Bar icon is selected (e.g. the file tree in Explorer).
• Editor Area — where your files open as tabs. Drag tabs to split the editor side by side.
• Status Bar (bottom) — shows the current branch, errors, line/column, and the Copilot status icon.

Step 2: Install the Essential Extensions

Click the Extensions icon in the left Activity Bar (or press Ctrl+Shift+X), search for each name, and click Install:

Step 3: Enable GitHub Copilot (Free for Students)

1. Install the GitHub Copilot extension (see Step 2).
2. Click the Copilot icon in the bottom status bar and choose "Sign in to GitHub".
3. Your browser opens — authorise VS Code. If you haven't verified your GitHub Student Pack yet, see the GitHub Student Pack lesson first.
4. Start typing a comment like // function to add two numbers — Copilot suggests the code in grey. Press Tab to accept.

Step 4: Set Up a Terminal-Based Editor (OpenCode)

Prefer the terminal? Install OpenCode globally with npm:

npm i -g opencode-ai
mkdir TerminalProjects
cd TerminalProjects
opencode

The opencode command starts an interactive session where you describe a task and it edits files, runs commands, and explains its work — all inside your terminal.

Step 5: Your First AI-Assisted Project

1. Create a folder: mkdir my-first-ai-project then cd my-first-ai-project.
2. Open it in VS Code: code .
3. Create a file named main.py.
4. Type a comment describing what you want, e.g. # read a CSV file and print the average of the 'score' column, then press Enter.
5. Accept Copilot's suggestion with Tab, run it in the integrated terminal (Ctrl+`) with python main.py.

Keyboard Shortcuts That Pay for Themselves

Learn these five and you'll navigate faster than 90% of VS Code users:

Recommended Setup for KNUST Students

1. Install VS Code from code.visualstudio.com
2. Get GitHub Copilot free with the Student Developer Pack
3. Install the Python extension for data science work
4. Install the LaTeX Workshop extension for academic papers
5. Add GitLens for better version control

Head-to-Head Comparison: Which Editor Wins?

AI Models and What They Cost (Approximate)

For a student budget the sweet spot is: Copilot (₵0 with Student Pack) for inline suggestions + a free Gemini/Claude CLI for deep questions. Only pay for Cursor/Windsurf when you want their agent workflows.

Pro Technique 1: The Command Palette

Press Ctrl+Shift+P (macOS: Cmd+Shift+P) and type to run any command: Format Document, Toggle Terminal, Change Color Theme, Preferences: Open Settings (JSON). In Cursor and Windsurf, the same palette also gives you AI actions.

Pro Technique 2: Multi-Cursor Editing

Hold Alt and click to place a second cursor; press Ctrl+D to select the next match of your selection and keep extending. Type once and it edits everywhere. This is how you rename variables across a file in seconds.

Pro Technique 3: Cursor's Killer Features

• Tab autocomplete — Cursor predicts the next edit across multiple lines, not just one.
• Composer / Agent mode — describe a change and Cursor edits several files, then shows you a diff to review.
• Chat with codebase — highlight code, press Ctrl+L, and ask "what does this do?" or "why is this failing?"
• @file references — type @ in chat to attach specific files, folders, or docs for context.

Pro Technique 4: Windsurf's Cascade

Windsurf's flagship feature is Cascade — an agent that is always aware of your whole project. It can detect the file you're working on, offer to explain errors before you ask, and run multi-step refactors across directories with one instruction. Use it for large, unfamiliar codebases where you need context fast.

Pro Technique 5: Project Rules Files

Both Cursor (.cursorrules) and Windsurf (global rules) let you teach the AI your project's conventions:

# .cursorrules example
- This project uses Python 3.11 and type hints everywhere.
- Always write tests for new functions using pytest.
- Prefer dataclasses over plain dictionaries for models.
- Never use the print() function; use the logging module.

Place this file in your project root and the AI will follow it for every future request.

Pro Technique 6: Connect External Tools with MCP

Modern editors support MCP (Model Context Protocol) — a standard way to give the AI access to databases, file systems, and APIs. In Cursor, enable it under Settings → MCP and add a server like GitHub or a database connector. The AI can then query your real data instead of guessing.

Essential settings.json Snippets

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.minimap.enabled": false,
  "editor.fontSize": 14,
  "files.autoSave": "onFocusChange",
  "editor.wordWrap": "on",
  "workbench.colorTheme": "Default Dark+"
}

Open Ctrl+Shift+P → Preferences: Open Settings (JSON) and paste these — Prettier will now format your code automatically every time you save.

Common Mistakes (and How to Avoid Them)

• Accepting every AI suggestion blindly — always review generated code; AI can produce subtly wrong logic or security bugs.
• Not installing a formatter — code stays messy and Git diffs become noisy. Enable Prettier on save.
• Ignoring project rules — without a .cursorrules or consistent prompts, the AI won't match your style.
• Using a GUI editor over SSH — on a remote server there's no GUI; use OpenCode or VS Code Remote-SSH instead.
• Missing the Student Pack — you're paying $10/month for Copilot you could get free with your @st.knust.edu.gh email.

Ready-to-Use settings.json Template

Paste this into Preferences: Open Settings (JSON) for a fully optimised dev environment:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "files.autoSave": "onFocusChange",
  "workbench.startupEditor": "none",
  "terminal.integrated.fontSize": 13,
  "git.autofetch": true,
  "git.confirmSync": false,
  "emmet.includeLanguages": {"javascript": "javascriptreact"},
  "python.linting.enabled": true,
  "extensions.ignoreRecommendations": false
}

Optional keybindings.json Template

Open Ctrl+Shift+P → Preferences: Open Keyboard Shortcuts (JSON) and add your most-used actions:

[
  {
    "key": "ctrl+shift+enter",
    "command": "editor.action.insertLineAfter"
  },
  {
    "key": "ctrl+shift+t",
    "command": "workbench.action.terminal.new"
  },
  {
    "key": "ctrl+shift+p",
    "command": "workbench.action.showAllSymbols",
    "when": "editorTextFocus"
  }
]

The Complete Setup Checklist

• Editor installed — VS Code downloaded from code.visualstudio.com, "Add to PATH" ticked
• code . works — launch from terminal successfully
• Essential extensions installed — Python, LaTeX Workshop, GitLens, Live Server, Prettier
• GitHub Copilot activated — signed in with your Student-Pack-verified GitHub account
• Format on save enabled — Prettier set as default formatter
• Git configured — git config --global user.name and user.email set
• Integrated terminal tested — Ctrl+` opens and runs a script
• Project rules file created — .cursorrules or equivalent in your main repo
• Keybindings memorised — Ctrl+Shift+P, Ctrl+D, Ctrl+`
• Version control test — made first commit on a real project

AI Prompt Templates for Your Chat Panel

1. Code review:
"Review [FILE/PASTE CODE]. List bugs, security issues, and style problems
in priority order. Show the corrected version."

2. Explain:
"Explain what this function does line by line, assuming I'm new to
[LANGUAGE]. Then give a simpler alternative."

3. Refactor:
"Refactor this code to be more readable. Keep the behaviour identical.
Show me a before/after diff."

4. Tests:
"Write pytest unit tests for [FUNCTION]. Cover edge cases: empty input,
wrong types, and very large inputs."

5. Debugging:
"Here is the error message and my file. What is the root cause and the
minimum change to fix it?"

Troubleshooting FAQ

• Copilot isn't suggesting anything? — Check the Copilot icon in the status bar is green (signed in), not grey. Sign out and back in, then reload the window with Ctrl+Shift+P → Developer: Reload Window.
• VS Code says "command not found" for code? — Reinstall and tick Add to PATH, or run the Shell Command: Install 'code' command in PATH command.
• Prettier isn't formatting? — Confirm it's the default formatter (editor.defaultFormatter) and that you've pressed Format Document at least once to trigger it.
• Cursor uses my free AI credits too fast? — Turn off Tab autocomplete for mundane typing and rely on Ctrl+L chat only when you need it.
• OpenCode won't install (permission error)? — On Linux/macOS add sudo or fix npm's global prefix; on Windows run PowerShell as administrator.
• Python debugger won't start? — Make sure the Python extension selected the right interpreter (bottom-left of the status bar) and that Python is on your PATH.
• Editor feels slow on large projects? — Disable the minimap, exclude node_modules from the file explorer (Settings → Files: Exclude), and enable search.useIgnoreFiles.
• GitLens blame showing wrong info? — Run git fetch and make sure you're on the latest branch; GitLens reads your local history.
• LaTeX won't compile? — Install a LaTeX distribution (e.g. TinyTeX or MiKTeX) first, then use LaTeX Workshop's "Build LaTeX project" button; read the log tab for the actual error line.