Ένας οδηγός για αποσπάσματα κειμένου υψηλού επιπέδου

Πρόσφατα άλλαξα θέσεις εργασίας, κάτι που συνεπάγεται μεγάλο εγκλιματισμό: νέοι συνάδελφοι για φιλία, νέοι όροι για μάθηση, νέο περιβάλλον ανάπτυξης για εσωτερικοποίηση. Αλλά πάνω απ 'όλα, ο διακόπτης ήρθε με μια αλλαγή στις γλώσσες προγραμματισμού, μακριά από την καθαρή αισθητική του Python, και κατευθείαν στον γωνιακό και σγουρό κόσμο της JavaScript.

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

Μου αρέσουν τα Sublime Text Snippets επειδή μειώνουν τους δυσκίνητους ορισμούς σε μερικές πληκτρολογήσεις, όπως αυτό:

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

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

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

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

Δημιουργία αποσπασμάτων

Για να δημιουργήσετε ένα νέο απόσπασμα στο Sublime Text 3, μεταβείτε στη διεύθυνση:

Tools -> Developer -> New Snippet...

Αυτό ανοίγει ένα νέο παράθυρο που περιέχει ένα νέο πρότυπο αποσπάσματος, το οποίο μοιάζει με αυτό:

Υπάρχουν τέσσερα μέρη σε ένα απόσπασμα. Αν και απαιτείται μόνο ένα μέρος, συνιστάται ο ορισμός και των τεσσάρων.

1) Το περιεχόμενο (Γραμμή 3): Απαιτείται

Ορίστε το μπλοκ του κειμένου που θα επεκταθεί από το απόσπασμα με την επεξεργασία των γραμμών μεταξύ των TA[ and ]]> tags. (From now on, the block of text that is expanded after the snippet is invoked will be referred to as the snippet’s content).

You’ll notice the presence of words surrounded by a dollar sign, braces, numbers, and prefixed by a number. This optional markup specifies a Field Marker, which controls the cursor position after the snippet is invoked.

After content is expanded, the cursor moves automatically to the first field marker (${1:this} above). Pressing tab again moves the cursor to the next numbered field marker, or to the end of the snippet’s content if there are no fields left (see pro tip below).

Text after the colon in a field marker is optional. If specified, it is automatically selected as part of the cursor movement, meaning it can be deleted in one swift stroke. This makes text after the colon great for “placeholder” values that provide guidance of what should be filled in, or for optional default values, such as the isRequired field in the example below.

Pro tip

Use the $0 field marker (the exit marker) to explicitly define where the cursor will exit after all field markers have been cycled through. This is useful if you want to rebind the tab key to auto-completion after the snippet is invoked. To do so, place the exit marker immediately after the first field marker, like this:${1:example}$0

2: The Trigger Word (Line 6): Optional

hello

Short and mnemonic trigger words work best. For example, the Babel React Snippet package maps cwm to componentWillMount and cwr to componentWillReceiveProps.

Trigger words are optional because there is an alternative way to invoke snippets, which we will cover in the Advanced Usage section.

3: A Scope (Line 8): Optional

 source: python 

Scopes limit where your snippet can be invoked, improving precision and preventing collisions. For example, with scopes, the same trigger word can have different meanings for different programming languages.

This gist lists how to define scopes for a long list of programming languages, but scopes are capable of much more. We will cover scopes in more detail in the Advanced Usage section.

4: A Description (Line 10): Optional

 demo description 

For some reason, the description tag doesn’t show up in the create snippet template. However, providing one will come in handy.

Snippets show up in Sublime Text’s auto-complete menu, along with a descriptive phrase. Without a description, this phrase defaults to the snippet’s filename, which isn’t guaranteed to have enough context when multiple snippets share the same prefix.

Pro tip

Create a keyboard shortcut to quickly create a new snippet. Go to Preferences -> Keybindings and add the following line to the “User” configuration file (of course, replace cmd+alt+n with whatever combination suits you best):

{ "keys": ["cmd+alt+n"], "command": "new_snippet" }

Saving Snippets

After creating your snippet, make sure to save it in a file ending in sublime-snippet. On Mac, user created snippets are saved at:

~/Library/Application Support/Sublime Text 3/Packages/User

Creating a new snippet through the menu item or keyboard shortcut automatically prompts this location on save.

Advanced Usage

Environment Variables

We’ve covered the four aspects of creating a static snippet. However, it is possible to create dynamic snippets through the use of environment variables, which contain references to the context in which a snippet was invoked.

Context is a vague term, so see the Sublime Text Snippet Documentation for a table of environment variables and their exact meanings.

For an example of how environment variables can be used, my team follows a convention where a component’s stylesheet is saved under the same file name as the component, and given a .scss extension.

The component file can then leverage this convention with a snippet using the $TM_FILENAME environment variable.

The $TM_SELECTED_TEXT or $SELECTION environment variable serves a more general purpose. Remember how I mentioned there was an alternative way of invoking snippets? Instead of keying the trigger word and hitting tab, you can also invoke snippets through the Command Palette.

On Mac, hit cmd+shift+p to bring up the Palette, type ‘Snippet’ and select the desired snippet from the drop-down. This roundabout approach has one major benefit — it is possible to invoke a snippet with a block of text selected, and for that text to be included as part of a snippet’s content. This allows you to create “wrapping” snippets, which wrap selected text with an if clause, for example.

Pro tip

Expand selection shortcuts are great for quickly selecting text to wrap with snippets like the one above.

Advanced Scopes

We’ve talked about limiting snippets to certain source code files, but snippets often have more granular contexts in which they are valid. As an example, a method such as componentWillUpdate typically only makes sense within a component (class) definition, which the following snippet definition makes explicit:

The inclusion of meta.class.js on line 8 means that the snippet is only valid in situations where the source code file being edited is a JavaScript file, and the cursor is “within” a class definition. If you tried to invoke the snippet in a blank JavaScript file, nothing would happen.

To fully leverage the power of scopes, you need to have a little understanding of syntax, scopes and scope selectors. These are nuanced topics worthy of their own post, so I’ll explain them at a very high level, with links to the documentation to fill in the gaps:

  • a language syntax defines how source code is divided into scopes.
  • scopes are labeled regions of text that correspond to the “units” of a programming language, such as class or function definitions. Every position within a source code file has an associated scope. Meta scopes are most relevant to snippets.
  • scope selectors “query” scopes. Scopes selectors are bound to actions (such as snippets, or keyboard shortcuts), and are used to determine if the action is appropriate given the current scope.

Pro tip

The best way to learn about scopes is play around with them. Move your cursor to different positions within a file, and use the cmd+shift+p keyboard shortcut to bring up a pop-up menu displaying the associated scope:

Snippets take mere seconds to create. Yet they save much more in effort, and not just by saving how much you have to type. By providing a quick, reproducible way to expand content, snippets reduce errors. They also abstract away hard-to-remember details, such as method names and their signatures. All of this frees your fingers — and your brain — to focus on what they want to do most: write great code.