msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '99d78c0f41'
${ noResults }
Web-Dev-For-Beginners/8-code-editor/1-using-a-code-editor/README.md

6.2 KiB
Raw Blame History Escape

Using a Code Editor: Mastering VSCode.dev

Welcome!
This lesson takes you from the basics to advanced use of VSCode.dev—the powerful, web-based code editor. You’ll learn how to confidently edit code, manage projects, track changes, install extensions, and collaborate like a pro—all from your browser, with zero installation required.

Learning Objectives

By the end of this lesson, you’ll be able to:

  • Efficiently use a code editor on any project, anywhere
  • Seamlessly track your work with built-in version control
  • Personalize and boost your development workflow with editor customizations and extensions

Prerequisites

To get started, sign up for a free GitHub account, which lets you manage code repositories and collaborate worldwide. If you don’t have an account yet, create one here.

Why Use a Web-based Code Editor?

A code editor like VSCode.dev is your command center for writing, editing, and managing code. With an intuitive interface, tons of features, and immediate access via the browser, you can:

  • Edit projects on any device
  • Avoid the hassle of installations
  • Collaborate and contribute instantly

Once you’re comfortable with VSCode.dev, you’ll be prepared to tackle coding tasks from anywhere, anytime.

Getting Started with VSCode.dev

Navigate to VSCode.dev—no install, no downloads. Signing in with GitHub unlocks full access, including syncing your settings, extensions, and repositories. If prompted, connect your GitHub account.

After loading, your workspace will look like this:

![Default VSCode.dev](../images/default-vscode-dev has three core sections from left to right:

  • Activity bar: The icons such as 🔎 (Search), ⚙️ (Settings), files, source control, etc.
  • Sidebar: Changes context based on the activity bar icon selected (defaults to Explorer to show files).
  • Editor/code area: The largest section to the right—where you’ll actually edit and view code.

Click through the icons to explore features, but return to the Explorer to keep your place.

Opening a GitHub Repository

Method 1: From the Editor

  1. Go to VSCode.dev. Click "Open Remote Repository."

    ![Open remote repository](../images/open-remote-repository use the Command Palette (Ctrl-Shift-P, or Cmd-Shift-P on Mac).

    ![Palette Menu](../images/palette-menu.pngopen remote repository.”

    • Select the option.
    • Paste your GitHub repo URL (e.g., https://github.com/microsoft/Web-Dev-For-Beginners) and hit Enter.

If successful, you’ll see the entire project loaded and ready to edit!

Method 2: Instantly via URL

Transform any GitHub repo URL to open directly in VSCode.dev by replacing github.com with vscode.dev/github.
E.g.:

  • GitHub: https://github.com/microsoft/Web-Dev-For-Beginners
  • VSCode.dev: https://vscode.dev/github/microsoft/Web-Dev-For-Beginners

This feature supercharges quick access to ANY project.

Editing Files in Your Project

Once your repo is open, you can:

1. Create a New File

  • In the Explorer sidebar, navigate to your desired folder or use the root.
  • Click the ‘New file ...’ icon.
  • Name your file, press Enter, and your file appears instantly.

![Create a new file](../images/create-new-file 2. Edit and Save Files

  • Click on a file in the Explorer to open it in the code area.
  • Make your changes as needed.
  • VSCode.dev automatically saves your changes, but you can press Ctrl+S to save manually.

![Edit a file](../images/edit-a-file.png. Track & Commit Changes with Version Control

VSCode.dev has integrated Git version control!

  • Click the 'Source Control' icon to view all changes made.
  • Files in the Changes folder show additions (green) and deletions (red).
    ![View changes](../images/working-tree.png changes by clicking the + next to files to prepare for commit.
  • Discard unwanted changes by clicking the undo icon.
  • Type a clear commit message, then click the checkmark to commit and push.

To return to your repository on GitHub, select the hamburger menu at the top left.

![Stage & commit changes](../images/edit-vscode.dev Up with Extensions

Extensions let you add languages, themes, debuggers, and productivity tools to VSCode.dev—making your coding life easier and more fun.

Browsing and Managing Extensions

  • Click the Extensions icon on the activity bar.

  • Search for an extension in the 'Search Extensions in Marketplace' box.

    ![Extension details](../images/extension-details:

    • Installed: All extensions you’ve added
    • Popular: Industry favorites
    • Recommended: Tailored to your workflow

    ![View extensions](

1. Install Extensions

  • Enter the extension’s name in search, click it, and review details in the editor.

  • Hit the blue Install button in the sidebar or in the main code area.

    ![Install extensions](../images/install-extension 2. Customize Extensions

  • Find your installed extension.

  • Click the Gear icon → select Extension Settings to fine-tune behaviors to your liking.

    ![Modify extension settings](../images/extension-settings 3. Manage Extensions You can:

  • Disable: Temporarily turn off an extension while keeping it installed

  • Uninstall: Permanently remove it if no longer needed

    Find the extension, hit the Gear icon, and select ‘Disable’ or ‘Uninstall,’ or use the blue buttons in the code area.

Assignment

Test your skills: Create a resume website using vscode.dev

Further Exploration and Self-Study

Now you’re ready to code, create, and collaborate—from anywhere, on any device, using VSCode.dev!