|
|
|
|
@ -1,161 +1,163 @@
|
|
|
|
|
# Using a code editor
|
|
|
|
|
Here is an upgraded and enhanced version of your lesson on using VSCode.dev, making it more engaging, comprehensive, and visually appealing—while preserving all your original image links and references.
|
|
|
|
|
|
|
|
|
|
This lesson covers the basics of using [VSCode.dev](https://vscode.dev) a web-based code editor so that you can make changes to your code and contribute to a project without installing anything on your computer.
|
|
|
|
|
***
|
|
|
|
|
|
|
|
|
|
<!----
|
|
|
|
|
TODO: add an optional image
|
|
|
|
|
|
|
|
|
|
> Sketchnote by [Author name](https://example.com)
|
|
|
|
|
---->
|
|
|
|
|
# Using a Code Editor: Mastering [VSCode.dev](https://vscode.dev)
|
|
|
|
|
|
|
|
|
|
<!---
|
|
|
|
|
## Pre-Lecture Quiz
|
|
|
|
|
[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/3)
|
|
|
|
|
---->
|
|
|
|
|
**Welcome!**
|
|
|
|
|
This lesson takes you from the basics to advanced use of [VSCode.dev](https://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
|
|
|
|
|
***
|
|
|
|
|
|
|
|
|
|
In this lesson, you'll learn how to:
|
|
|
|
|
## Learning Objectives
|
|
|
|
|
|
|
|
|
|
- Use a code editor in a code project
|
|
|
|
|
- Keep track of changes with version control
|
|
|
|
|
- Customize the editor for development
|
|
|
|
|
By the end of this lesson, you’ll be able to:
|
|
|
|
|
|
|
|
|
|
### Prerequisites
|
|
|
|
|
- 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
|
|
|
|
|
|
|
|
|
|
Before you begin, you'll need to create an account with [GitHub](https://github.com). Navigate to [GitHub](https://github.com/) and create an account if you haven't already.
|
|
|
|
|
***
|
|
|
|
|
|
|
|
|
|
### Introduction
|
|
|
|
|
## Prerequisites
|
|
|
|
|
|
|
|
|
|
A code editor is an essential tool for writing programs and collaborating with existing coding projects. Once you understand the basics of an editor and how to make use of its features, you'll be able to apply them when writing code.
|
|
|
|
|
To get started, **sign up for a free [GitHub](https://github.com) account**, which lets you manage code repositories and collaborate worldwide. If you don’t have an account yet, [create one here](https://github.com/).
|
|
|
|
|
|
|
|
|
|
## Getting started with VSCode.dev
|
|
|
|
|
***
|
|
|
|
|
|
|
|
|
|
[VSCode.dev](https://vscode.dev) is a code editor on the web. You don't need to install anything in order to use it, just like opening any other website. To get started with the editor, open the following link: [https://vscode.dev](https://vscode.dev). If you aren't signed in into [GitHub](https://github.com/), follow the prompts to sign in or create a new account and then sign in.
|
|
|
|
|
## Why Use a Web-based Code Editor?
|
|
|
|
|
|
|
|
|
|
Once it loads, it should look similar to this image:
|
|
|
|
|
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
|
|
|
|
|
|
|
|
|
|
There are three main sections, starting from the far left and moving to the right:
|
|
|
|
|
Once you’re comfortable with VSCode.dev, you’ll be prepared to tackle coding tasks from anywhere, anytime.
|
|
|
|
|
|
|
|
|
|
1. The _activity bar_ which includes some icons, like the magnifying glass 🔎, the gear ⚙️, and a few others
|
|
|
|
|
1. The expanded activity bar which defaults to the _Explorer_, called the _side bar_.
|
|
|
|
|
1. And finally, the code area to the right.
|
|
|
|
|
***
|
|
|
|
|
|
|
|
|
|
Click on each of the icons to display a different menu. Once done, click on the _Explorer_ so you are back where you started.
|
|
|
|
|
## Getting Started with VSCode.dev
|
|
|
|
|
|
|
|
|
|
When you start creating code or modifying existing code, it will happen in the biggest area to the right. You'll use this area to visualize existing code as well, which you'll do next.
|
|
|
|
|
Navigate to **[VSCode.dev](https://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:
|
|
|
|
|
|
|
|
|
|
## Open a GitHub repository
|
|
|
|
|
, ⚙️ (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.
|
|
|
|
|
|
|
|
|
|
The first thing you'll need is to open a GitHub repository. There are multiple ways of opening a repository. In this section you'll see two different ways you can open a repository so that you can start working on changes.
|
|
|
|
|
Click through the icons to explore features, but return to the _Explorer_ to keep your place.
|
|
|
|
|
|
|
|
|
|
### 1. With the editor
|
|
|
|
|
***
|
|
|
|
|
|
|
|
|
|
Use the editor itself to open a remote repository. If you go to [VSCode.dev](https://vscode.dev) you will see an _"Open Remote Repository"_ button:
|
|
|
|
|
## Opening a GitHub Repository
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Method 1: From the Editor
|
|
|
|
|
|
|
|
|
|
You can also use the command palette. The command palette is an input box where you can type any word that is part of a command or an action to find the right command to execute. Use the menu to the top-left, then select _View_, and then pick _Command Palette_, or using the following keyboard shortcut: Ctrl-Shift-P (on MacOS it would be Command-Shift-P).
|
|
|
|
|
1. Go to [VSCode.dev](https://vscode.dev). Click **"Open Remote Repository."**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.
|
|
|
|
|
|
|
|
|
|
Once the menu opens, type _open remote repository_, and then select the first option. Multiple repositories that you are part of or that you've opened recently will show up. You can also use a full GitHub URL to select one. Use the following URL and paste into the box:
|
|
|
|
|
 and hit Enter.
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
https://github.com/microsoft/Web-Dev-For-Beginners
|
|
|
|
|
```
|
|
|
|
|
If successful, you’ll see the entire project loaded and ready to edit!
|
|
|
|
|
|
|
|
|
|
✅ If successful, you'll see all files for this repository loaded in the text editor.
|
|
|
|
|
***
|
|
|
|
|
|
|
|
|
|
### Method 2: Instantly via URL
|
|
|
|
|
|
|
|
|
|
### 2. Using the URL
|
|
|
|
|
Transform any GitHub repo URL to open directly in VSCode.dev by replacing `github.com` with `vscode.dev/github`.
|
|
|
|
|
E.g.:
|
|
|
|
|
|
|
|
|
|
You can also use a url directly to load a repository. For example, the full URL for the current repo is [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), but you can swap the GitHub domain with `VSCode.dev/github` and load the repository directly. The resulting URL would be [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
|
|
|
|
|
- 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.
|
|
|
|
|
|
|
|
|
|
## Edit files
|
|
|
|
|
Once you have opened the repository on the browser/ vscode.dev, the next step would be to make updates or changes to the project.
|
|
|
|
|
***
|
|
|
|
|
|
|
|
|
|
### 1. Create a new file
|
|
|
|
|
## Editing Files in Your Project
|
|
|
|
|
|
|
|
|
|
You can either create a file inside an existing folder, or create it in the root directory/folder. To create a new file, open a location/directory to which you want the file to be saved and select the _'New file ...'_ icon on the activity bar _(left)_, give it a name and hit enter.
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
|
|
### 2. Edit and save a file on the repository
|
|
|
|
|
|
|
|
|
|
 in the `Changes` folder in the expanded activity bar. This will open a 'Working Tree' for you to visually see the changes you made to the file. Red shows an omission to the project, while green signifies an addition.
|
|
|
|
|
- Click the _'Source Control'_ icon to view all changes made.
|
|
|
|
|
- Files in the `Changes` folder show additions (green) and deletions (red).
|
|
|
|
|
|
|
|
|
|
To return to your repository on GitHub, select the hamburger menu at the top left.
|
|
|
|
|
|
|
|
|
|
If you are satisfied with the changes you made, hover on the `Changes` folder and click the `+` button to stage the changes. Staging simply means preparing your changes to commit them to GitHub.
|
|
|
|
|
_, click the `check icon` to commit and push your changes.
|
|
|
|
|
### Browsing and Managing Extensions
|
|
|
|
|
|
|
|
|
|
Once done working on your project, select the `hamburger menu icon` at the top left to return to the repository on github.com.
|
|
|
|
|
- Click the **Extensions icon** on the activity bar.
|
|
|
|
|
- Search for an extension in the _'Search Extensions in Marketplace'_ box.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
***
|
|
|
|
|
|
|
|
|
|
You can also view all previously installed extensions by expanding the _`Installed folder`_ , popular extensions used by most developers in the _`Popular folder`_ and recommended extensions for you either by users in the same workspace or based on your recently opened files in the _`recommended folder`_ .
|
|
|
|
|
### 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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- **Disable:** Temporarily turn off an extension while keeping it installed
|
|
|
|
|
- **Uninstall:** Permanently remove it if no longer needed
|
|
|
|
|
|
|
|
|
|
### 2. Customize Extensions
|
|
|
|
|
After installing the extension, you may need to modify its behaviour and customize it based on your preferences. To do this, select the Extensions icon, and this time, your extension will appear in the _Installed folder_, click on the _**Gear icon**_ and navigate to _Extensions Setting_
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 3. Manage Extensions
|
|
|
|
|
After installing and using your extension, vscode.dev offers options to manage your extension based on different needs. For example, you may choose to:
|
|
|
|
|
- **Disable:** _(You temporarily disable an extension when you no longer need it but don't want to uninstall it completely)_
|
|
|
|
|
|
|
|
|
|
Select the installed extension on the expanded activity bar > click the Gear icon > select 'Disable' or 'Disable (Workspace)' **OR** Open the extension on the code area and click the blue Disable button.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- **Uninstall:** Select installed extension on the expanded activity bar > click the Gear icon > select 'Uninstall' **OR** Open the extension on the code area and click the blue Uninstall button.
|
|
|
|
|
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](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
|
|
|
|
|
|
|
|
|
|
## Assignment
|
|
|
|
|
[Create a resume website using vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
|
|
|
|
|
***
|
|
|
|
|
|
|
|
|
|
## Further Exploration and Self-Study
|
|
|
|
|
|
|
|
|
|
<!----
|
|
|
|
|
## Post-Lecture Quiz
|
|
|
|
|
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/4)
|
|
|
|
|
---->
|
|
|
|
|
- Dive deeper with [the official VSCode Web Docs](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza).
|
|
|
|
|
- Explore advanced workspace features, keyboard shortcuts, and settings.
|
|
|
|
|
|
|
|
|
|
## Review & Self Study
|
|
|
|
|
***
|
|
|
|
|
|
|
|
|
|
Read more about [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) and some of its other features.
|
|
|
|
|
**Now you’re ready to code, create, and collaborate—from anywhere, on any device, using VSCode.dev!**
|
|
|
|
|
|
MR.NOBODY
2 months ago
committed by
GitHub