Χρήση της επέκτασης Visual Studio Code

Visual Studio Code είναι ένα ελαφρύ, ισχυρό πρόγραμμα επεξεργασίας πηγαίου κώδικα για Windows, macOS και Linux. Υποστηρίζει JavaScript, TypeScript και Node.js και διαθέτει ένα εμπλουτισμένο οικοσύστημα επεκτάσεων για άλλες γλώσσες όπως C++, C#, Java, Python, PHP και Go και χρόνους εκτέλεσης, όπως οι .NET και Unity. Μάθετε περισσότερα για το Visual Studio Code στην ενότητα Ξεκινήστε με το VS Code.

Visual Studio Code σάς επιτρέπει να επεκτείνετε τη δυνατότητα μέσω επιδόσεων. Visual Studio Code επεκτάσεις μπορούν να προσθέσουν περισσότερες δυνατότητες στη συνολική εμπειρία. Με την έκδοση αυτής της δυνατότητας, μπορείτε πλέον να χρησιμοποιήσετε την επέκταση Visual Studio Code για να εργαστείτε με Power Pages.

επέκταση Visual Studio Code για Power Pages

Το Power Platform Tools προσθέτει τη δυνατότητα ρύθμισης παραμέτρων τοποθεσιών Web χρησιμοποιώντας Visual Studio Code και χρησιμοποιεί την ενσωματωμένη γλώσσα Liquid IntelliSense επιτρέποντας τη βοήθεια για την ολοκλήρωση του κώδικα, τη βοήθεια και την υπόδειξη κατά την προσαρμογή της διασύνδεσης τοποθεσιών web με χρήση Visual Studio Code. Χρησιμοποιώντας την επέκταση Visual Studio Code, μπορείτε επίσης να ρυθμίσετε τις παραμέτρους των πυλών μέσω του Microsoft Power Platform CLI.

Note

  • Πρέπει να εξασφαλίσετε ότι η node.js λαμβάνεται και εγκαθίσταται στον ίδιο σταθμό εργασίας με Visual Studio Code για να λειτουργούν οι δυνατότητες Power Pages.
  • Βεβαιωθείτε ότι έχουν εγκατασταθεί μόνο τα Power Platform Tools και όχι τόσο τα Power Platform Tools και τα Power Platform Tools[ΕΚΔΟΣΗ ΠΡΟΕΠΙΣΚΟΠΗΣΗΣ]. Δείτε γνωστά προβλήματα για λεπτομέρειες.

Κινούμενο σχέδιο που εξηγεί τον τρόπο εγκατάστασης και ορισμού των Power Platform Tools.

Prerequisites

Πριν χρησιμοποιήσετε την επέκταση Visual Studio Code για Power Pages, πρέπει να κάνετε τα εξής:

  • Λήψη, εγκατάσταση και ρύθμιση παραμέτρων Visual Studio Code. Περισσότερες πληροφορίες: Λήψη Visual Studio Code

  • Ρυθμίστε τις παραμέτρους του περιβάλλοντος και του συστήματός σας για υποστήριξη CI/CD Power Pages χρησιμοποιώντας CLI. Περισσότερες πληροφορίες: Microsoft Power Platform CLI (προεπισκόπηση)

Εγκατάσταση επέκτασης Visual Studio Code

Αφού εγκαταστήσετε Visual Studio Code, πρέπει να εγκαταστήσετε την επέκταση για την προσθήκη εργαλείων Power Platform για Visual Studio Code.

Για να εγκαταστήσετε την επέκταση Visual Studio Code:

  1. Ανοίξτε Visual Studio Code.

  2. Επιλέξτε Επεκτάσεις από το αριστερό τμήμα παραθύρου.

    Visual Studio Code extension.

  3. Επιλέξτε το εικονίδιο Ρυθμίσεις από το επάνω δεξί τμήμα του τμήματος παραθύρου των επεκτάσεων.

  4. Αναζητήστε και επιλέξτε Power Platform Tools.

    Επιλέξτε Power Platform Tools.

  5. Επιλέξτε Εγκατάσταση.

  6. Επαληθεύστε ότι η επέκταση έχει εγκατασταθεί με επιτυχία από τα μηνύματα κατάστασης.

Συμβουλή

Η επέκταση εργαλείων Power Platform επιτρέπει αυτόματα τη χρήση εντολών Microsoft Power Platform CLI μέσα από Visual Studio Code μέσω Visual Studio ενσωματωμένου τερματικού.

ενέργειες Power Pages

Power Pages Ενέργειες απλοποιούν τη διαχείριση τοποθεσιών και μειώνουν την εξάρτηση από εντολές Microsoft Power Platform CLI. Power Pages Ενέργειες είναι διαθέσιμες στο τμήμα παραθύρου με τίτλο Power Pages Ενέργειες στην πλαϊνή γραμμή εξερεύνησης του Visual Studio Code.

Μέσα σε αυτό το παράθυρο, οι τοποθεσίες κατηγοριοποιούνται ως εξής:

  • Ενεργές τοποθεσίες: Τοποθεσίες που είναι διαθέσιμες και ενεργές στο επιλεγμένο περιβάλλον.
  • Μη ενεργές τοποθεσίες: Τοποθεσίες που είναι παρούσες στο περιβάλλον αλλά όχι ενεργές τη δεδομένη στιγμή.
  • Άλλες τοποθεσίες: Τοποθεσίες που έχουν ληφθεί τοπικά αλλά δεν έχουν συσχετιστεί ακόμη με το επιλεγμένο περιβάλλον.

Αλλαγή περιβαλλόντων

Για εναλλαγή περιβαλλόντων:

  1. Επιλέξτε το κουμπί Αλλαγή περιβάλλοντος στο τμήμα παραθύρου Ενέργειες του Power Pages.

    Αλλαγή περιβάλλοντος για τοποθεσίες

  2. Επιλέξτε το περιβάλλον που θέλετε από τη λίστα που εμφανίζεται.

Όταν επιλέγετε ένα περιβάλλον, η λίστα των ιστότοπων ενημερώνεται αυτόματα.

Ενέργειες για τοποθεσίες

Οι διαφορετικοί τύποι τοποθεσιών παρέχουν ενέργειες για συγκεκριμένο περιβάλλον, στις οποίες μπορείτε να αποκτήσετε πρόσβαση κάνοντας δεξί κλικ.

Ενέργειες ενεργών τοποθεσιών

Κάντε δεξί κλικ στις Ενεργές τοποθεσίες για να αποκτήσετε πρόσβαση στις ακόλουθες ενέργειες:

  • Έκδοση προεπισκόπησης: Διαγράφει την προσωρινή μνήμη και ανοίγει την ιστοσελίδα εντός του VS Code για άμεση προεπισκόπηση.
  • Αποστολή: Αποστέλλει τοπικές αλλαγές στο περιβάλλον σας.
  • Λήψη: Πραγματοποιεί λήψη του περιεχομένου της τοποθεσίας σε έναν τοπικό φάκελο για επεξεργασία εκτός σύνδεσης.
  • Λεπτομέρειες τοποθεσίας: Λεπτομερείς πληροφορίες σχετικά με την τοποθεσία.
  • Αποκάλυψη στον Explorer: Πλοηγείται στον τοπικό κατάλογο που περιέχει τον κώδικα του ιστότοπου.
  • Άνοιγμα στο στούντιο σχεδίασης Power Pages: Ανοίγει την τοποθεσία στο στούντιο σχεδίασης Power Pages.
  • Εκτέλεση ελέγχου CodeQL: Εκτελέστε στατική ανάλυση κώδικα σε αρχεία HTML και JavaScript για τον προσδιορισμό ευπάθειας στη βάση κώδικα, χρησιμοποιώντας το CodeQL. Αυτή η επιλογή είναι διαθέσιμη μόνο για τοποθεσίες που έχουν ληφθεί τοπικά, οι οποίες υποδεικνύονται από την Τρέχουσα ετικέτα στη λίστα ενεργών τοποθεσιών.
  • Σύγκριση με το τοπικό: Ανοίγει μια προβολή σύγκρισης για τον προσδιορισμό των διαφορών μεταξύ του τοπικού χώρου εργασίας σας και του απομακρυσμένου περιβάλλοντος. Δείτε περισσότερες λεπτομέρειες σχετικά με τη δυνατότητα σύγκρισης ρύθμισης παραμέτρων τοποθεσίας.

Ενέργειες ανενεργών τοποθεσιών

Οι ανενεργές τοποθεσίες παρέχουν αυτές τις ενέργειες:

  • Άνοιγμα διαχείρισης τοποθεσιών: Ανοίγει την τοποθεσία εντός της εφαρμογής διαχείρισης Power Pages.
  • Λεπτομέρειες τοποθεσίας: Παρέχει λεπτομερείς πληροφορίες σχετικά με την επιλεγμένη τοποθεσία, όπως το αναγνωριστικό τοποθεσίας Web, τη διεύθυνση URL τοποθεσίας Web, την έκδοση μοντέλου δεδομένων και πολλά άλλα.

Ενέργειες άλλων τοποθεσιών

Οι τοποθεσίες που είναι αποθηκευμένες τοπικά αλλά δεν βρίσκονται ακόμα στο περιβάλλον σας προσφέρουν τις ακόλουθες ενέργειες:

  • Αποστολή τοποθεσίας: Αποστέλλει την τοπική τοποθεσία στο συνδεδεμένο περιβάλλον σας. Μετά την αποστολή, η τοποθεσία εμφανίζεται στη λίστα Ανενεργές τοποθεσίες, όπου μπορείτε να την ενεργοποιήσετε από Power Pages αρχική σελίδα.
  • Αποκάλυψη στον Explorer: Πλοηγείται στον τοπικό κατάλογο που περιέχει τον κώδικα του ιστότοπου.

Εικονίδια αρχείου

Η Visual Studio Code επέκταση για Power Pages προσδιορίζει αυτόματα και εμφανίζει εικονίδια για αρχεία και φακέλους μέσα στο περιεχόμενο της τοποθεσίας web που λάβετε.

Λίστα αρχείων σε ένα πρότυπο εκκίνησης με θέμα το εικονίδιο συγκεκριμένης τοποθεσίας web.

Visual Studio Code χρησιμοποιεί το προεπιλεγμένο θέμα εικονιδίου file το οποίο δεν εμφανίζει Power Pages συγκεκριμένα εικονίδια. Για να προβάλετε εικονίδια αρχείων ειδικά για τις τοποθεσίες Web σας, πρέπει να ενημερώσετε την Visual Studio Code παρουσία για να χρησιμοποιήσετε το Power Pages συγκεκριμένο θέμα εικονιδίου αρχείου.

Για να ενεργοποιήσετε ένα θέμα εικονιδίου αρχείου ειδικά για τις πύλες:

  1. Ανοίξτε Visual Studio Code.

  2. Θέμα εικονιδίων αρχείου: Μεταβείτε στο Αρχείο>Προτιμήσεις>Θέμα>Θέμα Εικονιδίων Αρχείου.

  3. Επιλέξτε το θέμα για τα εικονίδια πυλών PowerApps.

     Στιγμιότυπο οθόνης που εμφανίζει την επιλογή του θέματος για Power Apps Portals Icons.

Προεπισκόπηση τοποθεσίας

Η ενέργεια προεπισκόπησης χρησιμοποιεί την επέκταση Microsoft Edge DevTools για Visual Studio Code για να παρέχει μια προεπισκόπηση τοποθεσίας στο πρόγραμμα επεξεργασίας. Αυτή η δυνατότητα εκτελείται Microsoft Edge DevTools και ένα ενσωματωμένο πρόγραμμα περιήγησης Microsoft Edge με εξομοίωση συσκευής απευθείας μέσα στον κώδικα VS, δίνοντάς σας σχεδόν όλες τις ίδιες δυνατότητες εντοπισμού σφαλμάτων και επιθεώρησης στο πλήρες Microsoft Edge DevTools.

Η έκδοση προεπισκόπησης εμφανίζει πάντα τις αλλαγές που ανεβάσατε στην τοποθεσία σας, επομένως βεβαιωθείτε ότι έχετε προωθήσει τυχόν τοπικές αλλαγές πριν την ανοίξετε. Κάθε φορά που εκκινείτε την προεπισκόπηση, η προσωρινή μνήμη τοποθεσίας διαγράφεται αυτόματα για να εξασφαλιστεί ότι προβάλλετε τις πιο πρόσφατες ενημερώσεις.

Για να ανοίξετε την προεπισκόπηση, κάντε δεξί κλικ στην ενεργή τοποθεσία σας στην περιοχή Power Pages Ενέργειες και επιλέξτε Preview. Αυτή η ενέργεια ανοίγει το ενσωματωμένο πρόγραμμα περιήγησης Microsoft Edge που οδηγεί στην τοποθεσία που επιλέξατε.

Στιγμιότυπο οθόνης της ενέργειας προεπισκόπησης τοποθεσίας στο Power Pages.

Το παράθυρο προεπισκόπησης ανοίγει στη δεξιά πλευρά.

 Στιγμιότυπο οθόνης που εμφανίζει τη λίστα αρχείων, άνοιγμα αρχείου στο πρόγραμμα επεξεργασίας Visual Studio Code και προεπισκόπηση στη δεξιά πλευρά.

Σύγκριση ρύθμισης παραμέτρων τοποθεσίας

Χρησιμοποιήστε την επιλογή Σύγκριση με τοπικό για να προσδιορίσετε τις διαφορές μεταξύ του τοπικού χώρου εργασίας σας και της ρύθμισης παραμέτρων δυναμικής τοποθεσίας στο απομακρυσμένο περιβάλλον. Αυτή η δυνατότητα σάς βοηθά να εντοπίζετε ακούσιες αλλαγές, να αντιμετωπίζετε προβλήματα με το συγκεκριμένο περιβάλλον και να διατηρείτε τη συνέπεια προτού συγχρονίσετε τις ρυθμίσεις παραμέτρων της τοποθεσίας σας.

Όταν επιλέγετε αυτήν την ενέργεια, ανοίγει μια ενότητα Σύγκριση τοποθεσίας κάτω από τα Εργαλεία στην προβολή Ενέργειες του Power Pages. Αυτή η ενότητα εμφανίζει όλα τα αρχεία στον τοπικό χώρο εργασίας σας που διαφέρουν από το περιβάλλον, επισημαίνοντας τα εξής:

  • Προστέθηκαν: Νέα αρχεία που δημιουργήθηκαν στον τοπικό χώρο εργασίας που δεν υπάρχουν στο περιβάλλον.
  • Τροποποιήθηκε: Αρχεία όπου ο κώδικας ή τα μετα-δεδομένα διαφέρουν μεταξύ της τοπικής έκδοσης και της έκδοσης περιβάλλοντος.
  • Διαγράφηκε: Αρχεία που έχουν καταργηθεί από τον τοπικό χώρο εργασίας, αλλά εξακολουθούν να υπάρχουν στο περιβάλλον.

Για να συγκρίνετε μια διαμόρφωση δυναμικής τοποθεσίας με τον τοπικό χώρο εργασίας:

  1. Στην πλαϊνή γραμμή εξερεύνησης, αναπτύξτε το τμήμα παραθύρου Ενέργειες Power Pages .
  2. Στη λίστα Ενεργές/Ανενεργές τοποθεσίες , κάντε δεξί κλικ στην τοποθεσία που θέλετε να συγκρίνετε.
  3. Επιλέξτε Σύγκριση με το τοπικό.

Στιγμιότυπο οθόνης που εμφανίζει την επιλογή

Για να συγκρίνετε έναν συγκεκριμένο φάκελο:

  1. Στην πλαϊνή γραμμή εξερεύνησης, επιλέξτε έναν φάκελο (όπως web-pages) από τον τοπικό χώρο εργασίας σας.
  2. Κάντε δεξί κλικ και επιλέξτε Power Pages>Σύγκριση με το περιβάλλον.

Στιγμιότυπο οθόνης που εμφανίζει την επιλογή σύγκρισης στον τοπικό φάκελο χώρου εργασίας.

Διαχείριση αποτελεσμάτων σύγκρισης

Όταν η καρτέλα Σύγκριση τοποθεσίας είναι ενεργή με αλλαγές, μπορείτε να κάνετε δεξί κλικ στη λίστα σύγκρισης για να αποκτήσετε πρόσβαση σε πρόσθετες ενέργειες:

  • Άνοιγμα όλων των Diffs: Ανοίγει το πρόγραμμα επεξεργασίας Visual Studio Code diff για κάθε αρχείο στη λίστα για να ελέγξει όλες τις αλλαγές ταυτόχρονα.
  • Σύγκριση ανανέωσης: Σαρώνει ξανά τον τοπικό χώρο εργασίας και το απομακρυσμένο περιβάλλον για να ενημερώσει τη λίστα με τις τελευταίες αλλαγές.
  • Εξαγωγή ως αναφορά HTML: Δημιουργεί ένα έγγραφο HTML με δυνατότητα κοινής χρήσης, το οποίο περιγράφει λεπτομερώς όλες τις διαφορές που εντοπίστηκαν.
  • Εξαγωγή ως JSON: Εξάγει τα δεδομένα σύγκρισης σε μορφή JSON για αυτοματοποιημένες ροές εργασιών ή προσαρμοσμένες αναφορές. Μπορείτε να μοιραστείτε αυτό το εξαγόμενο αρχείο με μέλη της ομάδας, τα οποία μπορούν να το εισαγάγουν στη δική τους προβολή, κάνοντας δεξί κλικ στην ενότητα Σύγκριση τοποθεσίας και επιλέγοντας Σύγκριση εισαγωγής .
  • Απόρριψη όλων των τοπικών αλλαγών: Επαναφέρει όλες τις τοπικές αλλαγές ώστε να συμφωνούν με την τρέχουσα έκδοση στο απομακρυσμένο περιβάλλον.
  • Κατάργηση σύγκρισης: Κλείνει την τρέχουσα περίοδο λειτουργίας σύγκρισης και διαγράφει την καρτέλα αποτελεσμάτων.

Συμβουλή

Η εξαγωγή και κοινή χρήση δεδομένων σύγκρισης ως JSON επιτρέπει στην ομάδα σας να συνεργάζεται για την επίλυση διαφορών ρύθμισης παραμέτρων χωρίς να απαιτείται όλοι οι χρήστες να συνδέονται στο ίδιο περιβάλλον.

Στιγμιότυπο οθόνης που εμφανίζει επιλογές διαθέσιμες στην καρτέλα σύγκρισης τοποθεσίας

Αυτόματη συμπλήρωση

Η δυνατότητα αυτόματης συμπλήρωσης στην επέκταση Visual Studio Code εμφανίζει το τρέχον περιβάλλον που επεξεργάζεται και τα σχετικά στοιχεία αυτόματης συμπλήρωσης μέσω του IntelliSense.

Στιγμιότυπο οθόνης με ένα παράδειγμα αυτόματης συμπλήρωσης για το αναγνωριστικό προτύπου σελίδας.

Ετικέτες Liquid

Κατά την προσαρμογή του ληφθέν περιεχομένου με χρήση του Visual Studio Code, μπορείτε πλέον να χρησιμοποιήσετε το IntelliSense για τις ετικέτες Power Pages Liquid.

Αρχίστε να πληκτρολογείτε για να δείτε μια λίστα με ετικέτες Liquid. Επιλέξτε μια ετικέτα για να τη μορφοποιήσετε σωστά και συνεχίστε με την εισαγωγή σας.

Στιγμιότυπο οθόνης ενός αποσπάσματος κώδικα με παράδειγμα συμπλήρωσης ετικέτας οντότητας Liquid.

Αντικείμενα Liquid

Μπορείτε να δείτε την ολοκλήρωση του κώδικα Αντικείμενο Liquid εισάγοντας {{ }}. Με τον δρομέα τοποθετημένο ανάμεσα στα άγκιστρα, επιλέξτε <CTRL + space> να εμφανίσετε μια λίστα με τα αντικείμενα Liquid που μπορείτε να επιλέξετε. Εάν το αντικείμενο έχει περισσότερες ιδιότητες, μπορείτε να καταχωρήσετε ένα . και, στη συνέχεια, να επιλέξετε <CTRL + space> ξανά για να δείτε συγκεκριμένες ιδιότητες του αντικειμένου Liquid.

Το στιγμιότυπο οθόνης δείχνει την εισαγωγή ενός αντικειμένου Liquid.

Ετικέτες προτύπου

Μπορείτε να δείτε Power Pages προτάσεις προτύπου Web, τοποθετώντας τον δρομέα στην πρόταση {include ' '} και επιλέξτε <CTRL> - space. Εμφανίζεται μια λίστα με τα υπάρχοντα πρότυπα web για να επιλέξετε.

Στιγμιότυπο οθόνης των ετικετών προτύπου.

Δημιουργία, διαγραφή και μετονομασία αντικειμένων τοποθεσίας Web

Μέσα από Visual Studio Code, μπορείτε να δημιουργήσετε, να διαγράψετε και να μετονομάσετε τα ακόλουθα στοιχεία τοποθεσίας Web:

  • Ιστοσελίδες
  • Πρότυπα σελίδων
  • Πρότυπα Web
  • Τμήματα περιεχομένου
  • Νέα πάγια στοιχεία (αρχεία Web)

Δημιουργία λειτουργιών

Μπορείτε να χρησιμοποιήσετε τις επιλογές του μενού περιβάλλοντος για να δημιουργήσετε νέα στοιχεία τοποθεσίας web. Κάντε δεξί κλικ σε ένα από τα υποστηριζόμενα αντικείμενα, επιλέξτε Power Pages και επιλέξτε τον τύπο αντικειμένου τοποθεσίας Web που θέλετε να δημιουργήσετε.

Εναλλακτικά, μπορείτε να χρησιμοποιήσετε την παλέτα εντολών Visual Studio Code επιλέγοντας Ctrl + Shift + P.

Δημιουργία νέου αντικειμένου.

Πρέπει να καθορίσετε περισσότερες παραμέτρους για να δημιουργήσετε το αντικείμενο.

Αντικείμενο Παράμετροι
Ιστοσελίδες Όνομα, πρότυπο σελίδας, γονική σελίδα
Πρότυπα σελίδων Όνομα, πρότυπο web
Πρότυπα Web Πλήρες όνομα
Τμήματα περιεχομένου Όνομα και εάν το τμήμα κώδικα θα είναι HTML ή κείμενο.
Νέα πάγια στοιχεία (αρχεία Web) Όνομα, γονική σελίδα και επιλέξτε το αρχείο προς αποστολή.

Μετονομάστε και διαγράψτε λειτουργίες

Από την περιήγηση του αρχείου, μπορείτε να χρησιμοποιήσετε το μενού περιβάλλοντος για να μετονομάσετε ή να διαγράψετε στοιχεία Power Pages.

Note

Τα διαγραμμένα αντικείμενα μπορούν να αποθηκευτούν από τον κάδο ανακύκλωσης της επιφάνειας εργασίας.

Limitations

Οι παρακάτω περιορισμοί ισχύουν αυτή τη στιγμή για τα Power Platform Tools για τις πύλες:

Power Pages υποστήριξη για Microsoft Power Platform CLI (προεπισκόπηση)