Visual Studio Code to bardzo popularny, darmowy edytor kodu, który dla większości deweloperów stanowi podstawowe narzędzie do pracy. Jest to rozwiązanie open source stworzone przez firmę Microsoft. Obsługuje składnię chyba wszystkich istniejących języków programowania. Można go konfigurować przez wiele rozszerzeń (po ang. Extensions), zarówno tych oficjalnych jak i utworzonych przez osoby trzecie (entuzjastów). Ja przeważnie koduję webowo w PHP i do tego mieszam to z HTML, CSS i Javascipt. W dzisiejszym wpisie pokażę jak uruchomić serwer, który pozwoli nam używać VS Code przez przeglądarkę.

Uruchomienie kontenera code-server

Visual Studio Code można uruchomić na serwerze ODROID/RPi przy pomocy narzędzia „code-server”. Do poprawnej pracy code-server wymaga instalacji NodeJS w odpowiedniej wersji, co nie jest takie oczywiste, bo konkretna wersja code-server’a potrzebuje konkretnej wersji pakietu NodeJS – ani niższej ani wyższej… Dla przykładu, code-server w wersji 4.4.0 potrzebuje NodeJS w wersji 16, mimo tego, że najnowsza to w tym momencie 18. Do tego code-server instaluje się przy pomocy menedżera pakietów o nazwie „yarn”, którego instaluje się innym menedżerem pakietów o nazwie „npm”. Przed uruchomieniem trzeba jeszcze skonfigurować odpowiedni plik „.yaml” i dopiero można uruchomić serwer. Brzmi na dość skomplikowane, prawda? Trzeba przyznać, że trochę tak, dlatego my zrobimy to przy pomocy gotowego obrazu Dockera.

Standardowo do utworzenia kontenera wykorzystamy jedno dłuższe polecenie:
docker run -d \
--name=code-server \
-e PUID=1000 \
-e PGID=1000 \
-e PASSWORD=[hasło do code-server'a]  \
-e SUDO_PASSWORD=[hasło root do code-server'a]  \
-p 84:8443 \
--restart unless-stopped \
linuxserver/code-server:latest
Kontener nazwaliśmy „code-server”. Dwa parametry „-e” to hasła, których ustawianie nie jest obowiązkowe, ale zalecane w celu zabezpieczenia interfejsu webowego. Port 8443 kontenera przekierowujemy na port 84 serwera, bo porty od 81 do 83 zajęliśmy w poprzednich wpisach. Używamy obrazu „linuxserver/code-server”, którego dokumentacja dostępna jest pod tym linkiem.

Jak zawsze sprawdzamy poprawność uruchomienia kontenera poleceniem:
docker ps
Jeżeli wszystko wygląda OK, to przechodzimy do przeglądarki i wpisujemy adres „192.168.88.7:84”. Na wstępie zostaniemy poproszeni o podanie hasła, o ile oczywiście podaliśmy jakieś podczas tworzenia kontenera.

---

Edytowanie stron przez FTP

Ja swojego VS Code zawsze łączę bezpośrednio z hostingiem, na którym stoją moje strony internetowe. Właśnie taki scenariusz opiszę w tym wpisie. Komunikacja odbywa się przez FTP/SFTP i umożliwia edycję plików na hostingu w czasie rzeczywistym. Do wykonania połączenia potrzebne jest nam rozszerzenie o nazwie „SFTP”, którego autorem jest „Natizyskunk”. W celu jego instalacji wybieramy na pasku po lewej zakładkę „Extensions” i w polu wyszukiwania wpisujemy „SFTP”. Rozszerzenie, które nas interesuje powinno wyskoczyć na pierwszym miejscu, wybieramy je i naciskamy przycisk „Install”. Po pomyślnej instalacji na pasku po lewej powinna nam się pojawić nowa zakładka podpisana „SFTP”. Teraz musimy przejść do „Command Palette…”, które wywołuje się kombinacją przycisków Command+Shift+P (na urządzeniach Apple), CTRL+Shift+P (na Windows) lub poprzez ikonę „trybika” podpisaną „Manage” znajdującą się na samym dole paska po lewej. Wyskoczy nam okienko podobne do okna wyszukiwania, w którym wpisujemy „SFTP: Config” i potwierdzamy ENTERem. Spowoduje to utworzenie pliku konfiguracyjnego rozszerzenia SFTP o nazwie „sftp.json”. Wypełniamy go następująco danymi do logowania na serwer FTP hostingu:
{
"name": "[nazwa serwera FTP]",
"host": "[adres serwera]",
"protocol": "[protokół jakim chcemy się połączyć - wypełnij ftp lub sftp]",
"port": [port - wypełnij 21 (dla FTP) lub 22 (dla SFTP)],
"username": "[login FTP]",
"password": "[hasło FTP]"
"remotePath": "/",
"uploadOnSave": true,
"useTempFile": false,
"openSsh": false
}
Tak wypełniony plik „sftp.json” możemy zapisać i zamknąć. Zostanie on zachowany w „Workspace -> .vscode”. Teraz możemy przejść do zakładki SFTP dostępnej w pasku po lewej i naszym oczom powinna ukazać się zawartość serwera FTP, do którego chcieliśmy się połączyć. Otwórzmy teraz przykładowy plik i spróbujmy zmienić jego zawartość. Niestety dostaniemy komunikat „Cannot edit in read-only editor” i nie będzie można zmienić zawartości pliku. Aby móc go edytować trzeba otworzyć jego menu kontekstowe (prawy przycisk myszy na jego nazwie) i wybrać opcję „Edit in Local”. Tak jak mówiłem wcześniej przy konfiguracji parametru „uploadOnSave” ustawionej na „true” pliki przy każdym zapisaniu (np. skrótem Command/CTRL+S) zostają automatycznie zaktualizowane na serwerze FTP.

To tylko jeden z przykładów wykorzystania Visual Studio Code. Wierzę, że jeżeli planujesz z niego korzystać to wiesz jak skonfigurować go pod siebie lub zamierzasz się tego nauczyć. Tak jak mówiłem paleta zastosowania tego narzędzia jest bardzo szeroka, więc na pewno każdy znajdzie coś dla siebie. A planując karierę dewelopera znajomość VS Code to podstawa.

Jeżeli materiał zawarty w tym wpisie jest dla Ciebie wartościowy i masz ochotę wesprzeć moją pracę to zapraszam na mój profil na >Patronite<. Zachęcam także do odwiedzenia mojej strony >tomaszdunia.pl<. Możesz także zagadać do mnie na Twitterze >@theto3k<.

---

Kategorie: Dla początkujących,Poradniki,Usługi - @ 2022-07-15 18:00

Tagi: code-server, CSS, deweloper, docker, FTP, Javascript, Microsoft, NodeJS, npm, ODROID, PHP, port 84, programowanie, RaspberryPi, sftp, Visual Studio Code, VS Code, yaml, yarn