The Editor

Why this matters

VS Code is your primary workspace for Modules 4 and 5. The integrated terminal, the file explorer, the git panel, and Claude Desktop (or Cursor AI) all live in one environment. The goal of this drill is orientation, not mastery: know where everything is so you can work efficiently in later drills.

How to do it

1. 1

   Open VS Code and open your Lovable app folder

   Clone your GitHub repository from Module 3. In terminal: git clone [YOUR REPO URL] then code [FOLDER NAME] to open it in VS Code.

2. 2

   Orient yourself: find the 4 essential panels

   File Explorer (left sidebar), Editor (center), Terminal (View → Terminal or Ctrl+`), Source Control (git icon in left sidebar).

3. 3

   Install the Claude extension or confirm Claude Desktop is running

   In VS Code Extensions (Ctrl+Shift+X): search for "Claude". Or keep Claude Desktop open in a separate window — both approaches work.

4. 4

   Open one file and have Claude explain it

   Pick any .tsx or .ts file in your project. Copy its contents and paste into Claude Desktop with: 'Explain what this file does in plain language.'

The prompt

Here is a file from my web application project. Please explain:

1. What is this file responsible for in the application?
2. What are the most important parts I should understand?
3. If I wanted to make a change to [DESCRIBE WHAT YOU WANT TO CHANGE], which part of this file would I edit?

File contents:
[PASTE THE FILE CONTENTS]

Success criteria

• ✓You opened your project in VS Code
• ✓You can find the File Explorer, Editor, Terminal, and Source Control
• ✓You explained one project file in plain language using Claude

Common mistakes