Beginner's Guide to VS Code & AI Editors

Why Visual Studio Code (VS Code)?

VS Code is the foundation of modern web development. It works on every OS, supports every language, and defines the standard for what a code editor should look like. However, in 2025, the landscape has shifted toward AI-Native editors that are built on top of VS Code.

📥 Installation

Windows

  1. Go to code.visualstudio.com
  2. Click the "Download for Windows" button
  3. Run the downloaded installer (.exe file)
  4. Follow the installation wizard (you can accept all default options)
  5. Launch VS Code from the Start menu

macOS

  1. Go to code.visualstudio.com
  2. Click the "Download for Mac" button
  3. Open the downloaded .zip file
  4. Drag Visual Studio Code to your Applications folder
  5. Launch VS Code from Applications or Spotlight

Linux

  1. Go to code.visualstudio.com
  2. Click the "Download .deb" or "Download .rpm" button (depending on your distribution)
  3. Install using your package manager:
    • Debian/Ubuntu: sudo dpkg -i code_*.deb && sudo apt-get install -f
    • Fedora/RHEL: sudo rpm -ivh code-*.rpm
  4. Launch VS Code from your applications menu

🎯 Basic Features

Opening a Folder/Project

  1. Click File → Open Folder (or press Ctrl+K Ctrl+O on Windows/Linux, Cmd+K Cmd+O on Mac)
  2. Navigate to your project folder
  3. Click Select Folder

Creating a New File

  • Click the New File icon in the Explorer sidebar (looks like a document with a +)
  • Or press Ctrl+N (Windows/Linux) or Cmd+N (Mac)
  • Or right-click in the Explorer sidebar and select New File

Opening the Terminal

  • Press Ctrl+` (backtick key) on Windows/Linux
  • Press Cmd+` on Mac
  • Or go to Terminal → New Terminal from the menu

Useful Keyboard Shortcuts

ActionWindows/LinuxmacOS
Open Command PaletteCtrl+Shift+PCmd+Shift+P
Save FileCtrl+SCmd+S
Find in FileCtrl+FCmd+F
Find in All FilesCtrl+Shift+FCmd+Shift+F
Go to LineCtrl+GCmd+G
Toggle TerminalCtrl+`Cmd+`
Split EditorCtrl+\Cmd+\
Close TabCtrl+WCmd+W

Command Palette

The Command Palette is your best friend! Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) to open it. From here you can:

  • Install extensions
  • Change themes
  • Run commands
  • Navigate files
  • And much more!

🔌 Extensions

Extensions add extra functionality to VS Code.

How to Install Extensions

  1. Click the Extensions icon in the sidebar (looks like four squares)
  2. Search for the extension name
  3. Click Install

Useful Extensions

These give you IntelliSense (autocompletion) while you code.

The New Standard (AI-Native Editors)

In a hackathon, speed is your most valuable resource. These are standalone editors that are VS Code under the hood (same extensions, same hotkeys), but they have AI baked into the engine. They both offer Tab Autocomplete (predicting your next edit) and Agents (chatbots that know your codebase).

In both of the following editors, hitting Ctrl+L opens the agent (ChatGPT-like interface), and hitting Ctrl+K while selecting a block of code lets you give AI a prompt to edit the code.

Cursor

Download: cursor.com

Windsurf

Download: windsurf.com

💡 Tips for Hackathons

  1. Use the integrated terminal - No need to switch between windows!
  2. Split your editor - View multiple files side-by-side (Ctrl+\ or Cmd+\)
  3. Customize your theme - Go to File → Preferences → Color Theme (or Ctrl+K Ctrl+T)
  4. Enable auto-save - Go to File → Auto Save to never lose your work
  5. Use IntelliSense - VS Code will suggest code completions as you type (press Ctrl+Space to trigger manually)

🆘 Getting Help

  • VS Code Documentation: code.visualstudio.com/docs
  • Keyboard Shortcuts Reference: Press Ctrl+K Ctrl+S (or Cmd+K Cmd+S on Mac)
  • Ask mentors - Don't hesitate to ask for help during the hackathon!

Happy coding! 🚀