VS Code for AI

VS Code is a free application from Microsoft. Open it and you see three things.

The file explorer (left side). Like Finder on Mac or File Explorer on Windows. Shows all files and folders. Click a file to open it.

The editor (center). A text editor for code. Like Google Docs but for code files. You can read anything here, even if you don't understand the code. Look for English words: headings, button labels, content.

The terminal (bottom). A text conversation with your computer. You type a command, it responds. That's all.

Why VS Code matters: almost every AI coding tool runs inside it or something like it. Claude Code, Copilot, Cursor. Understanding VS Code means understanding where AI and code meet.

Try This

Download VS Code (free at code.visualstudio.com). Open it. Look at the three areas: file explorer, editor, terminal. Open a text file. Edit something. Save. You just used a code editor.

Open any exported project and you'll see a folder structure. Looks overwhelming. Actually organized by simple logic.

src/ is "source." Where the actual pages, components, and text live. This is where you'll spend time.

public/ has files that go directly on the website. Images, icons, fonts.

node_modules/ is libraries. Ignore this folder entirely. Never open it.

package.json lists what the project needs. Like a recipe's ingredient list.

The pattern: your content is in src/ and public/. Everything else is plumbing. When you open exported code, look at src/ first.

Try This

Export a project from Lovable or Bolt. Open the folder in VS Code. Navigate to the src folder. Find a file with actual content you recognize. You just oriented yourself in a codebase.

Open an HTML file. Looks scary for 10 seconds. Then you see English words. Headlines. Paragraphs. Button labels. The content is right there, surrounded by tags.

Use Ctrl+F (Cmd+F on Mac). Search for text you see on the page. There it is. Change it. Save.

Colors: search for "color:" or "background:". Find hex codes like #C4612A. Change the code, change the color.

Images: search for .jpg or .png. Find image references. Replace the file or change the path.

You just edited code. Not professionally. But the file works with your changes. That's real.

Try This

Open an exported HTML file. Find a headline using Ctrl+F. Change it. Save. Open the file in a browser. See your change. That's editing code.

Open the terminal in VS Code (View then Terminal). A cursor blinks. Type something. The computer responds.

Five commands for 80% of what you'll need:

ls (or dir on Windows): show me what's in this folder. Like opening a folder in Finder.

cd foldername: go into this folder. Like double-clicking it.

cd .. : go back one folder. The back button.

npm run dev: start the project. Makes your site run locally in your browser.

npm run build: prepare for launch. Creates the final version ready for hosting.

That's it. Five commands. The terminal is also where Claude Code lives. When Assisted Coding says "run this in the terminal," this is where.

Try This

Open VS Code's terminal. Type 'ls' (or 'dir'). See your files listed. Type 'cd' into a folder. Type 'ls' again. You just navigated with the terminal.

VS Code is the original. Free, from Microsoft. Any extension, plugin, or tool that works here works everywhere.

Cursor is VS Code with AI in the core. Same interface. Same file explorer. Same terminal. But AI is woven into everything: suggests code, edits multiple files, understands your project. VS Code with an AI colleague pre-installed.

Windsurf is another fork. Similar idea, different implementation. Less established, growing.

The key: learn VS Code and you know them all. The interface is the same. The foundation is the same. AI features are additions, not replacements.

Which to use: exploring? VS Code (free). Want the best AI integration? Cursor (paid). Both run the same projects the same way.

Try This

If you use VS Code, try opening the same project in Cursor (free trial). Notice how similar the interface is. The AI features are the only difference.

Way 1: Inline AI (Copilot, Cursor's built-in). AI watches what you type and suggests what comes next. Like phone autocomplete but for code. You're driving. AI suggests turns.

Copilot works with the model of your choice: GPT, Claude, Gemini. It's an extension. Adds a layer of suggestions without changing VS Code.

Way 2: Terminal AI (Claude Code). AI runs as a conversation in the terminal. You describe what you want: "Add a contact form." It creates and modifies files. You describe the destination. AI drives.

The difference: inline AI is great when you know what you're building. Terminal AI is great when you know what you want but not how to build it.

Many professionals use both. Inline for small edits. Terminal for bigger tasks. They're complementary.

Try This

Watch a 2-minute demo of both Copilot and Claude Code on YouTube. See the difference in action. One suggests code. The other writes entire features.

Step 1: export a project from Lovable or Bolt.

Step 2: open the folder in VS Code.

Step 3: in the terminal, type npm install (gets the project ready). Then npm run dev (starts it locally).

Step 4: open your browser. Go to the URL the terminal shows (usually localhost:3000 or similar).

Step 5: find a headline in the code. Change it. Save. The browser updates automatically.

That's the development loop. Write, save, see the result. The loop takes 5 seconds. That's why development feels fast once you're in it.

Try This

Do it. Export a project. Open in VS Code. Run npm install and npm run dev. Change a headline. See it update. You just experienced the development workflow.

What you've learned: VS Code is a text editor with superpowers. Files and folders have logical structure. You can read and edit code. The terminal is a text conversation. AI helps in two ways. Cursor is VS Code with AI pre-installed.

What Assisted Coding adds: Docker for consistent environments. Claude Code as your AI pair programmer. Supabase for real databases. Vercel for professional deployment. A phased methodology for complex projects.

The honest assessment: Assisted Coding requires a technical mindset. Not a degree. A willingness to type commands, read errors, and think in systems. If this VS Code course felt manageable, you're ready.

If it felt overwhelming: stay with no-code tools. They're powerful and getting better. The earlier University courses are a complete solution for most needs.

Try This

Open VS Code. Open a project. Navigate to src. Find text. Change it. If that felt doable, you're ready for Assisted Coding.