Πώς να προσθέσετε προσαρμοσμένα αποσπάσματα κώδικα στο Atom
Δεν είναι τυχαίο αυτό Ατομο, ο επεξεργαστής πηγαίου κώδικα που δημιουργήθηκε από τον Github είναι δημοφιλής στην κοινότητα ανάπτυξης ιστοσελίδων. Δεν είναι μόνο εύκολα επεκτάσιμη με χιλιάδες Atom Packages, και έχει ένα ευρεία υποστήριξη γλώσσας, αλλά σχεδόν το κάθε μέρος είναι προσαρμόσιμη από τον χρήστη.
Χρησιμοποιώντας το Atom's Απόσπασμα χαρακτηριστικό, μπορείτε να κάνετε την εργασία σας κωδικοποίησης πιο παραγωγική, όπως από επαναχρησιμοποιώντας επαναλαμβανόμενα αποσπάσματα κώδικα μπορείτε να μειώσετε το επαναλαμβανόμενο μέρος της δουλειάς σας. Σε αυτή τη θέση, θα σας δείξω πώς μπορείτε χρησιμοποιήστε τα ενσωματωμένα αποσπάσματα κώδικα του Atom, και δημιουργήστε τα δικά σας προσαρμοσμένα αποσπάσματα.
Χρησιμοποιήστε ενσωματωμένα αποσπάσματα κώδικα
Από προεπιλογή, το Atom συνοδεύεται ενσωματωμένα αποσπάσματα κώδικα, κάθε ένα από τα οποία είναι δεσμευμένο σε ένα πεδίο που ανήκουν σε συγκεκριμένο τύπο αρχείου. Για παράδειγμα, αν εργάζεστε σε ένα αρχείο με .js επέκταση, μόνο αποσπάσματα που ανήκουν στο πεδίο εφαρμογής JavaScript θα είναι διαθέσιμα για αυτό το αρχείο.
Για να δω όλα τα διαθέσιμα αποσπάσματα για τον τρέχοντα τύπο αρχείου, πατήστε Alt + Shift + S. Εάν επιλέξετε ένα απόσπασμα από την αναπτυσσόμενη λίστα και κάντε κλικ σε αυτό, το Atom θα εισαγάγει το πλήρες απόσπασμα στον επεξεργαστή σας χωρίς περαιτέρω παρενόχληση.
Εάν γνωρίζετε ήδη τις επιλογές, δεν χρειάζεται απαραίτητα να φορτώσετε ολόκληρη τη λίστα. Όταν αρχίζετε να πληκτρολογείτε, το Atom εμφανίζει ένα αυτόματης συμπλήρωσης που περιέχει τα διαθέσιμα αποσπάσματα κώδικα που ανήκουν στο συγκεκριμένο πεδίο εφαρμογής και τη συμβολοσειρά που έχετε πληκτρολογήσει μέχρι στιγμής.
Για παράδειγμα, εάν πληκτρολογήσετε το h χαρακτήρα σε α .html αρχείο, μια αναπτυσσόμενη λίστα με όλα τα ενσωματωμένα αποσπάσματα HTML που αρχίζουν με h θα εμφανιστει.
Κάνοντας κλικ σε οποιαδήποτε επιλογή, το Atom θα το κάνει επικολλήστε την πλήρη ετικέτα HTML (π.χ. ), και τοποθετήστε το δρομέα στην ετικέτα έναρξης και κλεισίματος.
Εάν δεν θέλετε να ασχοληθείτε με την αναπτυσσόμενη λίστα, μπορείτε να επιτύχετε το ίδιο αποτέλεσμα πληκτρολογώντας h1, και πατήστε Tab ή Enter - και τα δύο αυτά πλήκτρα εισαγάγετε το πλήρες απόσπασμα κώδικα που ανήκει στο πρόθεμα του αποσπάσματος.
Προσθέτοντας τα προσαρμοσμένα αποσπάσματα κώδικα
1. Βρείτε το αρχείο ρυθμίσεων
Για να προσθέσετε τα δικά σας προσαρμοσμένα αποσπάσματα κώδικα στο Atom, πρώτα πρέπει να βρείτε το αρχείο ρύθμισης που ονομάζεται snippets.cson αυτό είναι ένα Γράφημα Object Notation αρχείο.
Κάνε κλικ στο Αρχείο> Αποσπάσματα ... μενού στην επάνω μπάρα και το Atom θα ανοίξει το snippets.cson αρχείο στο οποίο μπορείτε να προσθέσετε τα δικά σας προσαρμοσμένα αποσπάσματα.
2. Βρείτε το σωστό πεδίο εφαρμογής
Θα χρειαστείτε τέσσερα πράγματα για να προσθέσετε το προσαρμοσμένο απόσπασμά σας:
ο όνομα του πεδίου εφαρμογής
ο όνομα του αποσπάσματος
ο πρόθεμα που θα λειτουργήσει ως η λαβή του αποσπάσματος
ο σώμα του αποσπάσματος
Το όνομα, το πρόθεμα και το σώμα του αποσπάσματος (2-4) εξαρτάται αποκλειστικά από εσάς, ωστόσο πρέπει να το κάνετε βρείτε το όνομα του πεδίου εφαρμογής (1) προτού προσθέσετε τα προσαρμοσμένα αποσπάσματα.
Για να βρείτε το πεδίο που χρειάζεστε, κάντε κλικ στο Αρχείο> Ρυθμίσεις στην πάνω γραμμή μενού, στη συνέχεια βρείτε το Πακέτα στην καρτέλα Ρυθμίσεις. Εδώ, εκτελέστε μια αναζήτηση για το πεδίο που χρειάζεστε, για παράδειγμα αν θέλετε να προσθέσετε αποσπάσματα κώδικα στη γλώσσα HTML, πληκτρολογήστε HTML στη γραμμή αναζήτησης.
Κάνε κλικ στο πακέτο υποστήριξης γλωσσών της επιλεγμένης γλώσσας και ανοίξτε τις δικές του ρυθμίσεις. Μεταξύ των Ρυθμίσεις γραμματικής, μπορείτε να βρείτε γρήγορα το όνομα του πεδίου εφαρμογής, όπως μπορείτε να δείτε στο παρακάτω στιγμιότυπο οθόνης.
Εδώ είναι μερικά πεδία που μπορεί να θέλετε να χρησιμοποιήσετε στα έργα Atom:
Απλό κείμενο: .text.περίπου
HTML: .text.html.basic
CSS: .source.css
Sass: .source.sass
ΠΙΟ ΛΙΓΟ: .source.css.less
JavaScript: .source.js
PHP: .text.html.php
Πύθων: .source.python
Ιάβα: .source.java
Μην ξεχνάτε ότι θα πρέπει να το κάνετε προσθέστε μια κουκκίδα (.) μπροστά από το όνομα του πεδίου εφαρμογής για να το χρησιμοποιήσετε στο snippets.cson αρχείο.
3. Δημιουργία αποσπασμάτων κώδικα μιας γραμμής
Για να δημιουργήσετε ένα απόσπασμα κώδικα μιας γραμμής, πρέπει να προσθέσετε το πεδίο, το όνομα, το πρόθεμα και το σώμα του αποσπάσματος στην snippets.cson αρχείου, χρησιμοποιώντας την ακόλουθη σύνταξη:
'.text.html.basic': 'Τίτλος Widget': 'πρόθεμα': 'wti' body ':''
Αυτό το απόσπασμα παραδείγματος προσθέτει α ετικέτα με το widget-title class στο πεδίο HTML. Μπορείτε να προσθέσετε οποιοδήποτε άλλο απόσπασμα κώδικα μονής γραμμής στον επεξεργαστή Atom ακολουθώντας αυτή τη σύνταξη.
Αφού αποθηκεύσετε το αρχείο ρυθμίσεων, όποτε εσείς πληκτρολογήστε το πρόθεμα & πατήστε το πλήκτρο Tab, Το Atom θα επικολλήσει το σώμα του αποσπάσματος που ανήκει στον επεξεργαστή κώδικα. Το όνομα του αποσπάσματος (στο παράδειγμα Τίτλος Widget) θα εμφανιστεί στο πλαίσιο αποτελεσμάτων αυτόματης συμπλήρωσης.
4. Δημιουργήστε αποσπάσματα κώδικα πολλών γραμμών
Τα αποσπάσματα κώδικα πολλών γραμμών χρησιμοποιήστε λίγο διαφορετική σύνταξη. Πρέπει να προσθέσετε τα ίδια δεδομένα με τα αποσπάσματα μιας γραμμής - το πεδίο εφαρμογής, το όνομα, το πρόθεμα και το σώμα του αποσπάσματος.
Αυτό που είναι διαφορετικό εδώ είναι ότι πρέπει να τοποθετήσετε το σώμα του αποσπάσματος μέσα σε ένα ζευγάρι "" "" (τρία διπλά εισαγωγικά).
Αν θέλετε να προσθέσετε περισσότερα από ένα προσαρμοσμένα αποσπάσματα στο ίδιο πεδίο, προσθέστε το όνομα του πεδίου εφαρμογής μόνο μία φορά, στη συνέχεια, απαριθμήστε τα αποσπάσματα μία προς μία:
'.text.html.basic': 'Τίτλος Widget': 'πρόθεμα': 'wti' body ':'"Σύνδεσμος εικόνας": "πρόθεμα": "IML" σώμα ":" "" "" ""
5. Προσθέστε την καρτέλα Σταματά
Μπορείτε να διευκολύνετε περαιτέρω τη χρήση των προσαρμοσμένων αποσπασμάτων κώδικα προσθέτοντας η καρτέλα σταματά στο σώμα του αποσπάσματος. Οι καταγραφές καρτέλας δείχνουν τα σημεία όπου μπορεί να πλοηγηθεί ο χρήστης χρησιμοποιώντας το πλήκτρο Tab. Με το πάτημα των καρτελών μπορείτε να αποθηκεύσετε το χρόνο που χρειάζεται η πλοήγηση στο κείμενο.
Μπορείτε να προσθέσετε στάσεις καρτελών χρησιμοποιώντας το $ 1, $ 2, $ 3, ... σύνταξη. Το Atom θα τοποθετήσει τον δρομέα στον τόπο που βρίσκει $ 1, τότε μπορείτε να μεταβείτε στο $ 2 με το πλήκτρο Tab, έπειτα στο $ 3, και ούτω καθεξής.
Atom σας επιτρέπει να προσθέστε επιπλέον πληροφορίες στα αποσπάσματα σας χρησιμοποιώντας προαιρετικές παραμέτρους. Αυτή η λειτουργία μπορεί να είναι χρήσιμη αν κάποιος άλλος χρησιμοποιεί επίσης τον επεξεργαστή σας και θέλετε να τον ενημερώσετε για το σκοπό του αποσπάσματος ή εάν έχετε τόσο περίπλοκα προσαρμοσμένα αποσπάσματα που πρέπει να προσθέσετε σημειώσεις σε αυτά.
Οι τιμές των προαιρετικών παραμέτρων είναι εμφανίζεται στο πλαίσιο αποτελεσμάτων αυτόματης συμπλήρωσης που εμφανίζεται όταν αρχίζετε να πληκτρολογείτε ένα πρόθεμα. Στο παρακάτω παράδειγμα, πρόσθεσα μια περιγραφή & α Περισσότερο… σύνδεση με την προηγούμενη Τίτλος Widget προσαρμοσμένο απόσπασμα:
'.text.html.basic': 'Τίτλος Widget': 'πρόθεμα': 'wti' body ':'"description": "Μπορείτε να προσθέσετε έναν τίτλο widget με αυτό το απόσπασμα στο widget sidebar." descriptionMoreURL ":" http://hongkiat.com "
Όταν ο χρήστης αρχίσει να πληκτρολογεί το πρόθεμα wti, οι επιπλέον πληροφορίες (περιγραφή + σύνδεσμος) θα εμφανιστούν στο κάτω μέρος του πλαισίου αποτελεσμάτων αυτόματου συμπληρώματος. Ρίξτε μια ματιά στο άλλες προαιρετικές παραμέτρους μπορείτε να χρησιμοποιήσετε για να προσθέσετε επιπλέον πληροφορίες στα προσαρμοσμένα αποσπάσματα.
