info/Web-Dev-For-Beginners
1
0
Fork 0
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git synced 2025-08-08 15:56:44 +02:00
Code Issues Projects Releases Wiki Activity

initial draft on editing files on vscode.dev

Browse Source
This commit is contained in:
Julia
2022-09-25 20:24:54 +03:00
parent 1bd15744da
commit 91e06a4e3c
5 changed files with 31 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
8-code-editor/1-using-a-code-editor/README.md
View File

@@ -75,11 +75,39 @@ https://github.com/microsoft/Web-Dev-For-Beginners
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).
Open a repository on github.com and hit the . button on your keyboard to swap the github.com domain with the vscode.dev domain instantly.
✅ If succesful, you'll see all files for this repository loaded in the text editor.
## 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.
a) Create a new file
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, give it a name and hit enter.
![Create a new file](../images/create-new-file.png)
b) Edit and save a file on the repository
Using vscode.dev is helpful whenever you want to make quick updates to your project without having to load any software on your computer.
To update your code, click the 'Explorer' icon to view files & folders in the repository.
Select a file to open it on the screen and make your changes.
![Edit a file](../images/edit-a-file.png)
Once you are done updating your project, select the _'source control'_ icon which contains all the new changes you have made to your repository.
To view the changes you made to your project, select the file(s) in the 'Changes' folder. This will open a 'Working Tree' for you to visually see the changes you made to the file. Red shows an ommission to the project, while green signifies an addition.
![View changes](../images/working-tree.png)
If you are safisfied 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.
If however you are not comfortable with some changes and you want to discard them, hover on the 'Changes' folder and select the undo icon.
Then, type in a commit message _(A description of the change you have made to the project)_ and commit your changes by clicking the 'tick'.
Once done working on your project, select the hamburger menu icon at the top left to return to the repository on GitHub.
![Stage & commit changes](../images/EditVSCode.dev.gif)
## Using extensions