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

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

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

Οι ακόλουθες συμβουλές κώδικα του Visual Studio θα σας βοηθήσουν να βγείτε από όλες τις συνεδρίες κωδικοποίησης που μοιάζουν με αυτό:

Καθιστώντας το όμορφο και φιλικό

Εάν φαίνεται πραγματικά καλό και φιλικό, θα λατρέψετε το χρόνο που αφιερώσατε μαζί του.

1. Υλικό θέμα και εικονίδια

Αυτό είναι κατ 'ευθείαν το θηρίο σε θέματα VS Code. Νομίζω ότι το θέμα του υλικού είναι το πιο κοντινό πράγμα στο γράψιμο με ένα στυλό και ένα χαρτί μέσα στο πρόγραμμα επεξεργασίας (ειδικά όταν χρησιμοποιείτε το θέμα χωρίς παραλλαγή αντίθεσης ). Ο επεξεργαστής σας φαίνεται σχεδόν επίπεδης και απρόσκοπτης, μεταβαίνοντας από τα ενσωματωμένα εργαλεία στον επεξεργαστή κειμένου.

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

2. Λειτουργία Zen με κεντρική διάταξη

Ίσως γνωρίζετε ήδη το Zen Mode View, επίσης γνωστό ως Distraction Free View (για όσους προέρχονται από το Sublime Text) όπου όλα (εκτός από τον κωδικό) αφαιρούνται για να σας προσφέρουν πραγματική οικειότητα με τον επεξεργαστή κώδικα. Γνωρίζατε ότι θα μπορούσατε να κεντράρετε τη διάταξη για να σας βοηθήσουμε να διαβάσετε τον κωδικό σας σαν να βρίσκεστε σε πρόγραμμα προβολής PDF; Αυτό θα σας βοηθήσει πραγματικά να εστιάσετε σε μια λειτουργία ή να μελετήσετε τον κωδικό κάποιου άλλου.

Λειτουργία Zen : [Προβολή> Εμφάνιση> Εναλλαγή λειτουργίας Zen ]

Κεντρική διάταξη: [Προβολή> Εμφάνιση> Εναλλαγή κεντραρισμένη L ayout]

3. Γραμματοσειρές με Ligatures

Το στυλ γραφής καθιστά την ανάγνωση εύκολη και βολική. Μπορείτε να κάνετε το πρόγραμμα επεξεργασίας σας να φαίνεται καλύτερο με εκπληκτικές γραμματοσειρές και συνδέσεις. Εδώ είναι 6 από τις καλύτερες γραμματοσειρές που υποστηρίζουν συνδέσεις (σύμφωνα με το www.slant.co)

Μπορείτε να δοκιμάσετε τον κωδικό Fira, είναι απίστευτο και ανοιχτού κώδικα. Έτσι αλλάζετε τη γραμματοσειρά στο VSCode μετά την εγκατάστασή της.

"editor.fontFamily": "Fira Code","editor.fontLigatures": true

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

4. Εσοχή Rainbow

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

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

"indentRainbow.colors": [
"rgba(16,16,16,0.1)",
"rgba(16,16,16,0.2)",
"rgba(16,16,16,0.3)",
"rgba(16,16,16,0.4)",
"rgba(16,16,16,0.5)",
"rgba(16,16,16,0.6)",
"rgba(16,16,16,0.7)",
"rgba(16,16,16,0.8)",
"rgba(16,16,16,0.9)",
"rgba(16,16,16,1.0)"
],

5. Προσαρμογή γραμμής τίτλου

Αυτό είναι ένα υπέροχο οπτικό τσίμπημα. Το αντιγράψαμε από τον Wes Bos σε ένα από τα μαθήματα React & GraphQL. Βασικά άλλαξε τα χρώματα της γραμμής τίτλου σε διαφορετικά έργα για να τα αναγνωρίσει εύκολα και να βοηθήσει το κοινό να διακρίνει επίσης μεταξύ τους. Αυτό είναι πραγματικά χρήσιμο αν εργάζεστε σε εφαρμογές που ενδέχεται να έχουν τα ίδια ονόματα κωδικών ή αρχείων, για παράδειγμα, μια εφαρμογή για κινητά που είναι εγγενής για αντιδράσεις και μια εφαρμογή για web αντιδρά.

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

Ταχύτερη κωδικοποίηση

Η ίδια η ουσία της ολοκλήρωσης του χρόνου

1. Αναδίπλωση ετικετών

Εάν δεν γνωρίζετε το Emmet, τότε πιθανότατα είστε κάποιος που του αρέσει να τα πληκτρολογεί όλα. Το Emmet σάς δίνει τη δυνατότητα να πληκτρολογήσετε έναν συντομευμένο κωδικό και να λάβετε τις επιστρεφόμενες αντίστοιχες ετικέτες. Αυτό γίνεται επιλέγοντας ένα σωρό κώδικα και πληκτρολογώντας την εντολή Wrap with Abbreviated στην οποία δεσμεύτηκαshift+alt+.

Παρακολουθήστε το παρακάτω.

Φανταστείτε ότι θέλετε να ολοκληρώσετε όλα αυτά αλλά ως μεμονωμένες γραμμές. Θα χρησιμοποιούσατε περιτύλιξη με μεμονωμένες γραμμές και μετά εισαγάγετε * μετά τη συντομογραφία π.χ.div*

Σε περίπτωση που θέλετε να μεταβείτε απευθείας στο Emmeting, αυτό είναι το Emmet Cheatsheet

2. Ισορροπία προς τα μέσα και προς τα έξω

Αυτή η συμβουλή λήφθηκε από το //vscodecandothat.com/ το οποίο προτείνω πραγματικά.

Μπορείτε να επιλέξετε μια ολόκληρη ετικέτα στον κώδικα VS χρησιμοποιώντας τις εντολές balance inwardκαι balance outwardEmmet. Είναι χρήσιμο να συνδέσετε αυτές τις εντολές με συντομεύσεις πληκτρολογίου, όπως Ctrl + Shift + Up Arrowγια το Balance Outward και το Ctrl + Shift + Down ArrowBalance Inward.

3. Turbo Console.log ()

Σε κανέναν δεν αρέσει να πληκτρολογεί πολύ μεγάλες δηλώσεις όπως το console.log (). Μπορεί να είναι πραγματικά ενοχλητικό, κυρίως όταν θέλετε απλώς να εξάγετε κάτι πολύ γρήγορα, να δείτε την αξία του και μετά να συνεχίσετε την κωδικοποίηση. Τι θα συμβεί αν σας είπα ότι θα μπορούσατε να παρηγορήσετε την καταγραφή οτιδήποτε τόσο γρήγορα όσο ο Lucky Luke;

Αυτό γίνεται με μια επέκταση που ονομάζεται Turbo Console Log . Επιτρέπει την καταγραφή οποιασδήποτε μεταβλητής στην παρακάτω γραμμή με ένα αυτόματο πρόθεμα ακολουθώντας τη δομή του κώδικα. Μπορείτε επίσης να αποσυνδέσετε / σχολιάσετε alt+shift+u/ alt+shift+cόλο το console.log () που προστέθηκε από αυτήν την επέκταση.

Επιπλέον, μπορείτε επίσης να τα διαγράψετε όλα με alt+shift+d:

4. Ζωντανός διακομιστής

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

Κατεβάστε το εδώ

Μπορεί ακόμη και να σας επιτρέψει να μοιραστείτε το localhost σας, εάν χρησιμοποιείται με το VSCode LiveShare.

5. Αντιγραφή / Επικόλληση με πολλούς δρομείς

Ένα από τα πρώτα "Wows" που φώναξα όταν χρησιμοποίησα τον κώδικα VS συνέβη όταν επεξεργάστηκα πολλές γραμμές προσθέτοντας δρομείς σε διαφορετικές γραμμές. Πολύ καιρό, βρήκα μια πολύ καλή χρήση σε αυτό το χαρακτηριστικό. Μπορείτε να αντιγράψετε και να επικολλήσετε το περιεχόμενο που επιλέχθηκε από αυτούς τους δρομείς και θα επικολληθούν ακριβώς με τη σειρά με την οποία αντιγράφηκαν.

Δείτε παρακάτω.

6. Ψωμιά και περιγράμματα

Το Breadcrumb δείχνει την τρέχουσα τοποθεσία και σας επιτρέπει να πλοηγηθείτε γρήγορα μεταξύ συμβόλων και αρχείων. Για να ξεκινήσετε να χρησιμοποιείτε breadcrumbs, ενεργοποιήστε το με την εντολή View> Toggle Breadcrumbs ή μέσω he breadcrumbs.enabρύθμισης t led.

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

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

Διάφορα

Αυτά τα μικρά τσιμπήματα που αλλάζουν τα πάντα

1. Κωδικός CLI

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

Φανταστείτε ότι έχετε μόλις git clone rl> a repository and you want to replace the current instance of VS Code you are u sing. code . -r will do the trick without you having to leave the CLI interface (Learn more here).

2. Polacode

You often come upon appealing code screenshots with custom fonts and themes like the one below. This was taken in VS Code with Polacode Extension

I know Carbon is also a good and more customizable alternative. However, Polacode enables you stay in your code editor and use any proprietary font you may have bought which is unusable in Carbon.

3. Quokka (JS/TS ScratchPad)

Quokka is a rapid prototyping playground for JavaScript and TypeScript. It runs your code immediately as you type and displays various execution results and console logs in your code editor.

An awesome use case for Quokka is when you are studying for technical interviews, you are able to output each step without having the stress of setting breakpoints in debuggers.

It can also help you study a library’s functions like Lodash or MomentJS before actually using them. It even works for Async calls.

5. WakaTime

Do your friends think you spend too much time coding? Record it and show them that 10hrs/day is not “too much”. WakaTime is an extension that helps to record and store metrics and analytics regarding your programming activity.

You can set goals, view coding languages you often use, you can even compare yourself to other ninjas in the world.

6. VSCode Hacker Typer

Have you ever been typing code in front of a crowd? You often type recklessly and talk while typing which confuses you a little bit. Imagine a pre-typed code that only comes up when you simulate typing like in geektyper.

Jani Eväkallio brought to VS Code this extension. It will help you record and replay macros (code written in your editor) making you 100% more focused when typing to an audience.

7. Exclude folders

I learned this trick on a StackOverFlow post.This one is a quick tweak for excluding folders like node_modules or any other from the explorer tree to help you focus only on what matters. As for me, I really hate opening the tedious node_module folder in my editor, so I decided to hide it.

For example to hide node_modules you can do this:

  1. Go to File > Preferences > Settings (or on Mac Code > Preferences > Settings)
  2. Search files.exclude in the settings
  3. Select add pattern and type **/node_modules
  4. Voila! node_modules disappeared from the explorer tree

8. [Your Suggestions]

You can always comment some of your most secret tips on VSCode, I’ll be glad to append them to the list to help others. :)

I hope these tips will really boost your productivity with VS Code. Please clap and share the post if you liked it and comment if I missed any extension.

Dylan Tientcheu (@DylanTientcheu) | Twitter

Dylan Tientcheu(@DylanTientcheu). Javascript 熱狂者 * #Developer & #Designer * Technical Writer *…twitter.com