8 Ισχυρές επεκτάσεις κώδικα Visual Studio για προγραμματιστές Front-end

Παρόλο που η Microsoft κυκλοφόρησε την πρώτη σταθερή έκδοση του Visual Studio Code, τον ισχυρό επεξεργαστή κώδικα πριν από λίγους μήνες, μέχρι τον Μάρτιο του 2016, έχει ήδη πολλές διαθέσιμες επεκτάσεις που μπορούν να αποκτήσουν εμπειρία κωδικοποίησης στο επόμενο επίπεδο. ο επίσημες επεκτάσεις κώδικα Visual Studio φιλοξενούνται στο Visual Studio Code Marketplace, πολλά από τα οποία μπορούν να είναι μια μεγάλη βοήθεια για τους προγραμματιστές ιστού.

Για αυτήν την ανάρτηση, έχω δοκιμάσει μια δέσμη των επεκτάσεων κώδικα VS που σχετίζονται με την ανάπτυξη front-end, και έκανα μια λίστα με αυτά που βρήκα περισσότερο διαισθητικό, εύκολο στη χρήση και βολικό. Δεν είναι απόλυτη λίστα από όλους. Πάρτε το χρόνο για να περιηγηθείτε στην αγορά για τον εαυτό σας, και να δούμε τι άλλο μπορεί να σας προσφέρει, ειδικά δεδομένου ότι πολλές μεγάλες επεκτάσεις δεν έχουν ακόμη έρθει.

Πώς να εγκαταστήσετε επεκτάσεις κώδικα VS

Η εγκατάσταση μιας επέκτασης είναι αρκετά απλή στο Visual Studio Code, όπως μπορείτε κάντε το μέσα στον επεξεργαστή κώδικα. Στο Market Code VS κάθε επέκταση έχει τη δική της σελίδα και μπορείτε να βρείτε την εντολή που μπορείτε να εγκαταστήσετε τη συγκεκριμένη επέκταση με πάνω από αυτή τη σελίδα.

Η εντολή αρχίζει πάντα με το ext εγκατάσταση όρος. Για να εγκαταστήσετε μια επέκταση, απλά τύπος CTRL + P μέσα στον κώδικα VS για να ξεκινήσει ο πίνακας Quick Open, αντιγράψτε-επικολλήστε αυτήν την εντολή σε αυτό, και τέλος κάντε επανεκκίνηση του επεξεργαστή κώδικα για να γίνει η νέα επέκταση εργασίας.

8 Ισχυρές επεκτάσεις κώδικα Visual Studio

1. Αποσπάσματα HTML

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

   

   Πιθανώς το πιο χρήσιμο χαρακτηριστικό αυτής της επέκτασης είναι αυτό όταν αρχίζετε να πληκτρολογείτε το όνομα μιας ετικέτας HTML (χωρίς τη γωνία εκκίνησης), τα αποσπάσματα HTML γρήγορα εμφανίζει μια λίστα των διαθέσιμων επιλογών με σύντομη πληροφόρηση για το καθένα.

   

   Όταν κάνετε κλικ στο στοιχείο που χρειάζεστε, τα Snippets HTML προσθέτουν την πλήρη ετικέτα HTML5 με τις πιο κοινές ιδιότητες. Για παράδειγμα, αν θέλετε να προσθέσετε ένα σύνδεσμο (ετικέτα αγκύρωσης) στο έγγραφό σας, απλά πληκτρολογήστε ένα ένα σε κώδικα VS, επιλέξτε τη σωστή επιλογή στο αναδυόμενο παράθυρο και τα αποσπάσματα HTML θα εισαγάγουν τα απαραίτητα απόσπασμα στον επεξεργαστή σας χωρίς καμία ταλαιπωρία.

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

2. HTML ολοκλήρωση της κλάσης CSS

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

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

   

   Ας υποθέσουμε ότι θέλετε να δημιουργήσετε έναν ιστότοπο χρησιμοποιώντας το Zurb Foundation και θέλετε να χρησιμοποιήσετε το μικρό πλέγμα. Δεν θυμάστε πώς ακριβώς ονομάζονται τα μαθήματα, αλλά ξέρετε ότι έχουν σημασιολογικά ονόματα.

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

   

3. Προβολή στο πρόγραμμα περιήγησης

   Το View in Browser είναι μια απλή αλλά ισχυρή επέκταση για τον Visual Studio Code. Μπορεί να διευκολύνει την ανάπτυξη του front-end επιτρέποντάς σας έχετε μια γρήγορη ματιά στο αποτέλεσμα της εργασίας σας στο πρόγραμμα περιήγησης κατά την κωδικοποίηση. Μπορείτε να ανοίξετε το αρχείο HTML στο προεπιλεγμένο πρόγραμμα περιήγησης απευθείας από τον κώδικα VS πατώντας το CTRL + F1 συντόμευση πληκτρολογίου.

   Σημειώστε ότι το στοιχείο Προβολή στο πρόγραμμα περιήγησης υποστηρίζει μόνο HTML, οπότε αν θέλετε να δείτε τον ιστότοπό σας, πρέπει να ανοίξετε το αρχείο HTML. Εσύ δεν είναι δυνατή η άμεση πρόσβαση στο πρόγραμμα περιήγησης από ένα αρχείο CSS ή JavaScript.

   

4. Debugger για το Chrome

   Το εργαλείο εντοπισμού σφαλμάτων για το Chrome δημιουργήθηκε από την ίδια τη Microsoft και αυτή τη στιγμή είναι η 4η πιο συχνά downloaded Visual Studio Code extension.

   Το Debugger για το Chrome δίνει τη δυνατότητα debug JavaScript στο Google Chrome χωρίς να αφήνει τον επεξεργαστή κώδικα. Αυτό σημαίνει ότι δεν χρειάζεται να δουλέψετε με το transplied JavaScript που βλέπει το πρόγραμμα περιήγησης, αλλά μπορείτε εκτελέστε το δικαίωμα εντοπισμού σφαλμάτων από τα αρχικά αρχεία προέλευσης. Δείτε αυτήν την επίδειξη για να δείτε πώς λειτουργεί.

   

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

   Για να χρησιμοποιήσετε αυτήν την επέκταση, πρέπει να ξεκινήσετε το Chrome με απομακρυσμένη αποσφαλμάτωση ενεργοποιημένη, και να δημιουργήσει μια σωστή launch.json αρχείο. Αυτό το τελευταίο μπορεί να διαρκέσει για λίγο, αλλά μπορείτε να βρείτε λεπτομερείς οδηγίες στο GitHub για το πώς να το κάνετε σωστά.

5. JSHint

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

   

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

   

6. jQuery αποσπάσματα κώδικα

   Τα αποσπάσματα κώδικα jQuery μπορούν να επιταχύνουν σημαντικά την ανάπτυξη του front-end του Visual Studio Code, καθώς σας επιτρέπει να γράφετε γρήγορα το jQuery χωρίς βασικά σφάλματα σύνταξης. jQuery αποσπάσματα κώδικα αυτή τη στιγμή έχει γύρω Διαθέσιμα αποσπάσματα μπορείτε να επικαλεστεί πληκτρολογώντας τη σωστή σκανδάλη.

   

   Όλα τα αποσπάσματα του jQuery ξεκινούν από το jq πρόθεμα. Η μόνη εξαίρεση είναι η func ενεργοποιήστε το εισάγει μια ανώνυμη λειτουργία στον επεξεργαστή.

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

   

7. Κληματαριά

   Η επέκταση κώδικα Bower VS μπορεί να κάνει τη ροή εργασιών σας για ανάπτυξη ιστοσελίδων πιο διαισθητική, ενσωματώνοντας τον διαχειριστή πακέτων Bower στον κώδικα του Visual Studio.

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

   

   Η επέκταση του Bower σας οδηγεί στη δημιουργία των έργων σας bower.json και μπορείτε επίσης να εγκαταστήσετε, να απεγκαταστήσετε, να αναζητήσετε, να ενημερώσετε τα πακέτα, να διαχειριστείτε την προσωρινή μνήμη και να εκτελέσετε πολλές άλλες εργασίες μαζί της (ανατρέξτε στη λίστα πλήρων λειτουργιών).

   Μπορείς να αποκτήσετε πρόσβαση στις εντολές που σχετίζονται με το Bower ξεκινώντας την εντολή Παλέτα εντολών πατώντας F1, πληκτρολόγηση “Κληματαριά” στην γραμμή εισόδου, κάνοντας κλικ στο “Κληματαριά” στην αναπτυσσόμενη λίστα που εμφανίζεται και επιλέγοντας την κατάλληλη εντολή Bower.

   

8. Ιστορικό Git

   Η ιστορία Git σας δίνει τη δυνατότητα ακολουθήστε τις αλλαγές ενός έργου Git μέσα στον κώδικα του Visual Studio. Αυτή η επέκταση είναι ιδιαίτερα χρήσιμη όταν θέλετε να συμβάλλετε σε ένα μεγαλύτερο έργο Github, και χρειάζονται έναν τρόπο γρήγορης ανίχνευσης των αλλαγών που έγιναν από άλλους προγραμματιστές.

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

   

   Μπορείτε να αποκτήσετε πρόσβαση στις εντολές που σχετίζονται με το ιστορικό Git, εάν πληκτρολογήσετε τη λέξη “Git” στην παλέτα εντολών (F1), επιλέξτε “Git” μέσα στην αναπτυσσόμενη λίστα και, τέλος, επιλέξτε την εντολή που χρειάζεστε. Σημειώστε ότι πρέπει να ανοίξετε το αρχείο από την οποία θέλετε να δείτε την ιστορία πριν να μπορείτε να εκτελέσετε οποιεσδήποτε ενέργειες σε αυτήν.