Udostępnij za pośrednictwem


Używanie rozszerzenia Visual Studio Code

Visual Studio Code to lekki i wydajny edytor kodu źródłowego dla systemów Windows, macOS i Linux. Obsługuje JavaScript, TypeScript i Node.js oraz posiada bogaty ekosystem rozszerzeń dla innych języków, takich jak C++, C#, Java, Python, PHP i Go, a także środowiska uruchomieniowe, takie jak .NET i Unity. Dowiedz się więcej o Visual Studio Code w Poznaj 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.

Notatka

  • Musisz upewnić się, że node.js jest pobrany i zainstalowany na tej samej stacji roboczej 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.

Wskazówka

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.

Akcje (Power Pages)

Działania Power Pages usprawniają zarządzanie witryną i zmniejsza zależność od poleceń poleceń CLI Microsoft Power Platform. Akcje Power Pages są dostępne w okienku zatytułowanym Akcje Power Pages na pasku bocznym Eksploratora Visual Studio Code.

W tym okienku witryny są podzielone na następujące kategorie:

  • Aktywne witryny: Witryny, które są aktualnie dostępne i aktywne w wybranym środowisku.
  • Nieaktywne witryny: Witryny, które są obecne w środowisku, ale obecnie nie są aktywne.
  • Inne witryny: witryny pobrane lokalnie, ale jeszcze nieskojarzone z wybranym środowiskiem.

Zmieniające się środowiska

Aby zmienić środowisko:

  1. Wybierz przycisk Zmień środowisko w okienku Akcje w Power Pages.

    Zmienianie środowiska witryn

  2. Wybierz żądane środowisko z wyświetlonej listy.

Po wybraniu środowiska lista witryn jest aktualizowana automatycznie.

Akcje dotyczące witryn

Różne typy witryn udostępniają akcje kontekstowe, do których można uzyskać dostęp, klikając prawym przyciskiem myszy.

Aktywne akcje witryn

Kliknij prawym przyciskiem myszy pozycję Aktywne witryny, aby uzyskać dostęp do następujących akcji:

  • Podgląd: czyści pamięć podręczną i otwiera witrynę w programie VS Code w celu natychmiastowego wyświetlenia podglądu.
  • Przesyłanie: przekazuje zmiany lokalne z powrotem do środowiska.
  • Pobierz: Pobiera zawartość witryny do folderu lokalnego w celu edycji w trybie offline.
  • Szczegóły witryny: wyświetla szczegółowe informacje o witrynie.
  • Pokaż w Eksploratorze: Przechodzi do katalogu lokalnego zawierającego kod witryny.
  • Otwórz w Power Pages Studio: Otwiera witrynę w Power Pages Studio.

Działania dotyczące nieaktywnych witryn

Nieaktywne witryny udostępniają następujące działania:

  • Otwórz zarządzanie witryną: Otwiera witrynę w aplikacji do zarządzania Power Pages.
  • Szczegóły witryny: Zawiera szczegółowe informacje o wybranej witrynie, takie jak identyfikator witryny, adres URL witryny, wersja modelu danych i inne.

Inne działania w witrynach

Witryny przechowywane lokalnie, ale jeszcze nie znajdujące się w danym środowisku, oferują następujące akcje:

  • Prześlij witrynę: Przekazuje witrynę lokalną do połączonego środowiska. Po przesłaniu witryna pojawi się na liście Nieaktywne witryny, gdzie możesz ją aktywować ze strony głównej Power Pages.
  • Pokaż w Eksploratorze: Przechodzi do katalogu lokalnego zawierającego kod witryny.

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 portali, 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.

    Zrzut ekranu pokazuje wybór motywu dla ikon portali Power Apps.

Podgląd witryny

Akcja podglądu wykorzystuje rozszerzenie Microsoft Edge DevTools dla Visual Studio Code, aby zapewnić podgląd witryny w edytorze. Ta funkcja uruchamia Microsoft Edge DevTools i wbudowaną przeglądarkę Microsoft Edge z emulacją urządzenia bezpośrednio w VS Code, zapewniając niemal wszystkie funkcje debugowania i inspekcji dostępne w pełnej wersji Microsoft Edge DevTools.

Podgląd zawsze pokazuje zmiany przesłane do witryny, więc upewnij się, że przed jej otwarciem wypchnąłeś wszelkie zmiany lokalne. Za każdym razem, gdy uruchamiasz wersję zapoznawczą, pamięć podręczna witryny jest automatycznie czyszczona, aby zapewnić wyświetlanie najnowszych aktualizacji.

Aby otworzyć podgląd, kliknij prawym przyciskiem myszy aktywną witrynę w sekcji Akcje Power Pages i wybierz opcję Podgląd. Ta akcja powoduje otwarcie osadzonej przeglądarki Microsoft Edge wskazującej wybraną witrynę.

Zrzut ekranu z podglądu strony Power Pages.

Okienko wersji zapoznawczej zostanie otwarte po prawej stronie.

Zrzut ekranu przedstawiający listę plików, otwarty plik w edytorze Visual Studio Code oraz wersję zapoznawczą po prawej stronie.

Autouzupełnianie

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

Zrzut ekranu z przykładem 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 pisać, aby wyświetlić listę tagów języka Liquid. Wybierz tag, aby poprawnie go sformatować, i kontynuuj wprowadzanie danych.

Zrzut ekranu snippetu z przykładem uzupełniania etykiet 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.

Zrzut ekranu przedstawia 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 do wyboru.

Zrzut ekranu przedstawiający 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ą opcji menu kontekstowego można tworzyć nowe komponenty strony internetowej. Kliknij prawym przyciskiem myszy jeden z obsługiwanych obiektów, wybierz Power Pages i wybierz typ obiektu witryny, 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, musisz określić 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:

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