Udostępnij za pośrednictwem


Używanie rozszerzenia Visual Studio Code

Visual Studio Code jest wydajnym edytorem kodu źródłowego, który działa na komputerze. Jest on dostępny dla systemów Windows, macOS i Linux. Jest wyposażony we wbudowaną obsługę JavaScript, TypeScript i Node.js i ma bogaty ekosystem rozszerzeń dla innych języków (takich jak C ++, C#, Java, Python, PHP i Go) i środowiskach uruchomieniowych (takich jak .NET i Unity). Więcej informacji znajduje się w temacie Rozpoczęcie pracy z VS Code.

Visual Studio Code pozwala rozszerzyć możliwości poprzez rozszerzenia. Rozszerzenia Visual Studio Code mogą dodać więcej funkcji do ogólnego doświadczenia. Wraz z udostępnieniem tej funkcji możesz teraz używać rozszerzenia Visual Studio Code do pracy z Power Pages.

Rozszerzenie Visual Studio Code dla Power Pages

Narzędzia Power Platform Tools dodają możliwość konfigurowania portali przy użyciu Visual Studio Code oraz używania wbudowanego języka Liquid IntelliSense, który umożliwia ukończenie kodu, pomoc i podaje wskazówki podczas dostosowywania interfejsu portali przy użyciu kodu Visual Studio Code. Przy użyciu rozszerzenia Visual Studio Code można także konfigurować portale za pośrednictwem Microsoft Power Platform CLI.

Uwaga

  • Należy się upewnić, że plik node.js jest pobierany i instalowany na tym samym komputerze, co Visual Studio Code, aby funkcje Power Pages działały.
  • Upewnij się, że zainstalowano tylko Power Platform Tools, a nie Power Platform Tools i Power Platform Tools [WERSJA ZAPOZNAWCZA]. Zobacz temat Znane problemy w celu uzyskania szczegółowych informacji.

Animacja wyjaśniająca sposób instalowania i ustawianie narzędzi Power Platform Tools.

Wymagania wstępne

Przed użyciem rozszerzenia Visual Studio Code dla Power Pages należy:

Zainstaluj rozszerzenie Visual Studio Code

Po zainstalowaniu programu Visual Studio Code należy zainstalować rozszerzenie wtyczki Power Platform Tools dla programu Visual Studio Code.

Aby zainstalować rozszerzenie Visual Studio Code:

  1. Otwórz Visual Studio Code.

  2. W lewym okienku wybierz pozycję Rozszerzenia.

    Rozszerzenie Visual Studio Code.

  3. Wybierz ikonę Ustawienia z prawej strony górnej okienka rozszerzeń.

  4. Wyszukaj i wybierz opcję Narzędzia Power Platform Tools.

    Wybierz narzędzia Power Platform Tools.

  5. Wybierz Zainstaluj.

  6. Na podstawie komunikatów statusu sprawdź, czy rozszerzenie zostało zainstalowane pomyślnie.

Pobieranie zawartości witryny

Aby uwierzytelnić się w środowisku Microsoft Dataverse i pobrać zawartość witryn, zapoznaj się z samouczkiem Używanie Microsoft Power Platform CLI z Power Pages — pobieranie zawartości witryn.

Napiwek

Rozszerzenie Narzędzia Power Platform Tools automatycznie włącza używanie poleceń Microsoft Power Platform CLI z Visual Studio Code za pośrednictwem zintegrowanego terminalu Visual Studio.

Ikony pliku

Rozszerzenie Visual Studio Code dla Power Pages automatycznie identyfikuje i pokazuje ikony dla plików i folderów wewnątrz zawartości pobranych witryn.

Lista plików w szablonie startowym z motywem ikon plików specyficznym dla witryn.

Program Visual Studio Code używa domyślnego motywu ikony pliku, który nie zawiera ikon specyficznych dla Power Pages. Aby wyświetlić ikony plików specyficzne dla witryn, musisz zaktualizować wystąpienie Visual Studio Code, aby użyć motywu ikony pliku specyficznego dla Power Pages.

Aby włączyć motyw ikony pliku specyficznego dla portali:

  1. Otwórz Visual Studio Code.

  2. Przejdź do Plik>Ustawienia>Motyw>Motyw ikony pliku

  3. Wybierz motyw ikon portali PowerApps.

    Wybierz motyw ikon portali Power Apps Portals.

Podgląd na żywo

Rozszerzenie Visual Studio Code umożliwia podgląd na żywo zawartości Power Pages w interfejsie Visual Studio Code podczas pracy nad projektem.

Aby wyświetlić podgląd, wybierz przycisk Przycisk Podgląd. w prawym górnym rogu, gdy w programie zostanie otwarty plik HTML w trybie edycji.

Podgląd strony.

Okienko podglądu zostanie otwarte po prawej stronie edytowanej strony.

Ekran z listą plików, otwartym plikiem w edytorze Visual Studio Code i podglądem po prawej stronie.

Funkcja podglądu wymaga, aby inne pliki były również otwarte w tej samej sesji Visual Studio Code, które tworzą znaczniki HTML dla podglądu do wyświetlenia. Na przykład, jeśli za pomocą Visual Studio Code otworzysz tylko plik HTML bez struktury folderów, zobaczysz następujący komunikat.

Uruchamianie polecenia złożonego: 'microsoft-powerapps-portals.preview-show' nie powiodło się.

W przypadku wystąpienia tego problemu otwórz folder przy użyciu folderu Plik > Otwórz i wybierz pobrany folder zawartości witryny do otwarcia przed ponowną próbą wyświetlenia podglądu.

Autouzupełnianie

Funkcja autocomplete w rozszerzeniu Visual Studio Code pokazuje bieżący kontekst, który jest edytowany, oraz odpowiednie elementy autocomplete poprzez IntelliSense.

Przykład autouzupełniania dla ID szablonu strony.

Znaczniki Liquid

Podczas dostosowywania pobranej zawartości za pomocą Visual Studio Code możesz teraz używać IntelliSense dla znaczników Liquid Power Pages.

Zacznij od wpisywania i zostanie wyświetlona lista tagów Liquid, po wybraniu znacznika będzie on poprawnie sformatowany i gotowy do większej liczby informacji.

Wstawka z przykładem uzupełnienia znacznika Liquid.

Obiekty Liquid

Możesz zobaczyć wypełnienia kodów obiektu Liquid po wprowadzeniu {{ }}. Po umieszczeniu kursora między kursorami, wybierz opcję <CTRL + space> w celu wyświetlania listy obiektów Liquid, które można wybrać. Jeśli obiekt ma więcej właściwości, można wprowadzić . i następnie zaznacz ponownie opcję <CTRL + space>, aby wyświetlić określone właściwości obiektu Liquid.

Wprowadzanie obiektu Liquid.

Tagi szablonów

Sugestie dotyczące szablonów Power Pages sieci Web można wyświetlić, umieszczając kursor w instrukcji {include ' '} i wybierając opcję <CTRL> - space. Zostanie wyświetlona lista istniejących szablonów sieci Web, z których można wybrać.

Tagi szablonu.

Tworzenie, usuwanie i zmienianie nazw obiektów witryny sieci Web

Z poziomu Visual Studio Code można tworzyć, usuwać i zmieniać nazwy następujących składników witryny sieci Web:

  • Strony internetowe
  • Szablony stron
  • Szablony sieci Web
  • Wstawki zawartości
  • Nowe zasoby (pliki sieci Web)

Tworzenie operacji

Za pomocą menu kontekstowego można tworzyć nowe składniki witryny sieci Web, wybierać prawym przyciskiem myszy jeden z obsługiwanych obiektów, wybrać Power Pages i wybrać typ obiektu witryny internetowej, który chcesz utworzyć.

Możesz również użyć polecenia Visual Studio Code, wybierając polecenie Ctrl + Shift + P.

Utwórz nowy obiekt.

Aby utworzyć obiekt, należy podać więcej parametrów.

Objekt Parametry
Strony internetowe Nazwa, szablon strony, strona nadrzędna
Szablony stron Nazwa, szablon sieci Web
Szablony sieci Web Nazwa/nazwisko
Wstawki zawartości Nazwa, a jeżeli będą to dokumenty HTML lub tekst.
Nowe zasoby (pliki sieci Web) Nazwa, strona nadrzędna i wybierz plik do przekazania.

Zmiana nazwy i usuwanie operacji

W nawigacji po plikach można użyć menu kontekstowego, aby zmienić nazwy lub usunąć składniki Power Pages.

Uwaga

Usunięte obiekty można przywrócić z kusza na śmieci na pulpicie.

Ograniczenia

Obecnie istnieją następujące ograniczenia dotyczące narzędzi Power Platform Tools dla portali:

Zobacz też

Wsparcie Power Pages dla Microsoft Power Platform CLI (wersja zapoznawcza)