Basics of AI & Agents Curriculum
Phase 0: Developer Tooling Fundamentals·7 min read

Module 0.5

Your Editor & Dev Environment

What is a Code Editor?

A code editor is where you spend most of your time as a developer. It's a text editor purpose-built for writing code — with syntax highlighting, autocomplete, debugging tools, and a built-in terminal.

VS Code (Visual Studio Code) is the dominant editor in the space. It's free, open-source, made by Microsoft, and consistently ranks as the most-used editor in developer surveys. It's not an IDE (Integrated Development Environment) in the traditional sense — it's a lightweight editor that becomes powerful through extensions.

Real-world usage: Most AI engineers use VS Code with the Python extension, Copilot for code suggestions, and the terminal panel for running agents. Some use Cursor (a VS Code fork with AI features) or JetBrains IDEs (PyCharm for Python). The specifics don't matter as much as being fast and comfortable in your editor.

Key terms:

  • Workspace — the folder (or set of folders) you have open in your editor
  • Extension — a plugin that adds functionality to VS Code
  • Integrated terminal — a terminal panel built into the editor window
  • Settings — configuration file (JSON) that controls editor behavior

VS Code Setup

Bash
# Install (macOS) brew install --cask visual-studio-code # Install (Windows) winget install Microsoft.VisualStudioCode # Open a project folder code . # Opens current directory in VS Code code ~/projects/my-agent # Opens a specific folder

Essential settings to change immediately:

Open Settings (Cmd/Ctrl + ,) and set:

  • Auto Save → afterDelay (never lose work to a forgotten Ctrl+S)
  • Font → JetBrains Mono or Fira Code (monospace fonts designed for code)
  • Tab Size → 4 for Python, 2 for JavaScript/TypeScript (follow the community convention)
  • Format On Save → true (auto-formats your code every time you save)

Essential Extensions

Install these from the Extensions panel (Cmd/Ctrl + Shift + X):

ExtensionWhat it does
Python (Microsoft)Python language support — IntelliSense, linting, debugging, venv detection
PylanceFast, feature-rich Python language server (auto-installed with Python ext)
ESLintJavaScript/TypeScript linting — catches errors before you run the code
PrettierAuto-formatting for JS/TS/JSON/CSS — consistent style without thinking
GitLensSupercharged Git — see who changed each line, view history inline
Error LensShows errors and warnings inline next to the relevant code line
Thunder ClientREST API client inside VS Code — like Postman but in your editor

For AI-specific work:

ExtensionWhat it does
GitHub CopilotAI code completion (paid subscription)
JupyterRun Jupyter notebooks inside VS Code

Note on Claude Code: Claude Code is not a VS Code extension — it's a terminal-based CLI tool. Install it via npm: npm install -g @anthropic-ai/claude-code. You run it from the terminal, not the extensions panel. It integrates with VS Code through the terminal pane. Phase 2 covers it in depth.

Most developers find a handful of focused extensions works better than a bloated editor that lags.

The Integrated Terminal

VS Code has a built-in terminal panel (Ctrl + ` to toggle). This is where you'll run most of your commands — no need to switch to a separate terminal window.

You can:

  • Split terminals (run your server in one, tests in another)
  • Choose your shell (Bash, Zsh, PowerShell)
  • Run tasks directly from package.json scripts

The workflow: Code in the editor, run in the terminal, switch with a keystroke. Keeping everything in one window eliminates context-switching friction.

.env Files and dotenv

API keys, database URLs, model endpoints — these are secrets that change between environments (development, staging, production). They should never be hardcoded in your source code.

The convention: store them in a .env file and load them at runtime.

Bash
# .env file (in your project root) ANTHROPIC_API_KEY=sk-ant-abc123... OPENAI_API_KEY=sk-def456... DATABASE_URL=postgresql://localhost/mydb MODEL_NAME=claude-sonnet-4-6

In Python, use the python-dotenv library:

Python
from dotenv import load_dotenv import os load_dotenv() # Reads .env file into environment variables api_key = os.environ["ANTHROPIC_API_KEY"]

In Node.js:

JavaScript
import 'dotenv/config'; const apiKey = process.env.ANTHROPIC_API_KEY;

Critical rules:

  1. Never commit .env to Git. Add it to .gitignore immediately.
  2. Create a .env.example file with the key names but no values, so new developers know what variables they need.
  3. Use different .env files for different environments (.env.local, .env.production).

Why it matters for agents: Every agent project starts with ANTHROPIC_API_KEY in a .env file. Getting this wrong — committing the key, forgetting to load it, typo in the variable name — is the most common "my agent won't start" debugging session.

Project Structure Convention

There's no single "right" structure, but most AI/agent projects follow something like this:

my-agent/
├── .env                 # Secrets (gitignored)
├── .env.example         # Template for secrets
├── .gitignore           # Files Git should ignore
├── requirements.txt     # Python dependencies
├── README.md            # Project documentation
├── main.py              # Entry point
├── agent/
│   ├── __init__.py
│   ├── core.py          # Agent loop logic
│   └── tools.py         # Tool definitions
├── tests/
│   └── test_agent.py
└── .venv/               # Virtual environment (gitignored)

The principles:

  • Entry point at the root — main.py or index.js
  • Source code in a subdirectory — agent/, src/, lib/
  • Tests mirroring source — tests/test_core.py matches agent/core.py
  • Config files at the root — .env, .gitignore, requirements.txt, package.json
  • Generated files gitignored — .venv/, node_modules/, __pycache__/

Why it matters: When you start building agents in Phase 1, you'll need a clean project structure. Having a consistent layout means you spend time thinking about agent logic, not about where files go.

Sources