Αποσπάσματα κώδικα VS: το πιο ισχυρό εργαλείο για την ενίσχυση της παραγωγικότητας κωδικοποίησης

Γράψτε περισσότερο κώδικα με λιγότερες πατήσεις πλήκτρων

Όλοι θέλουν να μπορούν να παράγουν περισσότερο κώδικα σε λιγότερες πατήσεις πλήκτρων. Οι λειτουργίες Arrow στο JavaScript έχουν γίνει εξαιρετικά δημοφιλείς πρόσφατα - και σας σώζουν μόνο 6 χαρακτήρες!

(function(){console.log('a')})() // 32 charachters(()=>{console.log('a')})() // 26 charachters

Υπάρχει όμως ένας καλύτερος τρόπος για να αποθηκεύσετε την πληκτρολόγηση - και αυτό το άρθρο θα σας δείξει το εργαλείο για να το κάνετε.

Αποσπάσματα κώδικα

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

Το πρόβλημα με πολλά υπάρχοντα συστήματα είναι ότι αυτά τα αποσπάσματα αποθηκεύονταν συχνά σε αρχεία κειμένου ή σε άλλα συστήματα αρχείων και έπρεπε να αντιγραφούν και να επικολληθούν με μη αυτόματο τρόπο όπου χρειαζόταν.

Αυτό ήταν υπέροχο για μεγάλα αποσπάσματα κώδικα. Όμως, τα one-liners ήταν συχνά πιο γρήγορα στην πληκτρολόγηση παρά στην αναζήτηση του αρχείου, την αντιγραφή και την επικόλληση.

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

Αποσπάσματα κώδικα VS

Ο κώδικας VS έχει ένα σύστημα που είναι πιο ισχυρό από το TextExpander ή το AutoHotKeys. Τα ενσωματωμένα αποσπάσματα κώδικα μπορούν να διαμορφωθούν ώστε να κάνουν πολύ περισσότερα από την απλή επικόλληση του κώδικα.

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

Στον κώδικα VS, πατήστε ctrl + shift + P για να ανοίξετε την παλέτα εντολών και αναζητήστε απόσπασμα. Επιλέγοντας «Διαμόρφωση αποσπασμάτων χρηστών», εμφανίζεται μια λίστα με γλώσσες κωδικοποίησης για τις οποίες μπορείτε να δημιουργήσετε ένα απόσπασμα. Θα ακολουθήσουμε τη JavaScript.

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

Αυτό το απόσπασμα είναι αυτό που είναι η αγαπημένη μου γραμμή κώδικα. Είναι ένα ωραίο μοτίβο για τον χειρισμό των υποσχέσεων.

const handle = prom => prom.then(res => [null, res]).catch(err => [err, null]);

Για να δημιουργήσουμε το απόσπασμά μας, πρέπει να δημιουργήσουμε ένα νέο κλειδί στο αντικείμενο. Αυτό το κλειδί δείχνει ένα αντικείμενο με ένα prefix, bodyκαι description.

"insert handle function": { "prefix": "", "body": [], "description": ""}

Το πρόθεμα είναι το κείμενο που θέλουμε να εισαγάγουμε για να ενεργοποιήσουμε αυτό το απόσπασμα. Πρέπει να βεβαιωθείτε ότι αυτό είναι μοναδικό. Το handleνα το καλέσετε θα ενεργοποιούσε το απόσπασμα κάθε φορά που καλείτε τη συνάρτηση, ώστε να μπορούμε να κάνουμε κάτι παρόμοιο promHandle.

Το σώμα είναι μια σειρά από τις γραμμές στο απόσπασμα. Εάν έχετε πολλές γραμμές κώδικα, τότε θα έχετε πολλές συμβολοσειρές στη σειρά σώματος. Η περιγραφή είναι αυτό που θα εμφανιστεί όταν βλέπετε την πρόταση στον κώδικα VS.

Όταν ολοκληρωθούν όλα αυτά, λαμβάνετε κάτι σαν αυτό:

"insert handlefunction": { "prefix": "promHandle", "body": [ "const handle = prom => prom.then(res => [null, res]).catch(err => [err, null]);" ], "description": "inserting a 'handle' function"}

Με το αρχείο αποσπάσματος που έχετε αποθηκεύσει, όταν αρχίζετε να πληκτρολογείτε promhandleλαμβάνετε μια νέα πρόταση. Κάνοντας κλικ σε αυτό εμφανίζεται η περιγραφή του αποσπάσματος καθώς και η πρώτη γραμμή του κώδικα.

Τώρα μπορείτε να εξοικονομήσετε εκατοντάδες χαρακτήρες δημιουργώντας τα δικά σας αποσπάσματα. Υπάρχουν όμως μερικά ακόμη πιο δυνατά χαρακτηριστικά!

Καρτέλα Εισαγωγή σημείων

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

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

"sendMessage": { "prefix": "sendMessage", "body": [ "await botHelper.sendToUser({message$1, userID});" ], "description": "await sending a message using bot helper"},

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

Αποσπάσματα για συγκεκριμένη γλώσσα

Όταν ανοίξαμε για πρώτη φορά το πρόγραμμα επεξεργασίας αποσπάσματος, μας παρουσιάστηκε μια λίστα γλωσσών. Επιλέξαμε JavaScript, αλλά θα μπορούσατε να επιλέξετε οποιαδήποτε από τις άλλες 44 γλώσσες. Το μεγάλο πράγμα για τα αποσπάσματα κώδικα VS είναι ότι μπορούν να κλειδωθούν σε έναν συγκεκριμένο τύπο αρχείου.

Εάν γράφετε ένα αρχείο HTML, δεν θα λάβετε όλα τα αποσπάσματα JavaScript ή Python. Αυτό σημαίνει επίσης ότι μπορείτε να δημιουργήσετε το ίδιο πρόθεμα διαφορετικά αποσπάσματα με βάση τον τύπο αρχείου στον οποίο εργάζεστε αυτήν τη στιγμή! Αλλά μην ανησυχείτε, μπορείτε ακόμα να προσθέσετε συνολικά αποσπάσματα εάν θέλετε να μπορείτε να τα χρησιμοποιήσετε σε οποιονδήποτε τύπο αρχείου.

Αποσπάσματα για συγκεκριμένες τοποθεσίες

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

Απλώς επιλέξτε New Snippet file for '...'όταν επιλέγετε τη γλώσσα σας.

Creating more snippets

Now you know the powerful ways that VS Code snippets can improve your productivity, you probably want to make loads. Unfortunately, they can be frustrating to create. Luckily there are two solutions:

Snippet Generator

Snippet Generator is a site that lets you paste in some code and easily convert it into snippet format.

It’s really easy to use and lets you quickly create snippets that you can just copy and paste straight into your snippet files. It’ll work with any language and is completely free.

Snippet Extensions

If you use a framework, such as React or Angular, there are lots of snippets that you are going to want to create. Fortunately this is an issue that other people have had before so they have created libraries of common snippets for each framework.

Η αναζήτηση snippetsστην αγορά επέκτασης κώδικα VS παράγει εκατοντάδες αποτελέσματα που μπορείτε να εγκαταστήσετε. Τα πάντα, από React, Angular και Vue έως ES6 JS, C # και PHP. Αυτά συχνά έχουν μια πλήρη γκάμα αποσπασμάτων για να μειώσουν δραματικά τον χρόνο που δαπανάτε για την πληκτρολόγηση.

Το ένα μειονέκτημα αυτών των επεκτάσεων είναι ότι θα πρέπει να μάθετε ποια είναι τα προθέματα (σκανδάλη), αλλά θα απομνημονεύσετε γρήγορα αυτά που χρησιμοποιείτε περισσότερο.

Σας ευχαριστούμε που διαβάσατε αυτήν την ανάρτηση για την αύξηση της παραγωγικότητας κωδικοποίησης με VS Code Snippets. Αν έχετε μάθει κάτι, πατήστε το κουμπί χειροκρότημα και ακολουθήστε με για περισσότερες συμβουλές, κόλπα και σεμινάρια!