Online Εργαλείο μετατροπής κώδικα σε απόσπασμα, υποστήριξη JavaScript / TypeScript / React / JSX / TSX      

Εισαγάγετε ένα όνομα αποσπάσματος (name)
Εισαγάγετε ένα πρόθεμα αποσπάσματος (prefix)
Εισαγάγετε μια περιγραφή αποσπάσματος (description)
Εισαγάγετε το κείμενο του κωδικού (code body)
Τύπος γενιάς
Αποτέλεσμα δημιουργημένου αποσπάσματος

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


Snippets in Visual Studio Code
Τα αποσπάσματα κώδικα VS είναι ένας ισχυρός τρόπος για να ενισχύσετε την παραγωγικότητα κωδικοποίησης, αυτοματοποιώντας την εισαγωγή μπλοκ κώδικα που χρησιμοποιούνται συνήθως. Μπορούν να είναι απλές επεκτάσεις κειμένου ή πιο σύνθετα πρότυπα με σύμβολα κράτησης θέσης και μεταβλητές. Δείτε πώς μπορείτε να τα αξιοποιήσετε:

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

Πρόσβαση στις ρυθμίσεις αποσπάσματος: Μεταβείτε στο Αρχείο > Προτιμήσεις > Αποσπάσματα χρήστη (Κωδικός > Προτιμήσεις > Αποσπάσματα χρήστη στο macOS). Εναλλακτικά, χρησιμοποιήστε την παλέτα εντολών (Ctrl+Shift+P ή Cmd+Shift+P) και πληκτρολογήστε "Preferences: Configure User Snippets".

Επιλέξτε μια γλώσσα: Θα σας ζητηθεί να επιλέξετε μια γλώσσα για το απόσπασμά σας (π.χ. javascript.json, python.json, κ.λπ.). Αυτό διασφαλίζει ότι το απόσπασμα είναι διαθέσιμο μόνο για τη συγκεκριμένη γλώσσα. Μπορείτε επίσης να δημιουργήσετε ένα αρχείο "Global Snippets" εάν θέλετε το απόσπασμα να είναι προσβάσιμο σε όλες τις γλώσσες.

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

Παράδειγμα (JavaScript):
{
  "For Loop": {
    "prefix": "forl",
    "body": [
      "for (let i = 0; i < $1; i++) {",
      "  $0",
      "}"
    ],
    "description": "For loop with index"
  }
}
Σε αυτό το παράδειγμα:

"For Loop": Το όνομα του αποσπάσματος (για αναφορά σας).
"forl": Το πρόθεμα. Πληκτρολογώντας "forl" και πατώντας Tab θα εισαγάγετε το απόσπασμα.
"body": Ο κωδικός για εισαγωγή. Τα $1, τα 2 $, κ.λπ. είναι καρτέλες (placeholders). Το $0 είναι η τελική θέση του δρομέα.
"description": Μια προαιρετική περιγραφή που εμφανίζεται στις προτάσεις IntelliSense.
Χρήση αποσπασμάτων:

Πληκτρολογήστε το πρόθεμα: Σε ένα αρχείο του σωστού τύπου γλώσσας, ξεκινήστε να πληκτρολογείτε το πρόθεμα που ορίσατε (π.χ. forl).

Επιλέξτε το απόσπασμα: Το IntelliSense του VS Code θα προτείνει το απόσπασμα. Επιλέξτε το με τα πλήκτρα βέλους ή κάνοντας κλικ.

Χρήση Tabstops: Πατήστε Tab για να πλοηγηθείτε μεταξύ των καρτελών ($1, $2, κ.λπ.) και να συμπληρώσετε τις τιμές.

Μεταβλητές:

Τα αποσπάσματα μπορούν επίσης να χρησιμοποιούν μεταβλητές όπως $TM_FILENAME, $CURRENT_YEAR κ.λπ. Για μια πλήρη λίστα, ανατρέξτε στην τεκμηρίωση του Κώδικα VS.

Παράδειγμα με μεταβλητές (Python):
{
  "New Python File": {
    "prefix": "newpy",
    "body": [
      "#!/usr/bin/env python3",
      "# -*- coding: utf-8 -*-",
      "",
      "# ${TM_FILENAME}",
      "# Created by: ${USER} on ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"
    ]
  }
}
Με τον έλεγχο των αποσπασμάτων, μπορείτε να μειώσετε σημαντικά την επαναλαμβανόμενη πληκτρολόγηση και να εξασφαλίσετε συνέπεια στον κώδικά σας. Πειραματιστείτε με τη δημιουργία των δικών σας αποσπασμάτων για κοινά χρησιμοποιούμενα μοτίβα κώδικα και παρακολουθήστε την αποδοτικότητα κωδικοποίησης σας στα ύψη.