Kód szerkesztése a webes Visual Studio Code használatával (előzetes verzió)

  • Cikk

[Ez a témakör kiadás előtti dokumentáció, amely a későbbiekben változhat.]

A tervezőstúdióból a webes Visual Studio Code segítségével szerkesztheti az oldalkódot. A funkció lehetővé teszi a statikus tartalom, a HTML, a CSS, a Liquid és a JavaScript szerkesztését a következő webhely-metaadatokhoz:

Metaadat Tartalom
Speciális űrlapok (többlépéses űrlapok) JavaScript
Alapszintű űrlapok JavaScript
Tartalomrészletek Minden támogatott tartalomrészlet tartalom
Listák JavaScript
Webfájlok Médiafájlok megtekintése és letöltése. Szöveg (kód) fájlok szerkesztése.
Weboldalak Minden támogatott tartalom (nyelvenként), JavaScript és CSS
Webes sablonok Az összes támogatott tartalom

Feljegyzés

Nem fog tudni metaadat-rekordokat létrehozni, csak tartalmat és kódot adhat hozzá, valamint fájlmellékleteket tekinthet meg/tölthet le.

A webes Visual Studio Code ingyenest, telepítés nem igénylő Microsoft Visual Studio Code élményt biztosít, amely teljesen a böngészőben fut, és lehetővé teszi az oldalkód böngészését, és a kód könnyű és gyors megváltoztatását. További információ: Webes Visual Studio Code élmény.

Fontos

  • Ez egy előnézeti funkció.
  • Az előzetes funkciókat nem célszerű termelési környezetben használni, és előfordulhat, hogy korlátozott funkcionalitással rendelkeznek. Ezek a funkciók a hivatalos kiadás előtt érhetők el, hogy az ügyfelek korán megismerkedhessenek velük, és visszajelzést adhassanak róluk.

Bemutató a webes Visual Studio Code használatáról a Power Pages-webhely szerkesztéséhez.

Feljegyzés

  • A webes Visual Studio Code első alkalommal való betöltése több időt is igénybe vehet, mivel a rendszer telepíti a funkcióhoz szükséges bővítményeket.
  • A fájl létrehozása, törlése és átnevezése nem támogatott.
  • Ez a funkció a Power Platform Tools webes bővítményt használja. A webes bővítményeket a böngésző tesztkörnyezete korlátozza, ezért a normál bővítményekhez képest korlátozott.
    • Power PlatformAz CLI nem támogatott.
    • A Power Platform Tools webes bővítmény funkciói a Power Pages kódszerkesztő élményére korlátozottak.
    • Ez a funkció nem érhető el a Government Community Cloud (GCC), a Government Community Cloud (GCC High) és a Department of Defense (DoD) szolgáltatásban. Az ezen régiókban található felhasználók a Portálfelügyelet alkalmazást fogják használni a kód szerkesztéséhez. További információ: Kódszerkesztés a Portálfelügyelet alkalmazásban.

A tervezőstúdióban elérhető kód szerkesztése

A webhely kódjának szerkesztését a kezdőlap Code for the Web funkciójával Visual Studio Power Pages kezdheti meg, ha a Szerkesztés legördülő menüből a Webhelykód szerkesztése lehetőséget választja .

A tervezőstúdióban a következő területeken is szerkesztheti a kódot:

Nézzük meg, hogyan lehet szerkeszteni a kódot ezen területek használatával.

A weblapkód szerkesztése az Oldalak munkaterületről

A Power Pages tervezőstúdió megnyitásakor az Oldalak menüben1 és a képernyő jobb felső sarkában2 található Kód szerkesztése parancsot látja.

Kód szerkesztése az Oldalak munkaterületről.

Fejlécsablon kódja az Oldalak munkaterületről

Válassza a Webhely fejlécének szerkesztése lehetőséget, majd a Kód szerkesztése lehetőséget a kódszerkesztő megnyitásához.

Kód szerkesztése az Oldalak fejlécből.

Egyéni CSS-kód szerkesztése a Stíluskezelés munkaterületről

Lépjen a Stíluskezelés munkaterületre, és válassza ki a rendelkezése álló egyéni CSS Kód szerkesztése menüt a kódszerkesztő megnyitásához.

Kód szerkesztése egyéni CSS-ből.

Egyesítési ütközés értesítés

Ha más fejlesztőkkel dolgozik együtt, lehetnek olyan helyzetek, amikor ugyanazon a forráskódon kell dolgozniuk. Abban az esetben, ha megpróbálja menteni egy elavult fájl módosításait, értesítést kap a változtatások Összehasonlítása vagy Felülírása esetén.

A kód összehasonlításával a kód az Ön kódjával összehasonlítva jelenik meg, így visszaállhat a meglévő módosításokra, egyenként elfogadhatja az egyes módosításokat, illetve felhasználhatja a módosításokat, és felülírhatja a meglévő tartalmat.

Ütközések egyesítése kódban.

Áttekintheti a legújabb tartalmat, és egyesítheti vagy felülírhatja a kódot, vagy elvetheti a változtatásokat.

Oktatóanyag: Az oldalkód szerkesztése a webes Visual Studio Code használatával

Ebben az oktatóanyagban megismerheti a webhelykód szerkesztését a webes Visual Studio Code használatával.

1. lépés: Webhelykód szerkesztése a Code for the Web használatával Visual Studio

  1. Nyisson meg a webhelyet a Power Pages tervezőstúdióban

  2. A jobb felső sarokban válassza a Kód szerkesztése lehetőséget

    A Visual Studio Code-ban való megnyitás a tervezőstúdióból.

  3. Válassza a Visual Studio Code megnyitása lehetőséget a jóváhagyást kérő párbeszédpanelben.

  4. Jelentkezzen be a Visual Studio Code-ba a környezete hitelesítő adatainak használatával.

  5. Várja meg a Power Platform Tools webes bővítmény inicializálását, és a weblapkód betöltését a bal oldali ablaktáblában.

2. lépés: Tartalom és kód frissítése

  1. A képernyő bal oldalán található tallózó betölti a megfelelő webhely konfigurációs metaadatait, amelyek a webes Visual Code használatával szerkeszthetők.

    Tallózó menü a webes fájlokat megjelenítő névtelen munkaterülethez

  2. Hajtsa végre a módosításokat a megfelelő metaadatfájlokon, majd a Ctrl+S billentyűkombináció lenyomásával mentse a módosításokat.

  3. Nyissa meg a tervezőstúdió alkalmazást, és válassza a Szinkronizálás lehetőséget, hogy lekérje a jelenlegi tervezőstúdió munkamenet minden frissítését.

    Felület, amely lehetővé teszi, hogy a felhasználó a Szinkronizálás gomb segítségével szinkronizálja a tervezőstúdióba a Visual Studio Code-ban végrehajtott módosításokat.

  4. Az Előzetes verzió lehetőséggel megtekintheti a Power Pages-webhelyen végrehajtott módosításokat.

A Code for the Web vagy Visual Studio a Code Desktop használata Visual Studio

A felhasználók külső eszközök használata nélkül, a webes Visual Studio Code használatával szerkesztést, hibakeresést és előnézetet hajthatnak végre a lapmódosításokon. Visual Studio A Code Desktop további speciális funkciókat biztosít az összes webhely metaadatának szerkesztéséhez, valamint a GitHub, a keretrendszerek és a folyamatos integrációs/folyamatos fejlesztési (CI/CD) folyamatokkal való integrációhoz.

Szolgáltatás VS Code a weben VS Code Desktop
Új webhelykonfigurációs metaadat-rekordok létrehozása No Weboldalakra, lapsablonokra, webes sablonokra, tartalomrészletekre és webes fájlokra korlátozott.
Közvetlen webhelyszerkesztés Igen No
Webhely metaadatainak szerkesztése Weboldalak, tartalomrészletek, alapszintű űrlapok, többlépéses űrlapok, listák és webes sablonok szerkesztésére korlátozva. Minden Power Pages metaadat-konfigurálás
Webhely előzetes verziója Tervezett Tervezett
Power Platform CLI támogatás No Igen
Speciális processzor- és tárhelyhez kötött munkafolyamat – ReactJS vagy más keretrendszer-építési eszköz támogatás No Igen
GitHub-integráció olyan funkciókkal, mint például kód beszúrása, kód kivétele, az ütközések kezelése és egyesítés. No Igen

Kódszerkesztés a Portálfelügyelet alkalmazásban

Feljegyzés

  • A Code for the Web használata Visual Studio webhelyek szerkesztésére nem támogatott a Government Community Cloud (GCC), a Government Community Cloud (GCC High) és a Department of Defense (DoD) szolgáltatásban. Az ezen régiókban lévő felhasználók a Portálfelügyelet alkalmazást használhatják a módosítások végrehajtásához.

Ha a régió nem támogatja a webes Visual Studio Code-ot, akkor a kódszerkesztő ikonjának </> kiválasztása a parancssávban a Portálfelügyelet alkalmazást nyitja meg.

A kód szerkesztéséhez lépjen a megfelelő Weblapok, Alapszintű űrlapok, Többlépéses űrlapok, Listák vagy Webes sablonok rekordra.

Type Kód helye
Weboldal Weblaprekord kiválasztása.
Jelölje ki a weblap tartalomrekordját a Honosított tartalom szakaszban .
Az oldal másolata a Másolat (HTML) mezőben szerkeszthető az Általános lapfülön. Az
Egyéni JavaScript és az Egyéni CSS kód a Speciális lapfülből szerkeszthető.
Alapűrlap Jelölje ki az alapszintű űrlaprekordot.
Szerkessze az Egyéni JavaScript mezőt a További beállítások lapon.
Többlépéses űrlap Válassza ki a többlépéses űrlaprekordot.
Válassza ki a többlépéses űrlaplépés az Űrlaplépések lapon.
Szerkessze az Egyéni Javascript mezőt az Űrlapbeállítások lapon.
List Jelölje ki a listarekordot.
Szerkessze az Egyéni JavaScript mezőt a Beállítások lapon.
Websablon Jelölje ki a webes sablon rekordját.
Szerkessze a Forrás mezőt az Általános lapon.

Mentse a rekordot, és a kód teszteléséhez tekintse meg a webhely előnézetét.

Kapcsolódó információk