10 Extensive Brackets Extensions που χρειάζεστε πραγματικά

2019

Το Brackets.io κυκλοφόρησε πρόσφατα την έκδοση 1.2, με μερικά υπέροχα νέα χαρακτηριστικά τα οποία μπορείτε να διαβάσετε στο blog τους. Έχουμε καταρτίσει μια λίστα με 10 από τις καλύτερες και πιο χρήσιμες επεκτάσεις βραχίονα έξω εκεί (χωρίς ιδιαίτερη σειρά), μαζί με τις πλήρεις οδηγίες για κάθε επέκταση.

Προεκτάσεις βραχίονα

1.Κωδικός αναδίπλωσης

Σε αντίθεση με πολλούς άλλους IDE και συντάκτες κώδικα, τα στηρίγματα δεν διαθέτουν την επιλογή "δίπλωμα κώδικα" από προεπιλογή. Με τον κώδικα Folding, μπορείτε εύκολα να συμπτύξετε μεγάλα τμήματα του κώδικα σας σε μία γραμμή. Η επέκταση κωδικοποίησης κώδικα είναι διαθέσιμη στο Github και στον διαχειριστή επέκτασης Brackets.

Πώς να χρησιμοποιήσετε

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

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

2. Lorem Pixel

Υπάρχουν πολλοί τρόποι για τη δημιουργία κειμένου κράτησης θέσης, αλλά οι προγραμματιστές του web development στο μπροστινό μέρος συχνά χρειάζονται εικόνες placeholder. Αντί να προσπαθήσετε να δημιουργήσετε μια κενή εικόνα κράτησης θέσης, χρησιμοποιήστε την επέκταση Lorem Pixel. Σας επιτρέπει να εισαγάγετε τις υπέροχες εικόνες με σύμβολο κράτησης θέσης με οποιοδήποτε μέγεθος θέλετε. Το δροσερό μέρος για το Lorem Pixel είναι ότι σας επιτρέπει να επιλέξετε την κατηγορία από την οποία θέλετε μια εικόνα.

Αν αυτό δεν είναι αρκετά καλό, οι εικόνες που έχουν τοποθετηθεί στο placeholder συνεχίζουν να αλλάζουν κάθε φορά που επαναφορτίζετε τη σελίδα! Οι εικόνες μπορούν συχνά να διαταράξουν τα χρωματικά σχήματα, οπότε η Lorem Pixel σας δίνει επίσης την επιλογή 'σε κλίμακα του γκρι' για να χρησιμοποιήσετε μόνο τις εικόνες με τη μορφή placeholder. Αυτή η επέκταση τροφοδοτείται από το lorempixel.com και διατίθεται από τον διαχειριστή επεκτάσεων στηρίγματος.

Χρησιμοποιώντας το Lorem Pixel

Πώς να χρησιμοποιήσετε

Μόλις εγκαταστήσετε την επέκταση Lorem Pixel, στο λογότυπο επέκτασης (το παράθυρο στα δεξιά με το κουμπί Live Preview) εμφανίζεται το λογότυπο Lorem Pixel - ένα τετράγωνο που έχει ελεγχθεί. Κάντε κλικ στο λογότυπο για να εμφανιστεί ένα πλαίσιο ρυθμίσεων. Ορίστε το απαιτούμενο μέγεθος εικόνας και την προτιμώμενη κατηγορία εικόνας. Αν θέλετε εικόνες σε κλίμακα του γκρι, ελέγξτε την επιλογή απόστασης σε γκρι. Είτε αντιγράψτε τη σύνδεση στο πρόχειρο και χρησιμοποιήστε την όπως απαιτείται είτε εισάγετε την τρέχουσα θέση του δρομέα.

3. Autoprefixer

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

Πώς να χρησιμοποιήσετε

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

Το Autoprefixer σας επιτρέπει επίσης να προσθέσετε προσαρμοσμένα προθέματα στις ρυθμίσεις του. Για να μεταβείτε στις ρυθμίσεις επέκτασης: Επεξεργασία ⇒ Ρυθμίσεις Autoprefixer.

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

4. Προεπισκόπηση σήμανσης

Markdown είναι μια όμορφη γλώσσα σήμανσης απλού κειμένου που μετατρέπεται εύκολα σε HTML. Η προεπισκόπηση αξιοπιστίας δίνει την απόδοση του Markdown ακριβώς κάτω από την έκδοση κειμένου. Σας επιτρέπει να επιλέξετε ανάμεσα σε δύο διαφορετικά στυλ, Github Flavored Markdown και Standard Markdown.

Υπάρχουν τρία θέματα που μπορείτε να επιλέξετε για το παράθυρο προεπισκόπησης - Light, Dark, και Classic. Η προεπισκόπηση σήμανσης έχει επίσης μια επιλογή συγχρονισμού κύλισης (ενεργοποιημένη από προεπιλογή). Η επέκταση μπορεί να μεταφορτωθεί από το Github ή από τον διαχειριστή επεκτάσεων βραχίονων.

Πώς να χρησιμοποιήσετε

Ανοίξτε ένα αρχείο .md ή ένα αρχείο .markdown . Αν έχετε εγκαταστήσει προεπισκόπηση σήμανσης, το κουμπί M ↓ θα εμφανιστεί στα δεξιά. Κάντε κλικ σε αυτό και θα εμφανιστεί το Markdown. Για να αλλάξετε το θέμα ή να απενεργοποιήσετε το συγχρονισμό κύλισης, απλά κάντε κλικ στο εικονίδιο με το γρανάζι στην επάνω δεξιά γωνία της ενότητας προεπισκόπησης Markdown.

5. Εικονίδια στηρίγματος

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

Συμβουλή μπόνους:

Τα εικονίδια Brackets χρησιμοποιούν εικονίδια από το έργο Ionicons. Μπορείτε επίσης να ελέγξετε την επέκταση των εικονιδίων αρχείου (ένα διχαλωτό του έργου Icon Brackets) που χρησιμοποιεί εικονίδια από το έργο Font Awesome. Βυθίζεται στην προσωπική προτίμηση στο τέλος.

Πώς να χρησιμοποιήσετε

Απλά εγκαταστήστε την επέκταση και επανασυνδέστε τα στηρίγματα (F5).

6. Γραμμή εργαλείων εγγράφων

Οι βραχίονες στερούνται καρτέλες. Απλό και απλό γεγονός. Η επέκταση της γραμμής εργαλείων "Έγγραφα" προσθέτει αυτή τη λειτουργία. Όλα τα αρχεία που βρίσκονται στην 'ενεργή' ενότητα της πλαϊνής γραμμής εμφανίζονται ως καρτέλες σε αυτήν την επέκταση. Μπορείτε επίσης να αποκρύψετε την πλαϊνή γραμμή και να χρησιμοποιήσετε μόνο τη Γραμμή εργαλείων "Έγγραφα" για μια ωραία διεπαφή.

Πώς να χρησιμοποιήσετε

Τοποθετήστε την επέκταση και επανατοποθετήστε τις στηρίξεις (F5).

7. Στηρίγματα Git

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

Σημείωση: Για να χρησιμοποιήσετε το Gat Bracket πρέπει να έχετε εγκαταστήσει το Git στον υπολογιστή σας. Αφού εγκαταστήσετε την επέκταση, ίσως χρειαστεί να εισαγάγετε τη διαδρομή στο εκτελέσιμο αρχείο Git (αν δεν βρίσκεται στην προεπιλεγμένη διαδρομή).

Πώς να χρησιμοποιήσετε

Δέσμευση ενός αρχείου με τη βοήθεια βραχίονα Git

Χρησιμοποιώντας τα στηρίγματα Το Git είναι αρκετά ευθεία προς τα εμπρός. Κάντε το τοπικό σας φάκελο repos Github το φάκελο του έργου στο πλαίσιο Brackets. Στη συνέχεια, ανοίξτε ένα αρχείο, πραγματοποιήστε κάποιες αλλαγές και αποθηκεύστε το. Στη συνέχεια, μπορείτε να προχωρήσετε και να κάνετε κλικ στο εικονίδιο Git στα δεξιά και αυτό θα ανοίξει το παράθυρο Brackets Git στο κάτω μέρος. Θα αναφέρει τυχόν τροποποιήσεις που έχετε κάνει στα αρχεία σας.

Ελέγξτε τα αρχεία που θέλετε να δεσμεύσετε και, στη συνέχεια, κάντε κλικ στο κουμπί Commit. Αυτό θα ανοίξει ένα αναδυόμενο παράθυρο με τις αλλαγές που έγιναν. Εισαγάγετε το μήνυμα Commit και κάντε κλικ στο Ok. Και έχετε επιτελέσει με επιτυχία ένα αρχείο στο Git απευθείας από τις Βάσεις!

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

Ρύθμιση παραμέτρων

Ανοίξτε το παράθυρο Gat Brackets και κάντε κλικ στο κουμπί Ρυθμίσεις (Δεύτερο από τα δεξιά). Μη διστάσετε να ρυθμίσετε τις αγκύλες Git οπωσδήποτε όπως σας αρέσει.

Για να προβάλετε το αρχείο και το ιστορικό δεσμεύσεων

Απλά κάντε κλικ στα αντίστοιχα κουμπιά για να δείτε το ιστορικό αρχείων σας και το ιστορικό δεσμεύσεων που είναι όμορφα αναγραφόμενα. Αναφέραμε ότι μπορείτε να αλλάξετε το avatar σε είτε ένα ασπρόμαυρο avatar, ένα έγχρωμο avatar, ή ο Gravatar σας;

Ιστορικό δεσμεύσεων

8. Lint ALL Things

Lint ΟΛΑ τα πράγματα. Τα παντα. Αυτή η επέκταση βάζει όλα τα αρχεία σας ταυτόχρονα. Πολύ χρήσιμο όταν έχετε ένα μεγάλο έργο με πολλά συνδεδεμένα αρχεία. Όλα τα λάθη χνούδι εμφανίζονται ωραία σε ένα παράθυρο.

Πώς να χρησιμοποιήσετε

Για να χρησιμοποιήσετε τα Lint ALL Things, μεταβείτε στην καρτέλα Προβολή και κάντε κλικ στο Lint whole Project .

9. Στηρίγματα

Στηρίγματα Το Todo είναι μια τακτοποιημένη μικρή επέκταση που δείχνει όλα τα σχόλια του TODO σε μια τακτοποιημένη μορφή λίστας. Από προεπιλογή, υποστηρίζει 5 ετικέτες - TODO, ΣΗΜΕΙΩΣΗ, FIXME, ΑΛΛΑΓΕΣ και ΜΕΛΛΟΝ. Μπορείτε επίσης να επισημάνετε σχόλια ως Έγινε. Στις επιλογές προβολής μπορείτε να φιλτράρετε τα σχόλια ανά ετικέτες. Στηρίγματα Το Todo σάς επιτρέπει να ορίσετε προσαρμοσμένα χρώματα για ετικέτες καθώς και τις δικές σας ετικέτες, σε περίπτωση που θέλετε να δημιουργήσετε δημιουργικά με τα σχόλιά σας.

Εάν εργάζεστε σε ένα μεγάλο έργο και πρέπει να παρακολουθείτε τα σχόλια από πολλά αρχεία, μπορείτε να αλλάξετε το εύρος της αναζήτησης του Brackets Todo. Θέλετε να αποκλείσετε ορισμένα αρχεία και φακέλους όπως φακέλους προμηθευτών; Μην ανησυχείς. Απλώς προσθέστε τη διαδρομή στη λίστα εξαιρέσεων. Μπορείτε να προσαρμόσετε τις ρυθμίσεις για κάθε έργο προσθέτοντας ένα αρχείο .todo στον κατάλογο ριζικών έργων.

Μπορείτε να περάσετε από όλες τις επιλογές ρυθμίσεων στην τεκμηρίωση github.

Πώς να χρησιμοποιήσετε

Για να χρησιμοποιήσετε το Brackets Todo, προσθέστε ένα σχόλιο στον κώδικα σας με μια ετικέτα μέσα. Το όνομα της ετικέτας πρέπει να είναι κεφαλαία, ακολουθούμενο από ένα τελεία (:). Για να δείτε όλα τα Todo, απλά κάντε κλικ στο εικονίδιο Todo στο δεξί παράθυρο επέκτασης.

Ρύθμιση:

Για να επιτρέψετε στα σχόλια του Todo για HTML: Απλά ανοίξτε τις ρυθμίσεις - Κάντε κλικ στο εικονίδιο Todo → Ρυθμίσεις (εικονίδιο με το γρανάζι) - και κάντε κλικ για να ανοίξετε το αρχείο .todo. Σε αυτό το αρχείο, προσθέστε αυτόν τον κωδικό:
```
 {"regex": {"πρόθεμα": "(? :)"}} 
```
Πώς φαίνεται το μενού ρυθμίσεων Todo
Για να αλλάξετε το πεδίο αναζήτησης: Προσθέστε αυτόν τον κώδικα στο αρχείο .todo:
```
 {"αναζήτηση": {"πεδίο εφαρμογής": "το έργο μου"}} 
```
Για να εξαιρέσετε οποιοδήποτε αρχείο / φάκελο / επέκταση αρχείου από την εμβέλεια αναζήτησης: Προσθέστε αυτόν τον κώδικα στο αρχείο .todo:
```
 {"αναζήτηση": {"πεδίο εφαρμογής": "το έργο μου", 
```
"ExcludeFolders": ["yourfolder"]
```
 "excludeFiles": ["yourfile"] "excludeFiles": [".yourextension"]]} 
```