Επεκτάσεις κώδικα οπτικού στούντιο. Χρήσιμα πρόσθετα για τον Visual Studio Code. Η συνέχεια είναι διαθέσιμη μόνο για μέλη

Κωδικός Visual Studio Είναι ένας δωρεάν επεξεργαστής κειμένου πολλαπλών πλατφορμών που αναπτύχθηκε από την Microsoft... Γίνεται γρήγορα το αγαπημένο όλων λόγω της εξαιρετικής απόδοσης και του πλήθους των δυνατοτήτων που προσφέρει.

Όπως τα περισσότερα IDE, το VSCode έχει το δικό του κατάστημα επέκτασης που περιέχει χιλιάδες πρόσθετα διαφορετικής ποιότητας. Για να σας βοηθήσουμε να επιλέξετε αυτές για λήψη, δημιουργήσαμε αυτήν τη συλλογή επεκτάσεων που θεωρήσαμε πιο χρήσιμες και ενδιαφέρουσες.

Το VSCode δεν προσφέρει ενσωματωμένη διεπαφή για άνοιγμα αρχείων απευθείας στο πρόγραμμα περιήγησης. Αυτή η επέκταση προσθέτει το στοιχείο μενού "Άνοιγμα στο πρόγραμμα περιήγησης" στο μενού περιβάλλοντος, καθώς και εντολές για άνοιγμα στον επιλεγμένο πελάτη (Firefox, Chrome, IE).

Το Quokka είναι ένα εργαλείο εντοπισμού σφαλμάτων που σας δίνει άμεσα σχόλια σχετικά με τον κώδικα που γράφετε. Δείχνει μια προεπισκόπηση των αποτελεσμάτων των συναρτήσεων και των υπολογισμένων τιμών για τις μεταβλητές. Η επέκταση είναι εξαιρετικά προσαρμόσιμη και λειτουργεί έξω από το κουτί με έργα JSX ή TypeScript.

Εισαγάγετε γρήγορα δεδομένα κράτησης θέσης με τη δημοφιλή βιβλιοθήκη JavaScript Faker. Μπορείτε να δημιουργήσετε τυχαία ονόματα, διευθύνσεις, εικόνες, αριθμούς τηλεφώνου ή απλά παραγράφους του κλασικού Lorem Ipsum. Κάθε κατηγορία έχει διαφορετικές υποκατηγορίες, ώστε να μπορείτε να προσαρμόσετε τα δεδομένα στις ανάγκες σας.

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

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

Πιο όμορφος είναι ο πιο δημοφιλής μορφοποιητής κώδικα μεταξύ των προγραμματιστών ιστού. Επιτρέπει στον κωδικό της ομάδας σας να φαίνεται ο ίδιος ανεξάρτητα από το ποιος το έγραψε. Αυτή η επέκταση σάς επιτρέπει να εφαρμόζετε αυτόματα Πιο όμορφος και μορφοποιήστε γρήγορα όλα τα έγγραφα Js και CSS... Εάν θέλετε επίσης να χρησιμοποιήσετε ESLint, υπάρχει Prettier - Eslint.

Ένα μικρό πρόσθετο που σας παρέχει διάφορες πληροφορίες σχετικά με τα χρώματα που έχετε χρησιμοποιήσει στο CSS σας. Τοποθετήστε τον δείκτη του ποντικιού πάνω από ένα χρώμα, θα δείτε ένα μεγάλο παράθυρο με αυτό το χρώμα και την κωδικοποίησή του σε όλες τις μορφές (hex, rgb, hsl και cmyk).

Αυτό το εργαλείο επισημαίνει όλα τα σχόλια ΝΑ ΚΑΝΩ στον κωδικό σας, διευκολύνοντας τον εντοπισμό τυχόν ημιτελών κομματιών πριν ξεκινήσετε την παραγωγή. Από προεπιλογή, αναζητά λέξεις-κλειδιά ΝΑ ΚΑΝΩ και ΦΤΙΑΞΕ ΜΕαλλά μπορείτε επίσης να προσθέσετε τις δικές σας εκφράσεις.

Μικρά αποσπάσματα για τη συμπερίληψη γραμματοσειρών εικονιδίων στο έργο σας (από το CDN) και στη συνέχεια την προσθήκη των ίδιων των εικονιδίων. Η επέκταση υποστηρίζει πάνω από 20 δημοφιλή σύνολα εικονιδίων, συμπεριλαμβανομένων γραμματοσειρών Φοβερός, Ιόνια, Γλυφικά και Εικονίδια σχεδιασμού υλικών.

Επέκταση για ελαχιστοποίηση κώδικα. Προσφέρει έναν τόνο επιλογών προσαρμογής και τη δυνατότητα αυτόματης ελαχιστοποίησης κατά την αποθήκευση και εξαγωγή σε αρχείο .min. Το Minify λειτουργεί με JavaScript, CSS και HTML μέσω uglify-js, clean-css και html-minifier, αντίστοιχα.

Κωδικός VS έχει περιορισμένες επιλογές για τη μετατροπή κειμένου. Εκτός πλαισίου, μπορεί να κάνει μόνο πεζά και κεφαλαία μετατροπές. Αυτό το πρόσθετο προσθέτει πολλές ακόμη εντολές τροποποίησης συμβολοσειρών, όπως camelCase, kebab-case, snake_case, CONST_CASE και άλλα.

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

Ο κύριος συντάκτης που χρησιμοποιώ για τη σύνταξη κώδικα είναι το Visual Studio Code (συντομογραφία ως VSCode). Πριν από αυτό, δούλευα στο πρόγραμμα επεξεργασίας κειμένου Sublime, το οποίο κατάργησα εντελώς δύο εβδομάδες μετά την έναρξη της χρήσης του VSCode, απλώς και μόνο επειδή ο VSCode είναι πολύ πιο δροσερός και γρηγορότερος.

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

Το VSCode υλοποιεί την αναζήτηση και εγκατάσταση επεκτάσεων απευθείας από τον επεξεργαστή - απλώς ανοίξτε το πλαίσιο επεκτάσεων και εισαγάγετε το όνομα της επέκτασης ή μια λέξη-κλειδί (ετικέτα) στην αναζήτηση για επεκτάσεις στο Marketplace και ο συντάκτης θα αναζητήσει αμέσως και θα σας προσφέρει διαθέσιμες επιλογές για το ερώτημά σας αναζήτησης.

Από προεπιλογή, η προσθήκη Emmet είναι ήδη εγκατεστημένη στον κώδικα VSCode, αλλά ποιες επεκτάσεις πρέπει να εγκατασταθούν για να κάνετε την εργασία σας πιο γρήγορη και πιο άνετη, διαβάστε.

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

Project Manager - Project Manager

Αυτό είναι το πρώτο πράγμα που πρέπει να εγκαταστήσετε στον επεξεργαστή VSCode. Ο συγγραφέας αυτής της επέκτασης, Alessandro Fragnani, είναι ένας έμπειρος προγραμματιστής με περισσότερες από δώδεκα επεκτάσεις για VSCode.

Η επέκταση θα σας βοηθήσει να έχετε εύκολη πρόσβαση στα έργα σας, ανεξάρτητα από το πού βρίσκονται. Μπορείτε να ορίσετε τα δικά σας αγαπημένα έργα ή να επιλέξετε αυτόματη ανίχνευση αποθετηρίων VSCode, Git, Mercurial και SVN ή οποιονδήποτε φάκελο.

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

Προσωπικά συνέβαλα στην ανάπτυξη της επέκτασης του Project Manager - το έκανα πολύγλωσσο και πρόσθεσα ρωσικά, οπότε τώρα είναι διαθέσιμο στα ρωσικά.

Σελιδοδείκτες - Σελιδοδείκτες

Μια άλλη επέκταση για VSCode από Alessandro Fragnani.

Η επέκταση σάς επιτρέπει να προσθέσετε σελιδοδείκτη στις γραμμές ενός αρχείου, το οποίο σηματοδοτείται από μια ετικέτα στα πεδία.

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

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

Καθώς και για το Project Manager, συνέβαλα στην ανάπτυξη αυτής της επέκτασης - το έκανα πολύγλωσσο και πρόσθεσα ρωσικά σε αυτό.

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

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

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

Εάν πατήσετε το συνδυασμό πλήκτρων Shift + Alt + B - τότε θα εμφανιστεί μια λίστα προγραμμάτων περιήγησης στη γραμμή εντολών του επεξεργαστή όπου μπορείτε να επιλέξετε σε ποιο συγκεκριμένο πρόγραμμα περιήγησης θέλετε να ανοίξετε το αρχείο.

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

Path Intellisense

Path Intellisense είναι μια προσθήκη για το Visual Studio Code που συμπληρώνει αυτόματα ονόματα αρχείων.

Μια παρόμοια επέκταση για τη Αυτόματη συμπλήρωση διαδρομής.

Εκτελεί την ίδια λειτουργικότητα με Path Intellisenseπροσθέτοντας τη διαδρομή και τα ονόματα αρχείων.

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

μέγεθος αρχείου

Αυτή η επέκταση εμφανίζει το μέγεθος του ενεργού αρχείου στη γραμμή κατάστασης του προγράμματος επεξεργασίας.

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

htmltagwrap

Αυτή η επέκταση ολοκληρώνει την επιλογή με ετικέτες HTML.

Είναι απλό - επιλέξτε ένα τμήμα ή γραμμή και την εντολή με τη συντόμευση πληκτρολογίου Alt + W

Εάν συνηθίσετε και θυμάστε την εντολή, τότε είναι πολύ ωραίο.

Ενεργό αρχείο στη γραμμή κατάστασης

Εμφανίζει τη διαδρομή προς το αρχείο στη γραμμή κατάστασης του προγράμματος επεξεργασίας. Στο κλικ - αντιγράφει τη διαδρομή προς το αρχείο στο πρόχειρο.

Bracket Pair Colorizer

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

Πριν εγκαταστήσω αυτήν την προσθήκη, είχα προβλήματα με το κλείσιμο παρενθέσεων, τώρα μπορώ να δω την ένθεση των παρενθέσεων ανά χρώμα.

Εικονίδια αρχείων και φακέλων

Απλούστερα εικονίδια VSCode με γωνιακή

Αυτή είναι μια συλλογή εικονιδίων για αρχεία. Έχω αναθεωρήσει πολύ τα εικονίδια, αλλά εγκαταστάθηκα σε αυτήν τη συνέλευση, tk. Εδώ είναι φακέλοι στυλ για node_modules και bower μόνο. Σε άλλες συγκροτήσεις, διαφορετικοί φάκελοι (για παράδειγμα: εικόνες, js, css κ.λπ.) έχουν τα δικά τους όμορφα εικονίδια, αλλά ταυτόχρονα είναι δύσκολο να διακρίνουν γρήγορα έναν φάκελο από ένα αρχείο, αλλά εδώ όλα είναι απλά - στο δέντρο των φακέλων και των αρχείων βλέπω καθαρά πού είναι ανοιχτό φάκελο και πού είναι κλειστό.

Υπάρχουν πολλά παρόμοια σύνολα στο Marketplace, ώστε να μπορείτε να δείτε μόνοι σας και να επιλέξετε τα στυλ εικονιδίων που σας ταιριάζουν. Μπορείτε να βάλετε πολλές συλλογές ταυτόχρονα. Είναι εύκολο να αλλάξετε εικονίδια - η ρύθμιση για την αλλαγή εικονιδίων βρίσκεται στο μενού στο γρανάζι που βρίσκεται στο κάτω μέρος της γραμμής εργαλείων:

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

Επαναλαμβάνω ότι μου άρεσε το θέμα Απλούστερα εικονίδια VSCode με γωνιακή

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

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

Προσωπικά, προτιμώ να δουλεύω με το Browsersync μέσω του Gulp, το οποίο είναι ταχύτερο, πιο λειτουργικό και δημιουργεί λιγότερα φορτία, αλλά επειδή το Gulp δεν είναι πάντα εγκατεστημένο σε κάθε έργο, πρέπει να γίνουν εργασίες για την επέκταση του Live Server.

Επεκτάσεις προφίλ για VSCode

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

Συνεργασία με το Git και το Github

Εκτός από το γεγονός ότι ο VSCode λειτουργεί με το git από προεπιλογή, υπάρχουν πολλές επεκτάσεις στο Marketplace για κάθε γούστο για συνεργασία με το Git και το Github. Στέκομαι έτσι:

Git History, GitLens, Git Merger, GitHub Pull Requests

RemoteFS

Αυτή η επέκταση σάς επιτρέπει να συνδεθείτε στο διακομιστή χρησιμοποιώντας πρωτόκολλα FTP και SFTP.

Το μόνο που χρειάζεται για να ανοίξετε έναν ιστότοπο ή ένα έργο που βρίσκεται στο διακομιστή είναι να προσθέσετε την ακόλουθη ρύθμιση στο αρχείο settings.json:

"remotefs.remote": ("first site": ("πρόγραμμα": "ftp", "host": "Host", "port": 21, "username": "FTP login", "password": "Password "," rootPath ":" / "," connectTimeout ": 10000)," second site ": (" σχήμα ":" ftp "," host ":" Host "," port ": 21," username ":" Χρήστης FTP "," κωδικός πρόσβασης ":" Κωδικός πρόσβασης "," rootPath ":" / "," connectTimeout ": 10000))

Τα δεδομένα σύνδεσης μπορούν να ληφθούν από τη φιλοξενία σας στην ενότητα Χρήστες FTP... Έδειξα συγκεκριμένα τη διάταξη της σύνδεσης για δύο ιστότοπους - σύμφωνα με αυτό το σχήμα, μπορείτε να συνδέσετε όσες τοποθεσίες θέλετε χρησιμοποιώντας διαφορετικά πρωτόκολλα (FTP ή SFTP).

Οι επεξεργαστές κειμένου που βασίζονται στον Ιστό αναπτύσσονται. Οι Atom, VS Code, Brackets, όπως τα ροκ τέρατα, κερδίζουν δημοτικότητα μεταξύ των προγραμματιστών ιστού (περιμένετε, τι έτος υπάρχει για τα «δημοφιλή ροκ τέρατα» στο ημερολόγιο τώρα; 🙂 - Ed.). Εναλλάσσονται σε αυτά τόσο από IDE όσο και από εγγενείς συντάκτες. Ο λόγος είναι εξαιρετικά απλός: τα αποθετήρια γεμίζουν με χρήσιμα πρόσθετα και όλοι μπορούν να δημιουργήσουν αυτά που λείπουν ανεξάρτητα, χρησιμοποιώντας καθαρά τεχνολογίες ιστού.

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

Στη γεύση του συγγραφέα

Η δική σας χρησιμοποίησε πραγματικά όλους τους καταχωρισμένους συντάκτες και κατέληξε να εγκατασταθεί στον κώδικα VS Υπάρχουν αρκετοί λόγοι για αυτό, αλλά ο κύριος είναι η απόδοση. Η Microsoft έκανε εξαιρετική δουλειά και, παρά την καθυστερημένη κυκλοφορία (ο κώδικας VS ήταν ο τελευταίος στη σκηνή), κατάφερε να συγκεντρώσει μια τεράστια κοινότητα γύρω του. Αυτό είχε θετική επίδραση στα πρόσθετα: μερικά από αυτά, κατά τη γνώμη μου, είναι το κεφάλι και οι ώμοι πάνω από τις εναλλακτικές λύσεις για το Atom. Σε αυτό το πλαίσιο, το κείμενο της αξιολόγησης θα περιέχει τα ονόματα των επεκτάσεων ειδικά για τον κώδικα VS. Ένας σύνδεσμος για μια κατά προσέγγιση λειτουργικότητα για το Atom θα δοθεί παρακάτω. Μην εκπλαγείτε αν αντιγράψετε το όνομα της προσθήκης και πραγματοποιήσετε αναζήτηση στο αποθετήριο Atom και δεν βρείτε τίποτα. Χρησιμοποιήστε τους συνδέσμους από την περιγραφή.

Λόγοι δημοτικότητας

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

Εντάξει, η απόδοση των εγγενών λύσεων είναι ασυναγώνιστη. Πώς λοιπόν οι νέοι "ελαφριοί" συντάκτες κέρδισαν τόσες πολλές καρδιές προγραμματιστών; Το κύριο επιχείρημα "για" είναι η στοίβα τεχνολογίας. Τι σημαίνει να αναπτύξετε ένα πρόσθετο για κάποιο Sublime ή Notepad ; Αυτό είναι σωστό, πρέπει να ασχοληθείς με τον Γ, Python (εδώ μπορεί να υπάρχει οποιαδήποτε άλλη γλώσσα προγραμματισμού), πρόγραμμα επεξεργασίας SDK και άλλα πράγματα που δεν είναι απαραίτητα για την κύρια εργασία.

Ποιος προγραμματιστής ιστού θα συμφωνούσε με αυτό το επίτευγμα; Έχει αρκετές από τις δικές του ανησυχίες και τεχνολογίες (μια πραγματική επανάσταση λύσεων λαμβάνει χώρα στο frontend). Αποδείχθηκε λοιπόν ότι το οικοσύστημα προσθηκών για προγραμματιστές ιστού για εγγενείς εκδότες έπασχε πάντα από την έλλειψη εξειδικευμένων λύσεων.

Η ιδέα της δημιουργίας διαδικτυακών επεξεργαστών για πλοιάρχους των ίδιων τεχνολογιών έλυσε αποτελεσματικά το πρόβλημα του κακού οικοσυστήματος των ενοτήτων τρίτων. Οι προγραμματιστές ιστού τρίτου μέρους πήδηξαν γρήγορα στο κύμα και άρχισαν να δημιουργούν τα gadget που χρειάζονται. Τα αποτελέσματα είναι εύκολο να ακολουθηθούν - τα επίσημα αποθετήρια είναι γεμάτα με πρόσθετα για μια μεγάλη ποικιλία εργασιών. Η δημιουργία νέων προσθηκών έγινε ευκολότερη: δεν χρειάζεται πλέον να μάθετε μια ξένη γλώσσα προγραμματισμού, το JavaScript είναι αρκετό.

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

Αποσπάσματα

Τα πρόσθετα αποσπάσματος είναι μια ξεχωριστή κατηγορία επεκτάσεων για συντάκτες. Είναι εξαιρετικά δημοφιλείς και σχεδόν κάθε σύγχρονο πλαίσιο ή βιβλιοθήκη στα αποθετήρια έχει μια μεμονωμένη πρόταση. Τα αποσπάσματα εξοικονομούν χρόνο. Θέλετε να περιγράψετε ένα πρότυπο τάξης; Κανένα πρόβλημα, απλώς εισαγάγετε μερικούς χαρακτήρες και λάβετε μερικές γραμμές τελικού κώδικα. Δεν έχει νόημα να αναλύεται λεπτομερώς τα πρόσθετα αποσπάσματος - υπάρχουν πάρα πολλά από αυτά. Ακολουθούν ορισμένοι σύνδεσμοι για προσθήκες αποσπάσματος που βασίζονται σε δημοφιλείς τεχνολογίες. Θα βρείτε μόνοι σας τα χαμένα.

Κωδικός VS:

Ατομο:

Περιτύλιγμα HTML

Κατά την περιγραφή της διάταξης μιας σελίδας, πρέπει συνεχώς να τυλίγετε μπλοκ, δηλαδή να τοποθετείτε ένα μπλοκ σε ένα άλλο. Έγραψα τη σήμανση για το μπλοκ και μετά συνειδητοποίησα ότι για την ευκολία του στυλ είναι καλύτερο να το τυλίξω σε ένα επιπλέον μπλοκ. Είναι εύκολο να το κάνουμε: γράφουμε την αρχική ετικέτα από την αρχή, μετακινούμε το μπλοκ στο τέλος και βάζουμε την ετικέτα κλεισίματος. Υπάρχει μόνο ένα πρόβλημα - είναι άβολο να το κάνετε αυτό σε μεγάλα μπλοκ. Υπάρχει κάθε ευκαιρία να τοποθετήσετε το "κάλυμμα" σε λάθος μέρος και να σπάσετε τα σημάδια. Ένα παρόμοιο πρόβλημα εμφανίζεται κατά το στυλ μεμονωμένων κομματιών κειμένου. Προσπαθήστε να εισαγάγετε γρήγορα πολλές ετικέτες ανοίγματος και κλεισίματος και μην τρελαίνετε. Τα πρόσθετα θα σας βοηθήσουν να αντιμετωπίσετε τις δυσκολίες htmltagWrap και Αναδίπλωση Atom σε ετικέτα... Με τη βοήθειά τους, η λύση θα μειωθεί στην επισήμανση ενός κομματιού κώδικα / γραμμής και πατώντας έναν συνδυασμό πλήκτρων.

• Κωδικός VS: htmltagwrap
• Ατομο: Αναδίπλωση Atom σε ετικέτα

Εξοικείωση με τα πλήκτρα πρόσβασης

Κατά τη μετάβαση σε νέο πρόγραμμα επεξεργασίας / IDE, αντιμετωπίζετε πάντα το ίδιο πρόβλημα - πρέπει να μάθετε νέα hotkeys. Μόλις συνηθίστηκα σε έναν συνδυασμό, όπως ο μπαμ - και όλα είναι διαφορετικά. Αρχίζετε να ξοδεύετε περισσότερο χρόνο σε συνήθεις ενέργειες από το συνηθισμένο και για άλλη μια φορά αναρωτιέστε εάν είναι σκόπιμο να στραφείτε σε κάτι νέο. Είμαι βέβαιος ότι οι προγραμματιστές που ξεκίνησαν την καριέρα τους πριν από 10-15 χρόνια το αντιμετώπισαν επανειλημμένα, οπότε σίγουρα θα εκτιμήσουν τη δύναμη των προσθηκών με βασικές δεσμεύσεις δημοφιλών συντακτών. Η κατώτατη γραμμή είναι απλή: συνηθίζετε τη διάταξη των πλήκτρων πρόσβασης του Visual Studio - κατεβάζετε το αντίστοιχο πρόσθετο και ο νέος επεξεργαστής αρχίζει να ανταποκρίνεται στις γνωστές εντολές.

Κωδικός VS:

Ατομο:

Αυτόματη συμπλήρωση για αρχεία

Από προεπιλογή, κανένας από τους συντάκτες δεν παρέχει αυτόματη συμπλήρωση ονομάτων αρχείων κατά τη στιγμή της σύνδεσης. Αυτό είναι συχνά η αιτία των σφαλμάτων. Πρέπει να θυμάστε την πλήρη διαδρομή προς τη θέση του αρχείου. Εάν το έργο είναι πιο περίπλοκο από το Hello world, τότε τα αρχεία ομαδοποιούνται σε διάφορους καταλόγους και θα πρέπει να χρησιμοποιήσετε τις υπηρεσίες ενός διαχειριστή αρχείων για να καθορίσετε τη διαδρομή. Όχι πολύ άνετα. Είναι πιο εύκολο να συνδέσετε την αυτόματη συμπλήρωση χρησιμοποιώντας το AutoFileName και την αυτόματη συμπλήρωση + προσθήκες. Στη συνέχεια, απομένει μόνο να πληκτρολογήσετε τα πρώτα γράμματα του ονόματος αρχείου / καταλόγου, μετά τα οποία το πρόσθετο θα προσφέρει επιλογές για αντικατάσταση.

• Κωδικός VS: AutoFileName
• Ατομο: προτάσεις αυτόματης συμπλήρωσης + διαδρομών

Λάιντερ

Η σύγχρονη διαδικασία ανάπτυξης είναι αδιανόητη χωρίς αυτοματοποίηση. Εάν κάτι μπορεί να αυτοματοποιηθεί και να μεταφερθεί σε εργαλεία, αξίζει να το κάνετε. Χωρίς κάθε είδους χνούδι στο μπροστινό μέρος, πουθενά, οπότε όταν εργάζεστε στο επόμενο έργο, πρέπει να φροντίσετε αμέσως για τη σύνδεση λύσεων όπως ESLint, HTMLHint, CSSLint,<твой_линтер>... Οι Linters ελέγχουν το στυλ σύνταξης του κώδικα και σε περίπτωση ασυνέπειας με τη διαμόρφωση, θα υποδεικνύουν αμέσως σφάλματα.

Τα Linters είναι ιδιαίτερα χρήσιμα στην ανάπτυξη της ομάδας, όταν οι πιθανότητες λήψης κωδικού "ετερόκλητης" αυξάνονται σημαντικά. Αναζητάτε παραδείγματα; Παρακαλώ! Υπάρχει μια συνεχής συζήτηση μεταξύ των προγραμματιστών JS σχετικά με την επιλογή των εισαγωγικών. Μερικοί είναι οπαδοί των singles, άλλοι είναι διπλοί, και άλλοι υποστηρίζουν την ιδέα του αντίθετου. Τα Linters θα σας βοηθήσουν να επιτύχετε συνέπεια και να προειδοποιείτε προγραμματιστές που είναι εκτός δρόμου.

Η συνέχεια είναι διαθέσιμη μόνο για μέλη

Επιλογή 1. Γίνετε μέλος της κοινότητας "ιστότοπος" για να διαβάσετε όλο το υλικό στον ιστότοπο

Η συμμετοχή στην κοινότητα κατά τη διάρκεια της καθορισμένης περιόδου θα σας ανοίξει την πρόσβαση σε ΟΛΑ τα υλικά του Hacker, θα αυξήσετε την προσωπική σας αθροιστική έκπτωση και θα σας επιτρέψει να συγκεντρώσετε ένα επαγγελματικό σκορ Xakep!

Το Visual Studio Code είναι ένας δωρεάν επεξεργαστής κειμένου πολλαπλών πλατφορμών από τη Microsoft, ο οποίος έγινε δημοφιλής λόγω της ελαφρότητας, της ισχυρής και επεκτάσιμης λειτουργικότητάς του και, φυσικά, του "freebie", σε αντίθεση με το PHPStorm, το Sublime κ.λπ.

Όπως τα περισσότερα σύγχρονα IDE, Κωδικός VS έχει πολλά πρόσθετα που επεκτείνουν τις αρχικές δυνατότητές του. Έχουμε επιλέξει 15 προσθήκες που θα είναι χρήσιμες σε κάθε προγραμματιστή που εργάζεται σε αυτόν τον επεξεργαστή.

Ανοιγμα σε πρόγραμμα περιήγησης

Από προεπιλογή, σε Κωδικός Visual Studio δεν υπάρχει τρόπος να ανοίξετε το αρχείο στο πρόγραμμα περιήγησης. Αυτή η επέκταση δεν προσθέτει μόνο τη λειτουργία "Άνοιγμα στο πρόγραμμα περιήγησης", αλλά σας επιτρέπει επίσης να ανοίξετε αρχεία σε οποιοδήποτε πρόγραμμα περιήγησης που είναι εγκατεστημένο στον υπολογιστή σας.

Κουκόκα

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

Απατεών

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

CSS Peek

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

Πλαίσιο HTML

Πλαίσιο HTML Απλοποιεί την εργασία με HTML εξαλείφοντας την ανάγκη να γράψετε μόνοι σας τις ετικέτες κεφαλής και σώματος. Πληκτρολογήστε ένα κενό αρχείο html, πατήστε το πλήκτρο Tab και Κωδικός Visual Studio θα δημιουργήσει ένα πρότυπο εγγράφου!

Πιο όμορφος

Πιο όμορφος Είναι ένα δημοφιλές πρόγραμμα επεξεργασίας κώδικα μεταξύ των προγραμματιστών ιστού που σας επιτρέπει να μεταφέρετε κώδικα γραμμένο από διαφορετικά άτομα σε μία φόρμα. Στις ρυθμίσεις Πιο όμορφος μπορείτε να ορίσετε αυτόματη εκτέλεση, η οποία θα μορφοποιήσει αμέσως τον κωδικό που γράφεται σε JS και CSS.

Πληροφορίες χρώματος

Ένα μικρό πρόσθετο που δίνει μια γρήγορη αναφορά στα χρώματα που χρησιμοποιούνται στο CSS. Τοποθετώντας το δείκτη του ποντικιού πάνω σε ένα όνομα χρώματος, μπορείτε να δείτε πώς φαίνεται και πώς να το γράψετε σε άλλες χρωματικές μορφές ( μαγεύω, rgb, hsl και cmyk).

Πρόγραμμα προβολής SVG

Αυτή η επέκταση σάς επιτρέπει να εργάζεστε με αρχεία SVG: μπορείτε να επεξεργαστείτε αρχεία SVG, να τα μετατρέψετε σε μορφή PNG και να δημιουργήσετε σχήματα διευθύνσεων URL δεδομένων.

Επισήμανση TODO

Αυτό το πρόσθετο σας επιτρέπει να επισημάνετε ημιτελή μέρη στον κώδικά σας, διευκολύνοντας το έργο σας. Από προεπιλογή, έχουν οριστεί μόνο ετικέτες ΝΑ ΚΑΝΩ (φινίρισμα) και ΦΤΙΑΞΕ ΜΕ (fix), αλλά μπορείτε να δημιουργήσετε και τους δικούς σας τύπους ετικετών.

Γραμματοσειρές με εικονίδια

Μια επέκταση που προσθέτει σε Κωδικός Visual Studio υποστήριξη για περίπου 20 δημοφιλείς γραμματοσειρές εικονιδίων, συμπεριλαμβανομένων Γραμματοσειρά φοβερό, Ιόνια, Γλυφικά, Σχεδιασμός υλικών...

Ελαχιστοποιήστε

Βοηθητικό πρόγραμμα για βελτιστοποίηση και συμπίεση κώδικα. Ελαχιστοποιήστε δουλεύει με Html, Js και CSS αρχεία και λειτουργεί εξαιρετικά με προσθήκες όπως uglify-js, καθαρό-css και html-ελαχιστοποιητής.

Αλλαγή περίπτωσης

Κωδικός VS επιτρέπει την επιλογή να μετατραπεί μόνο σε κεφαλαία και πεζά γράμματα. Μέσω Αλλαγή περίπτωσης, θα έχετε πρόσβαση σε μεγάλο αριθμό μητρώων (φίδι, καμήλα κ.λπ.).

Regex Previewer

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

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

1. Ζωντανός διακομιστής
2. Αυτόματη Κλείσιμο Ετικέτας
3. Κόστος εισαγωγής
4. Υλικό θέμα
5. Apache Συνδ
6. Πακέτο Ρωσικής Γλώσσας
7. Μικρό μπόνους

1. Ζωντανός διακομιστής

Ενεργοποίηση του Live Server για αρχεία .html ή .htm:

Ενεργοποίηση του Live Server εάν δεν υπάρχουν αρχεία .html ή .htm:

Πώς να ρυθμίσετε την αυτόματη ανανέωση σελίδας για αρχεία PHP χρησιμοποιώντας το Live Server

2. Sass

Υποστήριξη σύνταξης Sass: εσοχή, αυτόματη συμπλήρωση και άλλα

Μεταγλωττίζει αρχεία SASS / SCSS σε CSS σε πραγματικό χρόνο

Για να ενεργοποιήσετε πρέπει να πατήσετε Παρακολουθήστε sass στη γραμμή κατάστασης

Τι περιλαμβάνει το Live Sass Complier:

1. επιλέξτε το φάκελο εξαγωγής για το μεταγλωττισμένο αρχείο
2. Επιλογή στυλ CSS (εκτεταμένη, συμπαγής, συμπυκνωμένη, ένθετη)
3. επιλογή ονόματος επέκτασης (.css ή .min.css)
4. συμβατότητα επέκτασης Ζωντανός διακομιστής
5. ρύθμιση αυτόματων προθημάτων προμηθευτών
6. Και ούτω καθεξής

Επισήμανση ετικετών - άνοιγμα και κλείσιμο

Η επισήμανση των ετικετών μπορεί να προσαρμοστεί για εσάς. Η εγκατάστασή μου:

"highlight-matching-tag.leftStyle": ("borderWidth": "2px 2px 2px 2px", "borderStyle": "solid", "borderColor": "yellow", "borderRadius": "5px"), "highlight-matching-tag.rightStyle": ("borderWidth": "2px 2px 2px 2px", "borderStyle": "solid", "borderColor": "yellow", "borderRadius": "5px"),

Επισήμανση χρωμάτων ιστού στον επεξεργαστή με το αντίστοιχο χρώμα

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

Όταν αλλάζετε μια αντιστοιχισμένη ετικέτα, η δεύτερη θα αλλάζει αυτόματα.

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

"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"],

8. Αυτόματη Κλείσιμο Ετικέτας

Αυτόματες ετικέτες κλεισίματος

Λειτουργεί για όλες τις γλώσσες από προεπιλογή: HTML, PHP, JavaScript, markdown, liquid κ.λπ. Μπορείτε να αλλάξετε τις ρυθμίσεις στο setting.json

"auto-close-tag.activationOnLanguage": ["php", "javascript", "javascriptreact", "typescript", "typescriptreact", "plaintext", "markdown", "vue", "liquid",]

9. Κόστος εισαγωγής

Αυτή η επέκταση θα εμφανίσει το μέγεθος του ενσωματωμένου πακέτου στο πρόγραμμα επεξεργασίας.

10. Υλικό θέμα

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

Τότε οι ρυθμίσεις για το settings.json θα είναι έτσι

"editor.fontLigatures": true, "editor.fontFamily": "Fira Code", "editor.fontWeight": "100",

11. Apache Conf

Υποστήριξη σύνταξης Apache. Βολικό για την επεξεργασία αρχείων με επεκτάσεις .htaccess... Υποστηρίζει επίσης τύπους αρχείων: .conf, .htgroups, .htpasswd