Οι καλύτερες επεκτάσεις VSCode για χρήση το 2023
February 18, 2023Οι δημοσκοπήσεις του StackOverflow και του Wakatime δείχνουν ότι το VS Coding είναι ένας από τους πιο δημοφιλείς επεξεργαστές κώδικα. Οι προσθήκες VS Code βελτιώνουν την παραγωγικότητα, τη συνεισφορά και την ομαδική εργασία.
Η επεκτασιμότητα και η δυνατότητα προσαρμογής είναι γιατί οι προγραμματιστές επιλέγουν τον κώδικα VS. Μέσω ενός API επέκτασης, σχεδόν κάθε δυνατότητα του VS Code μπορεί να αλλάξει.
Σχετίζεται με
Οι επεκτάσεις κώδικα VS μπορούν να τροποποιήσουν τη σχεδίαση του κώδικα VS, να προσθέσουν προσαρμοσμένα στοιχεία και προβολές, να υποστηρίξουν μια νέα γλώσσα προγραμματισμού και πολλά άλλα.
Συγκεντρώσαμε μια συλλογή από πρόσθετα VS Code φιλικά για προγραμματιστές. Αυτή η ανάρτηση διερευνά τα αγαπημένα μας πρόσθετα VS Code και πώς μπορούν να ενισχύσουν την παραγωγικότητα των προγραμματιστών.
Ζωντανός διακομιστής
Η επέκταση Live Server για τον κώδικα του Visual Studio είναι απίστευτα χρήσιμη και έχει δει πάνω από 25 εκατομμύρια εγκαταστάσεις από τότε που κυκλοφόρησε. Σας δίνει την επιλογή να κάνετε δεξί κλικ σε ένα έγγραφο HTML και, στη συνέχεια, ξεκινά έναν διακομιστή και ανοίγει ένα παράθυρο προγράμματος περιήγησης για εσάς, εμφανίζοντας το αρχείο μέσα στο παράθυρο του προγράμματος περιήγησης.
Παγώνι
Κάντε μια μικρή προσαρμογή στο συνδυασμό χρωμάτων του χώρου εργασίας στο Visual Studio Code. Ιδανικό για καταστάσεις στις οποίες έχετε πολλές περιπτώσεις VS Code, χρησιμοποιείτε το VS Live Share ή χρησιμοποιείτε τη λειτουργικότητα που προσφέρει το VS Code Remote και θέλετε να αναγνωρίσετε αμέσως τον επεξεργαστή σας.
Σελιδοδείκτες
Σας διευκολύνει να μετακινηθείτε μεταξύ των κρίσιμων σημείων του κώδικά σας και σας μετακινεί στον κώδικα πιο γρήγορα. Δεν υπάρχει πλέον ανάγκη να αναζητήσετε τον κωδικό. Επιπλέον, παρέχει ένα σύνολο εντολών επιλογής, το οποίο σας δίνει τη δυνατότητα να επιλέξετε περιοχές μεταξύ των γραμμών με σελιδοδείκτη καθώς και των ίδιων των γραμμών με σελιδοδείκτη. Η εξέταση των αρχείων καταγραφής μπορεί να ωφεληθεί πολύ από τη χρήση του.
CSS Peek
Το Peek σάς επιτρέπει να κάνετε γρήγορες τροποποιήσεις απευθείας στη σελίδα φορτώνοντας το αρχείο CSS inline και κάνοντας αυτό. (Ctrl+Shift+F12) Μετάβαση σε: ανοίξτε το αρχείο CSS σε ένα νέο πρόγραμμα επεξεργασίας ή μεταβείτε απευθείας στο ίδιο το αρχείο CSS ( F12 ) Εμφανίστε τη σημασία του συμβόλου μετακινώντας τον κέρσορα πάνω του ενώ κρατάτε πατημένο το πλήκτρο Control και το δείκτη του ποντικιού κλειδί.
Regex Previewer
Ως ισχυρό εργαλείο για την αντιστοίχιση και την αντικατάσταση προτύπων, οι κανονικές εκφράσεις (ή «regex» στον κόσμο του προγραμματισμού) τραβούν την προσοχή των προγραμματιστών. Εάν θέλετε να συγκρίνετε καθολικές και πολυγραμμικές ρυθμίσεις με δύο έγγραφα δίπλα-δίπλα, μπορείτε να το κάνετε εισάγοντάς τα στη γραμμή κατάστασης. Όταν υπάρχουν πολλές πιθανές αντιστοιχίσεις στα έγγραφα που συγκρίνονται, αυτό μπορεί να είναι χρήσιμο.
Ομορφότερος
Όλα καταλήγουν στο να αφιερώνετε λιγότερο χρόνο για να μορφοποιήσετε τον κώδικά σας, ώστε να μπορείτε να αφιερώσετε όλη σας την προσοχή στην ικανοποίηση των απαιτήσεων κωδικοποίησης. Σε αυτό συμβάλλει η επέκταση. Ο κώδικάς σας θα διορθώσει αυτόματα τυχόν σφάλματα μορφοποίησης, όπως επαναλαμβανόμενα διπλά εισαγωγικά ή προβλήματα με το ερωτηματικό.
Vscode-εικονίδια
Μπορείτε να δημιουργήσετε περιγραφικά εικονίδια με εικονίδια vscode για γρήγορη ταξινόμηση αρχείων και φακέλων. Αυτή η προσθήκη διευκολύνει τις ομάδες να συνεργάζονται στενά βελτιώνοντας την οπτική ελκυστικότητα του κώδικα. Αυτό σημαίνει ότι μπορείτε πάντα να επιστρέψετε αργότερα και να εργαστείτε στον κώδικά σας με απόλυτη εστίαση, δημιουργώντας μια υπέροχη εμπειρία τελικού χρήστη.
Ρύθμιση συγχρονισμού
Ως προγραμματιστές, εργαζόμαστε σε μια ποικιλία διαφορετικών συσκευών και μπορεί να είναι δύσκολο να διατηρήσουμε ένα συνεπές περιβάλλον ανάπτυξης σε όλες αυτές τις διαφορετικές πλατφόρμες. Ωστόσο, μπορείτε να συγχρονίσετε τις ρυθμίσεις, τα θέματα, τα εικονίδια αρχείων, τις πληκτρολογήσεις, τις επεκτάσεις και τους χώρους εργασίας σας σε διάφορες συσκευές χρησιμοποιώντας την ουσία Github και το συγχρονισμό ρυθμίσεων.
Καλύτερα σχόλια
Χρησιμοποιώντας ένα πλήρως προσαρμοσμένο σύστημα ετικετών, το Better Comments επιτρέπει στους προγραμματιστές να τεκμηριώνουν καλύτερα τον κώδικά τους. Με την προσθήκη, μπορείτε να παρέχετε διάφορα είδη σχολίων τη δική τους προσαρμοσμένη εμφάνιση για να παρέχουν σημασιολογικό πλαίσιο. Για παράδειγμα, μπορείτε να διαμορφώσετε τα καλύτερα σχόλια έτσι ώστε όλα τα σχόλια υποχρεώσεων να εμφανίζονται με μπλε χρώμα. Όταν προβάλλετε ένα αρχείο που περιέχει μια υποχρέωση, η παρατήρηση θα εμφανίζεται αμέσως με μπλε χρώμα.
Χρωματίστε
Εάν είστε προγραμματιστής front-end, το Colorize είναι ένα ισχυρό εργαλείο που μπορείτε να χρησιμοποιήσετε για να χακάρετε την παραγωγικότητά σας. Αυτό το πρόσθετο Visual Studio Code εξαλείφει την ανάγκη αναζήτησης χρωματικών κωδικών CSS σε ένα ξεχωριστό εγχειρίδιο αναφοράς, επιτρέποντάς σας να εστιάσετε στην εργασία σας χωρίς περισπασμούς. Αυτό το πρόσθετο δημιουργεί και ενημερώνει σε πραγματικό χρόνο το χρώμα φόντου των μεταβλητών CSS, των μεταβλητών προεπεξεργαστή, των χρωμάτων hsl/hsla, του εξαγωνικού χρώματος CSS, του χρώματος rgb/rgba και του χρώματος argb.
ΟΛΑ τα κυριότερα σημεία
Αυτό στοχεύει να διορθώσει το πρόσθετο TODO Highlight. Κάνοντας τα TODO σας να ξεχωρίζουν διευκολύνει την εύρεση και τη φροντίδα τους όταν έχετε χρόνο. Μπορείτε να παραθέσετε όλους τους επισημασμένους σχολιασμούς και να αλλάξετε τις επισημάνσεις. Αυτό χρησιμεύει για να υπενθυμίσει στον χρήστη ότι πρέπει να γίνουν πρόσθετα βήματα πριν από την ώθηση του κώδικα στο περιβάλλον παραγωγής.
Το GitLens Git υπερτροφοδοτείται
Οι λειτουργίες φιλικές προς τους προγραμματιστές του Git είναι γνωστές. Οι πολλαπλές εκδόσεις κωδικών απλοποιούν πολύπλοκες απαιτήσεις προϊόντος. Συνδυάζει Git και VS Code. Η οπτικοποίηση του κώδικα σάς βοηθά να τον κατανοήσετε καλύτερα. Αυτό εξηγεί τον κώδικα ποιος, γιατί και πότε. Εξερευνήστε το ιστορικό και την πρόοδο της βάσης κωδικών.
Μητρώο Turbo Console
Οι περισσότεροι άνθρωποι θα ήθελαν να πουν ότι χρησιμοποιούν πάντα ένα πρόγραμμα εντοπισμού σφαλμάτων κατά τη δημιουργία JavaScript, αλλά αυτό δεν συμβαίνει πάντα. Η διαδικασία ανάπτυξης μπορεί περιστασιακά να χρειάζεται καταγραφή κονσόλας και το Turbo Console Log κάνει αυτή τη διαδικασία εξαιρετικά απλή. Μπορείτε να χρησιμοποιήσετε τα πλήκτρα του πληκτρολογίου για να εισάγετε γρήγορα πολλά αρχεία καταγραφής κονσόλας, να επισημάνετε μεταβλητές και να τα διαγράψετε όλα ταυτόχρονα χρησιμοποιώντας το αρχείο καταγραφής Turbo Console.
Visual Studio Code Remote – SSH
Η Microsoft έχει αναπτύξει ένα πρόσθετο για τον κώδικα VS που ονομάζεται Remote SSH που δίνει στους χρήστες τη δυνατότητα να χρησιμοποιούν ένα απομακρυσμένο μηχάνημα που είναι εξοπλισμένο με διακομιστή SSH ως περιβάλλον ανάπτυξης. Αυτό το πρόσθετο είναι ένα θαυμάσιο εργαλείο που μας επιτρέπει να έχουμε πρόσβαση σε ένα υπάρχον περιβάλλον ανάπτυξης από πολλές τοποθεσίες και υπολογιστές. Καθώς οι χώροι εργασίας μας γίνονται ακόμη πιο δυναμικοί, ορισμένες επιχειρήσεις μεταβαίνουν σε ένα πλήρως απομακρυσμένο ή υβριδικό μοντέλο, ενώ άλλες το κάνουν εν μέρει.
Ιστορικό Git, Αναζήτηση και άλλα
Μπορείτε να περιηγηθείτε στα αρχεία καταγραφής git και στο ιστορικό των αρχείων στο VSCode χάρη σε μια επέκταση, και μπορείτε ακόμη και να συγκρίνετε κλάδους, δεσμεύσεις και αρχεία μεταξύ των δεσμεύσεων. Αυτή η επέκταση έχει επίσης μια ποικιλία άλλων δυνατοτήτων, μερικές από τις οποίες περιλαμβάνουν τη δυνατότητα δημιουργίας ετικετών, διακλαδώσεων, επαναφοράς δεσμεύσεων, δεσμεύσεων cherry-pick, συγχώνευσης και επαναφοράς. Μπορείτε να το εκτελέσετε μέσα στον επεξεργαστή του VSCode χωρίς να χρειάζεται να αλλάξετε το περιβάλλον.
Αποσπάσματα Javascript (ES6) VS Code
Παρά το γεγονός ότι οι ενσωματωμένες δυνατότητες JS IntelliSense του VSCode προσφέρουν έξυπνη αυτόματη συμπλήρωση, αναζήτηση αναφοράς και άλλες πιο προηγμένες δυνατότητες για προγραμματιστές JS. Η πρόσβαση σε βοηθητικά προγράμματα κλάσεων, εισαγωγή, εξαγωγή και ενεργοποιήσεις μεθόδων καθίσταται δυνατή για εσάς ως προγραμματιστή JS χάρη στην επέκταση JavaScript (ES6). Αυτό μπορεί επίσης να βελτιώσει τη συνολική εμπειρία ανάπτυξης.
Ορθογραφικός έλεγχος κώδικα
Οι συνήθεις παγίδες για τους προγραμματιστές περιλαμβάνουν ορθογραφικά λάθη στα σχόλια ή τα ονόματα μεταβλητών. Αυτά τα τυπογραφικά λάθη είναι εύκολο να παραβλεφθούν, αλλά με την προσθήκη ορθογραφικού ελέγχου κώδικα, μπορείτε να τα βρείτε και να τα διορθώσετε γρήγορα. Μακροπρόθεσμα, αυτό θα σας βοηθήσει να διατηρήσετε ένα καθαρό περιβάλλον κώδικα απαλλαγμένο από τις τραχιές γραμμές που μαστίζουν τόσους πολλούς προγραμματιστές. Ο ορθογραφικός έλεγχος κώδικα παρέχει προτάσεις όταν ο κέρσορας τοποθετείται σε μια λέξη κάνοντας κλικ στο σύμβολο της λυχνίας στο αριστερό περιθώριο.
Γραμματοσειρές εικονιδίων για τον κώδικα του Visual Studio
Οι προγραμματιστές front-end εργάζονται συχνά με εικονίδια. Οι προγραμματιστές έχουν πρόσβαση σε αποσπάσματα για γνωστές γραμματοσειρές εικονιδίων όπως Font Awesome, Glyphicons, Octicons, Material design και πολλά άλλα χάρη στην επέκταση Icon Fonts. Η αγορά VSCode προσφέρει την επέκταση γραμματοσειρών εικονιδίων, η οποία μπορεί επίσης να χρησιμοποιηθεί με προγράμματα επεξεργασίας όπως το Atom και το Sublime Text.
Κόστος εισαγωγής έναντι επέκτασης κώδικα
Το μέγεθος και η απόδοση του πακέτου είναι αιώνια θέματα συζήτησης κατά την ανάπτυξη νέων εφαρμογών ιστού. Αυτά είναι έγκυρα και ουσιαστικά σημεία που πρέπει να ληφθούν υπόψη, αλλά η στιγμή να κάνετε οτιδήποτε για αυτά είναι όταν δημιουργείτε κώδικα. Ο όγκος εισαγωγής εμφανίζεται βολικά ενσωματωμένη δίπλα σε κάθε δήλωση εισαγωγής, καθιστώντας εύκολο τον υπολογισμό του συνολικού κόστους των εισαγωγών με Κόστος εισαγωγής. Το κόστος εισαγωγής χρησιμοποιεί το webpack εσωτερικά και παρέχει ζωντανή ανατροφοδότηση καθώς τροποποιείτε τις γραμμές εισαγωγής.
Υποστήριξη Markdown για τον κώδικα του Visual Studio
Το Markdown All in One ενισχύει τις δυνατότητες Markdown με τον κώδικα του Visual Studio. Ο κώδικας VS παρέχει υποστήριξη Markdown out of the box. Το Markdown χρησιμοποιείται συνήθως σε διαφορετικούς τεχνικούς τομείς και αυτή η επέκταση είναι ζωτικής σημασίας για τη βελτίωση της συνολικής παραγωγικότητας και ταχύτητας.
συμπέρασμα
Χωρίς αμφιβολία, το Visual Studio Code είναι ένας εξαιρετικός επεξεργαστής κώδικα με πρακτικά ατελείωτες επιλογές προσαρμογής. Αυτές οι επεκτάσεις, μαζί με τις εκατοντάδες άλλες που μπορεί να υπάρχουν αλλά δεν εμφανίζονται εδώ, θα σας επιτρέψουν να αποκτήσετε πρόσβαση σε περισσότερες δυνατότητες, να διορθώσετε τον κώδικα πιο γρήγορα και να υιοθετήσετε νέα επίπεδα αφαίρεσης, αυξάνοντας παράλληλα την παραγωγικότητά σας. Για να διασφαλίσετε ότι εσείς και η ομάδα των προγραμματιστών σας βρίσκεστε όλοι στην ίδια σελίδα, είναι χρήσιμο να θεσπίσετε πρότυπα για τα πρόσθετα Visual Studio Code που θα χρησιμοποιείτε όλοι.
