History

leestott 7cfaffabb5 🌐 Update translations via Co-op Translator		7 days ago
..
README.md	🌐 Update translations via Co-op Translator	7 days ago
assignment.md	🌐 Update translations via Co-op Translator	7 days ago

README.md

Korzystanie z edytora kodu

Ta lekcja obejmuje podstawy korzystania z VSCode.dev, edytora kodu działającego w przeglądarce, dzięki któremu możesz wprowadzać zmiany w swoim kodzie i współpracować nad projektem bez konieczności instalowania czegokolwiek na swoim komputerze.

Cele nauki

W tej lekcji nauczysz się:

Korzystać z edytora kodu w projekcie programistycznym
Śledzić zmiany za pomocą systemu kontroli wersji
Dostosowywać edytor do potrzeb programistycznych

Wymagania wstępne

Zanim zaczniesz, musisz założyć konto na GitHub. Przejdź na GitHub i załóż konto, jeśli jeszcze tego nie zrobiłeś.

Wprowadzenie

Edytor kodu to kluczowe narzędzie do pisania programów i współpracy nad istniejącymi projektami programistycznymi. Gdy zrozumiesz podstawy działania edytora i nauczysz się korzystać z jego funkcji, będziesz mógł zastosować tę wiedzę podczas pisania kodu.

Pierwsze kroki z VSCode.dev

VSCode.dev to edytor kodu działający w przeglądarce. Nie musisz niczego instalować, wystarczy otworzyć go jak każdą inną stronę internetową. Aby rozpocząć, otwórz następujący link: https://vscode.dev. Jeśli nie jesteś zalogowany na GitHub, postępuj zgodnie z instrukcjami, aby się zalogować lub utworzyć nowe konto, a następnie zaloguj się.

Po załadowaniu edytora powinien wyglądać podobnie do tego obrazu:

Są trzy główne sekcje, zaczynając od lewej strony i przesuwając się w prawo:

Pasek aktywności, który zawiera kilka ikon, takich jak lupa 🔎, koło zębate ⚙️ i kilka innych.
Rozwinięty pasek aktywności, który domyślnie pokazuje Eksplorator, nazywany paskiem bocznym.
Oraz obszar kodu po prawej stronie.

Kliknij każdą z ikon, aby wyświetlić różne menu. Po zakończeniu kliknij Eksplorator, aby wrócić do punktu wyjścia.

Gdy zaczniesz tworzyć kod lub modyfikować istniejący, będzie to odbywać się w największym obszarze po prawej stronie. W tym obszarze będziesz również przeglądać istniejący kod, co zrobisz w następnej kolejności.

Otwieranie repozytorium GitHub

Pierwszym krokiem jest otwarcie repozytorium GitHub. Istnieje kilka sposobów na otwarcie repozytorium. W tej sekcji poznasz dwa różne sposoby, które pozwolą Ci rozpocząć pracę nad zmianami.

1. Za pomocą edytora

Użyj samego edytora, aby otworzyć zdalne repozytorium. Jeśli przejdziesz na VSCode.dev, zobaczysz przycisk "Open Remote Repository":

Możesz również skorzystać z palety poleceń. Paleta poleceń to pole tekstowe, w którym możesz wpisać dowolne słowo będące częścią polecenia lub akcji, aby znaleźć odpowiednie polecenie do wykonania. Użyj menu w lewym górnym rogu, wybierz Widok, a następnie Paleta poleceń, lub skorzystaj z następującego skrótu klawiaturowego: Ctrl-Shift-P (na MacOS Command-Shift-P).

Po otwarciu menu wpisz open remote repository, a następnie wybierz pierwszą opcję. Pojawią się repozytoria, których jesteś częścią lub które otwierałeś ostatnio. Możesz również użyć pełnego adresu URL GitHub, aby wybrać jedno z nich. Wklej następujący URL do pola tekstowego:

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

✅ Jeśli operacja zakończy się sukcesem, zobaczysz wszystkie pliki tego repozytorium załadowane w edytorze tekstu.

2. Korzystając z URL

Możesz również użyć bezpośredniego adresu URL, aby załadować repozytorium. Na przykład pełny adres URL dla obecnego repozytorium to https://github.com/microsoft/Web-Dev-For-Beginners, ale możesz zamienić domenę GitHub na VSCode.dev/github i załadować repozytorium bezpośrednio. Wynikowy URL będzie wyglądał tak: https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.

Edytowanie plików

Po otwarciu repozytorium w przeglądarce/vscode.dev, kolejnym krokiem będzie wprowadzenie aktualizacji lub zmian w projekcie.

1. Tworzenie nowego pliku

Możesz utworzyć plik w istniejącym folderze lub w katalogu głównym. Aby utworzyć nowy plik, otwórz lokalizację/katalog, w którym chcesz zapisać plik, i wybierz ikonę 'New file ...' na pasku aktywności (po lewej), nadaj mu nazwę i naciśnij Enter.

2. Edytowanie i zapisywanie pliku w repozytorium

Korzystanie z vscode.dev jest przydatne, gdy chcesz szybko zaktualizować swój projekt bez konieczności instalowania oprogramowania lokalnie. Aby zaktualizować kod, kliknij ikonę 'Eksplorator', również znajdującą się na pasku aktywności, aby wyświetlić pliki i foldery w repozytorium. Wybierz plik, aby otworzyć go w obszarze kodu, wprowadź zmiany i zapisz.

Po zakończeniu aktualizacji projektu wybierz ikonę source control, która zawiera wszystkie nowe zmiany wprowadzone w repozytorium.

Aby zobaczyć zmiany wprowadzone w projekcie, wybierz plik(i) w folderze Changes na rozwiniętym pasku aktywności. Otworzy się 'Working Tree', w którym wizualnie zobaczysz zmiany wprowadzone w pliku. Kolor czerwony oznacza usunięcie, a zielony dodanie.

Jeśli jesteś zadowolony ze zmian, które wprowadziłeś, najedź na folder Changes i kliknij przycisk +, aby przygotować zmiany do zatwierdzenia. Przygotowanie oznacza przygotowanie zmian do przesłania na GitHub.

Jeśli jednak nie jesteś zadowolony z niektórych zmian i chcesz je odrzucić, najedź na folder Changes i wybierz ikonę cofnij.

Następnie wpisz commit message (Opis zmian wprowadzonych w projekcie), kliknij ikonę check, aby zatwierdzić i przesłać zmiany.

Po zakończeniu pracy nad projektem wybierz ikonę hamburger menu w lewym górnym rogu, aby powrócić do repozytorium na github.com.

Korzystanie z rozszerzeń

Instalowanie rozszerzeń w VSCode pozwala dodawać nowe funkcje i opcje dostosowania środowiska programistycznego w edytorze, co poprawia przepływ pracy. Te rozszerzenia pomagają również w obsłudze wielu języków programowania i często są albo ogólne, albo specyficzne dla danego języka.

Aby przeglądać listę dostępnych rozszerzeń, kliknij ikonę Extensions na pasku aktywności i zacznij wpisywać nazwę rozszerzenia w polu tekstowym oznaczonym 'Search Extensions in Marketplace'. Zobaczysz listę rozszerzeń, z których każde zawiera nazwę rozszerzenia, nazwę wydawcy, jednozdaniowy opis, liczbę pobrań oraz ocenę w gwiazdkach.

Możesz również zobaczyć wszystkie wcześniej zainstalowane rozszerzenia, rozwijając folder Installed, popularne rozszerzenia używane przez większość programistów w folderze Popular oraz rekomendowane rozszerzenia dla Ciebie, na podstawie użytkowników w tej samej przestrzeni roboczej lub ostatnio otwartych plików w folderze Recommended.

1. Instalowanie rozszerzeń

Aby zainstalować rozszerzenie, wpisz jego nazwę w polu wyszukiwania i kliknij na nie, aby wyświetlić dodatkowe informacje o rozszerzeniu w obszarze kodu, gdy pojawi się na rozwiniętym pasku aktywności.

Możesz kliknąć niebieski przycisk instalacji na rozwiniętym pasku aktywności, aby zainstalować rozszerzenie, lub użyć przycisku instalacji, który pojawia się w obszarze kodu po wybraniu rozszerzenia.

2. Dostosowywanie rozszerzeń

Po zainstalowaniu rozszerzenia możesz potrzebować zmodyfikować jego działanie i dostosować je do swoich preferencji. Aby to zrobić, wybierz ikonę Extensions, a tym razem Twoje rozszerzenie pojawi się w folderze Installed. Kliknij ikonę Gear i przejdź do Extensions Setting.

3. Zarządzanie rozszerzeniami

Po zainstalowaniu i użyciu rozszerzenia vscode.dev oferuje opcje zarządzania rozszerzeniem w zależności od różnych potrzeb. Na przykład możesz:

Wyłączyć: (Tymczasowo wyłącz rozszerzenie, gdy nie jest Ci potrzebne, ale nie chcesz go całkowicie odinstalować)

Wybierz zainstalowane rozszerzenie na rozwiniętym pasku aktywności > kliknij ikonę Gear > wybierz 'Disable' lub 'Disable (Workspace)' LUB Otwórz rozszerzenie w obszarze kodu i kliknij niebieski przycisk Disable.
Odinstalować: Wybierz zainstalowane rozszerzenie na rozwiniętym pasku aktywności > kliknij ikonę Gear > wybierz 'Uninstall' LUB Otwórz rozszerzenie w obszarze kodu i kliknij niebieski przycisk Uninstall.

Zadanie

Stwórz stronę internetową z CV, korzystając z vscode.dev

Przegląd i samodzielna nauka

Przeczytaj więcej o VSCode.dev i jego innych funkcjach.

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 rodzimym języku 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.