Od zera do extension – cz. 1 Visual Studio Code

Jak być może wiesz, wraz z Dynamics 365 Business Central, Development Environment odchodzi do lamusa, tak samo jak i język programowania, z którego korzystamy dzisiaj czyli C/AL. Od wersji Dynamics NAV 2018 możemy tworzyć Extensions 2.0 – jest to przedsmak tego co w ciągu najbliższych dwóch lat stanie się standardem. Mowa tutaj o języku AL, oraz nowym środowisku programistycznym – Visual Studio Code. Zanim jednak zaczniemy instalację nowego środowiska opowiem o nim kilka słów.

Wprowadzenie do Visual Studio Code

Visual Studio Code to lekki multi-platformowy edytor kodu źródłowego. Działa on na systemach Windows, Linux i MacOS. Posiada wbudowane wsparcie dla JavaSciptu, TypeScriptu i Node.js, ale jego główną siłą jest możliwość rozszerzania dzięki wtyczkom. Z łatwością przekształcimy go nie tylko w edytor AL, ale także innych popularnych składni. Dodatkowymi narzędziami dostępnymi w VS Code są: debugger, analizatory kodu, skórki i snippetsy. To wszystko w połączeniu z natywnym wsparciem systemu kontroli wersji Git daje nam świetne narzędzie i przenosi w końcu programowania NAV do XXI wieku.

Uwaga!

Visual Studio Code – nie ma nic wspólnego z pakietem „Visual Studio” (poza mylącą nazwą). Ale nie bądź zawiedziony tym, że to tylko edytor tekstu 😉 – z czasem zrozumiesz jego zalety.

Podstawy i interfejs

Wersję instalacyjną należy pobrać ze strony: https://code.visualstudio.com/

Po zainstalowaniu uruchom Visual Studio Code – rozejrzymy się trochę…

  1. Menu
  2. Eksplorator plików w projekcie (aktualnym folderze)
  3. Wyszukiwarka
  4. Kontrola źródła (Git)
  5. Debugger
  6. Dodatki
  7. Zakładki (obszar roboczy)
  8. Przydatne linki na początek – naprawdę warto!

Teraz korzystając z menu utwórz nowy plik.

  1. Panel boczny
  2. Edytor wraz zakładkami w których otwierane są poszczególne pliki
  3. Minimapa
  4. Pasek statusu

Uwaga!

Pod edytorem mogą znajdować się panele – takie jak konsola, wyjście kompilatora czy debuggera, ale to zobaczysz w następnych wpisach.

Więcej podstawowych informacji na temat interfejsu znajdziesz w następującym miejscu: https://code.visualstudio.com/docs/getstarted/userinterface.

Paleta komend (Command Pallet)

To najważniejsza cecha Visual Studio Code. Zapamiętaj raz na zawsze skrót CTRL+SHIFT+P – w ten sposób będziesz używał tego nowego środowiska. Cokolwiek będziesz chciał zrobić będziesz zaczynał od palety komend!

Spróbuj sam – naciśnij CTRL+STHIFT+P i zacznij pisać „Zen Mode” i wybierz komendę „Toggle Zen Mode” – aby wrócić do poprzedniego widoku wykonaj to samo polecenie.

Udało się? To idziemy dalej…

Uruchom paletę komend i wpis „New Untitled File” i utwórz nowy plik.

Następnie korzystając z palety komend i „Save As” zapisz go jako „index.html„.

Myślę, że jesteś gotowy poznać kolejną mocną stronę VS Code dlatego kontynuuj czytanie i nie zamykaj twojego pliku index.html.

Jeżeli użyjesz skrótu CTRL+P – zamiast palety komend otworzy się wyszukiwarka plików zawartych w aktualnym projekcie.

Snippets

Snippets – to powtarzalne fragmenty kodu wielokrotnego użycia. Ponieważ nie zainstalowaliśmy jeszcze rozszerzenia do języka AL, sprawdźmy jak działają na przykładzie składni HTML’a.

Zacznij edycję swojego pliku index.html od wpisania w pierwszej linii słowa „html”, z podpowiadanych opcji wybierz html:5 – jest to snippet ze zdefiniowanym szablonem dokumentu html5. Po jego wybraniu w twoim pliku pojawi się treść. Teraz zanim klikniesz coś dalej korzystaj z przycisku TAB (tabulacji), aby kolejno wypełniać elementy szablonu.

Jeżeli chodzi o Snippetsy to nie tylko możesz korzystać z gotowych – możesz je także tworzyć samemu, ale o tym więcej przeczytasz tutaj: https://code.visualstudio.com/docs/editor/userdefinedsnippets

Podsumowanie

To co Ci dzisiaj pokazałem to jedynie namiastka możliwości i podstawowej wiedzy. Te niezbędne elementy będą nam jednak potrzebne do stworzenie pierwszego Extension 2.0. Podczas całego cyklu będzie pokazywał Visual Studio Code i jego możliwości, dzisiejszy wpis to tylko początek.

W oczekiwaniu na kolejną część zachęcam do przejrzenia materiałów zawartych na następującej stronie: https://code.visualstudio.com/docs

 

Część 2 – PowerShell

Zostaw odpowiedź

Twój adres e-mail nie zostanie opublikowany Wymagane pola są zaznaczone *