leestott
88264e8bfd
|
2 months ago | |
|---|---|---|
| .. | ||
| README.md | 2 months ago | |
| assignment.md | 3 months ago | |
README.md
Korzystanie z edytora kodu: Opanowanie VSCode.dev
Witamy!
Ta lekcja przeprowadzi Cię od podstaw do zaawansowanego korzystania z VSCode.dev—potężnego, przeglądarkowego edytora kodu. Nauczysz się pewnie edytować kod, zarządzać projektami, śledzić zmiany, instalować rozszerzenia i współpracować jak profesjonalista—wszystko z poziomu przeglądarki, bez konieczności instalacji.
Cele nauki
Po ukończeniu tej lekcji będziesz potrafić:
- Efektywnie korzystać z edytora kodu w dowolnym projekcie, gdziekolwiek jesteś
- Bezproblemowo śledzić swoją pracę dzięki wbudowanej kontroli wersji
- Personalizować i usprawniać swój proces tworzenia dzięki dostosowaniom edytora i rozszerzeniom
Wymagania wstępne
Aby rozpocząć, załóż darmowe konto na GitHub, które pozwoli Ci zarządzać repozytoriami kodu i współpracować z ludźmi na całym świecie. Jeśli jeszcze nie masz konta, utwórz je tutaj.
Dlaczego warto korzystać z edytora kodu w przeglądarce?
Edytor kodu, taki jak VSCode.dev, to Twoje centrum dowodzenia do pisania, edytowania i zarządzania kodem. Dzięki intuicyjnemu interfejsowi, mnóstwu funkcji i natychmiastowemu dostępowi przez przeglądarkę możesz:
- Edytować projekty na dowolnym urządzeniu
- Uniknąć problemów związanych z instalacją
- Współpracować i wnosić wkład natychmiastowo
Gdy opanujesz VSCode.dev, będziesz gotowy do realizacji zadań programistycznych z dowolnego miejsca i o każdej porze.
Pierwsze kroki z VSCode.dev
Przejdź do VSCode.dev—bez instalacji, bez pobierania. Logowanie za pomocą GitHub odblokowuje pełny dostęp, w tym synchronizację ustawień, rozszerzeń i repozytoriów. Jeśli pojawi się komunikat, połącz swoje konto GitHub.
Po załadowaniu, Twoje środowisko pracy będzie wyglądać tak:
, ⚙️ (Ustawienia), pliki, kontrola źródła itp.
- Panel boczny: Zmienia kontekst w zależności od wybranej ikony na pasku aktywności (domyślnie Eksplorator, aby wyświetlić pliki).
- Obszar edytora/kodu: Największa sekcja po prawej—tu będziesz edytować i przeglądać kod.
Klikaj ikony, aby odkrywać funkcje, ale wróć do Eksploratora, aby zachować orientację.
Otwieranie repozytorium GitHub
Metoda 1: Z poziomu edytora
-
Przejdź do VSCode.dev. Kliknij "Open Remote Repository."
.
 i naciśnij Enter.
Jeśli wszystko się powiedzie, zobaczysz cały projekt załadowany i gotowy do edycji!
Metoda 2: Natychmiast przez URL
Przekształć dowolny URL repozytorium GitHub, aby otworzyć go bezpośrednio w VSCode.dev, zastępując github.com przez vscode.dev/github.
Np.:
- GitHub:
https://github.com/microsoft/Web-Dev-For-Beginners - VSCode.dev:
https://vscode.dev/github/microsoft/Web-Dev-For-Beginners
Ta funkcja znacznie przyspiesza dostęp do dowolnego projektu.
Edytowanie plików w projekcie
Gdy Twoje repozytorium jest otwarte, możesz:
1. Utworzyć nowy plik
- W panelu Eksploratora przejdź do wybranego folderu lub użyj katalogu głównego.
- Kliknij ikonę ‘New file ...’.
- Nazwij plik, naciśnij Enter, a plik pojawi się natychmiast.
 i usunięcia (czerwone).
![Zobacz zmiany](../images/working-tree.png zmiany, klikając+obok plików, aby przygotować je do zatwierdzenia. - Odrzuć niechciane zmiany, klikając ikonę cofania.
- Wpisz jasny komunikat zatwierdzenia, a następnie kliknij znaczek, aby zatwierdzić i wypchnąć zmiany.
Aby wrócić do swojego repozytorium na GitHub, wybierz menu hamburgerowe w lewym górnym rogu.
![Zatwierdź zmiany](../images/edit-vscode.dev Rozszerzenia
Rozszerzenia pozwalają dodawać języki, motywy, debugery i narzędzia zwiększające produktywność do VSCode.dev—ułatwiając i uprzyjemniając pracę z kodem.
Przeglądanie i zarządzanie rozszerzeniami
-
Kliknij ikonę Rozszerzenia na pasku aktywności.
-
Wyszukaj rozszerzenie w polu 'Search Extensions in Marketplace'.
![Szczegóły rozszerzenia](../images/extension-details:
- Zainstalowane: Wszystkie dodane rozszerzenia
- Popularne: Ulubione w branży
- Polecane: Dostosowane do Twojego stylu pracy
![Zobacz rozszerzenia](
1. Instalowanie rozszerzeń
-
Wpisz nazwę rozszerzenia w wyszukiwarce, kliknij je i przejrzyj szczegóły w edytorze.
-
Naciśnij niebieski przycisk Instaluj w panelu bocznym lub w głównym obszarze kodu.
![Instaluj rozszerzenia](../images/install-extension 2. Dostosowywanie rozszerzeń
-
Znajdź zainstalowane rozszerzenie.
-
Kliknij ikonę Koła zębatego → wybierz Ustawienia rozszerzenia, aby dostosować jego działanie do swoich potrzeb.
![Modyfikuj ustawienia rozszerzenia](../images/extension-settings 3. Zarządzanie rozszerzeniami Możesz:
-
Wyłączyć: Tymczasowo wyłączyć rozszerzenie, pozostawiając je zainstalowane
-
Odinstalować: Trwale usunąć, jeśli nie jest już potrzebne
Znajdź rozszerzenie, kliknij ikonę Koła zębatego i wybierz ‘Wyłącz’ lub ‘Odinstaluj’, albo użyj niebieskich przycisków w obszarze kodu.
Zadanie
Sprawdź swoje umiejętności: Stwórz stronę CV za pomocą vscode.dev
Dalsze eksplorowanie i samodzielna nauka
- Zgłębiaj temat dzięki oficjalnej dokumentacji VSCode Web.
- Odkrywaj zaawansowane funkcje środowiska pracy, skróty klawiaturowe i ustawienia.
Teraz jesteś gotowy, aby kodować, tworzyć i współpracować—z dowolnego miejsca, na dowolnym urządzeniu, korzystając z VSCode.dev!
Zastrzeżenie:
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI Co-op Translator. Chociaż dokładamy wszelkich starań, aby tłumaczenie było precyzyjne, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego języku źródłowym powinien być uznawany za wiarygodne źródło. W przypadku informacji o kluczowym znaczeniu zaleca się skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.