Brackets: Ένας επεξεργαστής κειμένου για τη δημιουργία ιστοσελίδων

Το Brackets είναι ένας επεξεργαστής κειμένου ανοικτού κώδικα που χρησιμοποιείται κυρίως για την ανάπτυξη εφαρμογών Διαδικτύου. Δημιουργήθηκε από την Adobe Systems και είναι γραμμένος σε HTML, CSS και Javascript.

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

Στιγμιότυπο της εφαρμογής Brackets

Πάνω δεξιά υπάρχουν εικονίδια για να ανοίξετε το διαχειριστή επεκτάσεων αλλά και να ελέγξετε τον κώδικα σας στο Chrome (επιλογή Live Preview). Έχετε επίσης τη δυνατότητα να έχετε είτε ένα ανοιχτόχρωμο είτε ένα σκουρόχρωμο template (υπάρχουν φυσικά και άλλα που όμως δεν είναι ενσωματωμένα) ενώ υπάρχει ενσωματωμένη και η δυνατότητα της αυτόματης συμπλήρωσης του κώδικα σας, μία λειτουργία που εκτελείται πολύ γρήγορα.

Δυνατότητες

Μερικές ακόμα πολύ ενδιαφέρουσες δυνατότητες είναι οι εξής:

Live Preview

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

QuickEdit

Η λειτουργία αυτή εξαρτάται από την ενέργεια που εκτελείτε. Έτσι πατώντας CTRL+E πάνω σε μία ετικέτα θα ανοίξει ένας ενσωματωμένος επεξεργαστής (inline editor) δίνοντας σας τη δυνατότητα να αλλάξετε τον κώδικα CSS που είναι συνδεδεμένος με την ετικέτα χωρίς να μεταβείτε σε άλλο μέρος της ιστοσελίδας ή σε κάποιο άλλο αρχείο.

Αν πατήσετε CTRL + E πάνω στο όνομα ενός χρώματος ανοίγει ένα ενσωματωμένο παράθυρο στο οποίο έχετε τη δυνατότητα να επιλέξετε το χρώμα της αρεσκείας σας.

JSLint

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

 

Επεκτάσεις

Για να αξιοποιήσετε καλύτερα το Brackets μπορείτε να προσθέσετε, με τη βοήθεια του διαχειριστή επεκτάσεων, διάφορες επεκτάσεις όπως είναι οι εξής:

1. Emmet

Είναι μία από τις διασημότερες επεκτάσεις αφού σας βοηθάει να βελτιώσετε σημαντικά το χρόνο συγγραφής κώδικα σε HTML και CSS. Εσείς γράφετε κάποιες συντομογραφίες, που μοιάζουν συντακτικά με τη CSS, και πατώντας το πλήκτρο TAB μετατρέπονται αυτόματα στον επιθυμητό κώδικα HTML. Έτσι αν γράψετε div και πατήσετε το πλήκτρο TAB παράγεται ο κώδικας <div></div> ενώ αν γράψετε div>p>a δημιουργείται ο κώδικας <div><p><a href=""></a></p></div>. Δείτε στη συνέχεια και ένα βίντεο για τη χρήση του Emmet στο περιβάλλον του Brackets.

Έχετε επίσης τη δυνατότητα να ενσωματώσετε ένα κομμάτι κώδικα μέσα σε μία ετικέτα, να διαγράψετε μία ετικέτα (ταυτόχρονα το άνοιγμα και το κλείσιμο της ετικέτας) και πολλά άλλα.

2. Beautify

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