Miesięcznik informatyków i menedżerów IT sektora publicznego

Paweł Ziółkowski

Nowoczesne kodowanie z JavaScript

Babel, framework, polyfill, webpack to tylko niektóre nowe pojęcia w słownikach programistów JavaScript. Coraz większa popularność tego języka programowania przyczyniła się do powstania i upowszechnienia wielu pomocnych rozwiązań.

Obecnie programowanie to nie tylko pisanie kodu w notatniku czy prostym edytorze, ale też używanie całych środowisk wraz z lokalnymi serwerami i wieloma narzędziami wykorzystującymi frameworki i biblioteki, które powstają ostatnio bardzo często i w szybkim tempie. W kontrze do tego rozwoju pozostają niektóre stare rozwiązania. Przykładowo pewne przeglądarki nie radzą sobie z nowościami wprowadzanymi przez programistów, co sprawia, że trzeba dostosowywać pisany kod. 

Szybki rozwój sprawił, że współczesny developer ma do dyspozycji wiele ciekawych instrumentów. Część z nich pokrótce przedstawimy w artykule. 

Edytor Visual Studio Code 

Tworzenie kodu programów i stron może nam ułatwić edytor kodu. Dobry program tego typu ułatwi m.in. pisanie kodu, poinformuje o błędach, a także podpowie składnię języka i ścieżki do zasobów. Wykorzystanie odpowiedniego IDE (integrated development environment – zintegrowane środowisko programistyczne) zmniejszy liczbę błędów w kodzie i skróci czas pracy. Do wyboru mamy wiele rozwiązań – od darmowych po płatne. Bez ponoszenia kosztów możemy korzystać np. z NetBeans, Eclipse, Atom oraz stworzonego przez Microsoft narzędzia Visual Studio Code (code.visualstudio.com), któremu przyjrzymy się bliżej. 

Visual Studio Code (VSC) jest dostępny dla wielu platform, na otwartej licencji. Poza samym edytorem otrzymujemy dostęp do wielu rozszerzeń, które po instalacji usprawniają działanie programu. Rozszerzenia dostępne są dla wielu języków programowania, więc możemy wykorzystać ten sam program podczas pracy z różnymi technologiami. Otrzymujemy również wsparcie dla systemu kontroli wersji, dzięki któremu można porównywać zmiany w plikach i zarządzać wersjami prosto z edytora, bez konieczności użycia dodatkowej aplikacji. 

Wśród przydatnych pluginów są tzw. boilerplate lub scaffolding, czyli rozszerzenia, które ułatwiają początek pracy z projektami. Ich zadaniem jest tworzenie struktury plików, katalogów lub wstawianie fragmentów kodu (snippetów). Przetestujmy działanie pierwszego rozszerzenia, instalując boilerplate generujący kod HTML. Po instalacji edytora należy wybrać z panelu po lewej ostatni przycisk Extensions ([Ctrl]+[Shift]+[x]) i w polu wyszukiwania wpisać html5. Wybierzmy pierwszy wynik z listy: HTML5 Boilerplate. W głównym oknie zobaczymy pełny opis działania dodatku wraz z instrukcją i wizualizacją jego użycia. Instalacja następuje po kliknięciu Install obok logo dodatku oraz po zresetowaniu edytora. Utwórzmy teraz nowy plik (File | New File lub [Ctrl]+[n]) i zapiszmy go jako HTML. Następnie w polu edycji wpisujemy html5 i z listy wybieramy html5-boilerplate (klawiszem [Enter] lub tabulatorem), przez co uzyskujemy 21 linii kodu, których sami nie musieliśmy pisać. 

Stałe fragmenty kodu 

Często łatwiejszym rozwiązaniem w przypadku stałych fragmentów kodu jest użycie snippetów, które również wstawią odpowiednio zdefiniowany fragment do pliku (tak jak wspominany HTML5 boilerplate), ale dodatkowo dają możliwość dostosowania tych fragmentów do własnych potrzeb. Aby utworzyć snippet, należy wybrać File | Preference | User Snippets, a następnie z wyświetlonej listy wybrać język i pliki, do których będzie miał on zastosowanie (html.json). W otwartym pliku wypełniamy pola wg podpowiedzi z komentarzy: 

"nazwa": {

"prefix": "wartosc-klucza",

"body": [

"Tekst, który będzie wstawiony po wpisaniu klucza",

"Drugi wiersz"

],

"description": "Opis"

}

Aby skorzystać z danego fragmentu, należy w typie wybranego pliku wpisać słowo klucz, prefix i wybrać utworzony tekst.

[...]

Autor jest absolwentem Uniwersytetu Ekonomicznego we Wrocławiu, pracuje jako informatyk w Urzędzie Gminy w Miękini.

Pełna treść artykułu jest dostępna w papierowym wydaniu pisma. Zapraszamy do składania zamówień na prenumeratę i numery archiwalne.
 
 

Polecamy

Biblioteka Informacja Publiczna

Specjalistyczne publikacje książkowe dla pracowników administracji publicznej

więcej