Web-Dev-For-Beginners/translations/en/8-code-editor/1-using-a-code-editor

Using a code editor

This lesson introduces the basics of using VSCode.dev, a web-based code editor, so you can modify your code and contribute to a project without needing to install anything on your computer.

Learning objectives

In this lesson, you will learn how to:

• Use a code editor in a coding project
• Track changes with version control
• Customize the editor for development

Prerequisites

Before starting, you need to create an account on GitHub. Visit GitHub and sign up if you don’t already have an account.

Introduction

A code editor is a vital tool for writing programs and collaborating on coding projects. Once you understand the basics of an editor and how to use its features, you can apply them to your coding tasks.

Getting started with VSCode.dev

VSCode.dev is a web-based code editor. You don’t need to install anything to use it—just open it like any other website. To get started, visit https://vscode.dev. If you’re not signed in to GitHub, follow the prompts to log in or create a new account.

Once it loads, the interface should look something like this:

There are three main sections, from left to right:

1. The activity bar, which includes icons like the magnifying glass 🔎, the gear ⚙️, and others.
2. The expanded activity bar, which defaults to the Explorer, also called the side bar.
3. The code area on the right.

Click on each icon to explore different menus. When finished, return to the Explorer to start where you began.

When you create or modify code, it will happen in the large area on the right. This is also where you’ll view existing code, as you’ll see next.

Open a GitHub repository

To begin, you need to open a GitHub repository. There are several ways to do this. Below are two methods for opening a repository so you can start making changes.

1. Using the editor

You can open a remote repository directly from the editor. When you visit VSCode.dev, you’ll see an "Open Remote Repository" button:

Alternatively, you can use the command palette. The command palette is a search box where you can type commands or actions to find and execute them. Open it by selecting View from the top-left menu, then choosing Command Palette, or by using the keyboard shortcut Ctrl-Shift-P (on macOS, Command-Shift-P).

Once the menu opens, type open remote repository and select the first option. You’ll see a list of repositories you’re part of or have recently opened. You can also paste a full GitHub URL into the box. Use the following URL:

https://github.com/microsoft/Web-Dev-For-Beginners

✅ If successful, the repository’s files will load in the text editor.

2. Using the URL

You can also load a repository directly using its URL. For example, the full URL for the current repository is https://github.com/microsoft/Web-Dev-For-Beginners. Replace the GitHub domain with VSCode.dev/github to load the repository directly. The resulting URL would be https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.

Edit files

Once the repository is open in your browser or vscode.dev, the next step is to make updates or changes to the project.

1. Create a new file

You can create a file in an existing folder or in the root directory. To create a new file, navigate to the desired location, click the 'New file ...' icon in the activity bar (on the left), name the file, and press Enter.

2. Edit and save a file in the repository

Using vscode.dev is convenient for making quick updates to your project without installing software locally. To update your code, click the Explorer icon in the activity bar to view the repository’s files and folders. Select a file to open it in the code area, make your changes, and save.

After updating your project, click the source control icon to view all the changes you’ve made to the repository.

To review your changes, select the file(s) in the Changes folder in the expanded activity bar. This will open a 'Working Tree' where you can visually inspect the changes. Red indicates deletions, while green shows additions.

If you’re satisfied with your changes, hover over the Changes folder and click the + button to stage them. Staging prepares your changes for committing to GitHub.

If you want to discard certain changes, hover over the Changes folder and click the undo icon.

Finally, type a commit message (a description of your changes), click the check icon to commit and push your changes.

When you’re done, click the hamburger menu icon in the top-left corner to return to the repository on github.com.

Using extensions

Extensions in VSCode add new features and customization options to improve your development workflow. They also provide support for multiple programming languages and can be either general-purpose or language-specific.

To browse available extensions, click the Extensions icon in the activity bar and type the extension’s name in the 'Search Extensions in Marketplace' field. You’ll see a list of extensions, each showing the extension name, publisher, a brief description, download count, and star rating.

You can also view:

• Previously installed extensions in the Installed folder
• Popular extensions in the Popular folder
• Recommended extensions based on your workspace or recently opened files in the Recommended folder

1. Install Extensions

To install an extension, type its name in the search field. Once it appears, click it to view more details in the code area. Then, click the blue install button in either the activity bar or the code area.

2. Customize Extensions

After installing an extension, you may want to adjust its settings. To do this, click the Extensions icon, find your extension in the Installed folder, click the Gear icon, and navigate to Extensions Setting.

3. Manage Extensions

You can manage your extensions based on your needs. For example:

• Disable: Temporarily turn off an extension without uninstalling it.
  To disable, select the installed extension in the activity bar, click the Gear icon, and choose 'Disable' or 'Disable (Workspace).' Alternatively, open the extension in the code area and click the blue Disable button.

• Uninstall: Remove an extension completely.
  To uninstall, select the installed extension in the activity bar, click the Gear icon, and choose 'Uninstall.' Alternatively, open the extension in the code area and click the blue Uninstall button.

---

Assignment

Create a resume website using vscode.dev

Review & Self Study

Learn more about VSCode.dev and its additional features.

---

Disclaimer:
This document has been translated using the AI translation service Co-op Translator. While we strive for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.