Επεκτάσεις κώδικα Visual Studio. Χρήσιμα πρόσθετα για τον κώδικα του Visual Studio

Το Visual Studio Code είναι ένα δωρεάν πρόγραμμα επεξεργασίας κειμένου πολλαπλών πλατφορμών από τη Microsoft, το οποίο έχει γίνει δημοφιλές λόγω της ελαφριάς, ισχυρής και επεκτάσιμης λειτουργικότητάς του και, φυσικά, των «freebies», σε αντίθεση με τα PHPStorm, Sublime κ.λπ.

Όπως τα περισσότερα σύγχρονα IDE, VSCodeέχει πολλές προσθήκες που διευρύνουν τις αρχικές του δυνατότητες. Έχουμε επιλέξει 15 πρόσθετα που θα είναι χρήσιμα σε κάθε προγραμματιστή που εργάζεται σε αυτό το πρόγραμμα επεξεργασίας.

Open-In-Browser

Από προεπιλογή, σε Κωδικός Visual StudioΔεν υπάρχει τρόπος να ανοίξετε το αρχείο στο πρόγραμμα περιήγησης. Αυτή η επέκταση όχι μόνο προσθέτει τη λειτουργία "Άνοιγμα στο πρόγραμμα περιήγησης", αλλά σας επιτρέπει επίσης να ανοίγετε αρχεία σε οποιοδήποτε πρόγραμμα περιήγησης που είναι εγκατεστημένο στον υπολογιστή σας.

Κουόκα

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

Απατεών

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

CSS Peek

Με αυτό το πρόσθετο μπορείτε να παρακολουθείτε ορισμούς κλάσεων και αναγνωριστικά σε ένα αρχείο CSS. Για να το κάνετε αυτό, πρέπει να κάνετε δεξί κλικ στον επιλογέα στο αρχείο HTML και να επιλέξετε Μεταβείτε στον Ορισμό(Μετάβαση στον ορισμό) ή Peek ορισμός(Δείτε τον ορισμό).

HTML Boilerplate

HTML Boilerplateαπλοποιεί την εργασία με HTML εξαλείφοντας την ανάγκη να γράφετε μόνοι σας ετικέτες κεφαλής και σώματος. Πληκτρολογήστε html σε ένα κενό αρχείο, πατήστε το πλήκτρο Tab και Κωδικός Visual Studioθα δημιουργήσει ένα πρότυπο εγγράφου!

Ομορφότερος

Ομορφότεροςείναι ένα πρόγραμμα επεξεργασίας κώδικα δημοφιλές μεταξύ των προγραμματιστών ιστού που σας επιτρέπει να μεταφέρετε κώδικα γραμμένο από διαφορετικά άτομα σε μια ενιαία μορφή. Στις ρυθμίσεις ΟμορφότεροςΜπορείτε να ορίσετε το autorun, το οποίο θα σας επιτρέψει να μορφοποιήσετε αμέσως κώδικα γραμμένο σε JS και CSS.

Πληροφορίες χρώματος

Ένα μικρό πρόσθετο που παρέχει σύντομες πληροφορίες σχετικά με τα χρώματα που χρησιμοποιούνται στο CSS. Τοποθετώντας το δείκτη του ποντικιού πάνω από ένα όνομα χρώματος, μπορείτε να δείτε πώς φαίνεται και πώς να το γράψετε σε άλλες μορφές χρώματος ( γοητεύω, rgb, hslΚαι cmyk).

SVG Viewer

Αυτή η επέκταση θα σας επιτρέψει να εργαστείτε με αρχεία SVG: μπορείτε να επεξεργαστείτε αρχεία SVG, να τα μετατρέψετε σε μορφή PNG και να δημιουργήσετε σχήματα URL δεδομένων.

TODO Επισήμανση

Αυτό το πρόσθετο σάς επιτρέπει να επισημάνετε ημιτελή σημεία στον κώδικα, διευκολύνοντας την εργασία στο έργο σας. Από προεπιλογή, καθορίζονται μόνο ετικέτες TODO(τέρμα) και FIXME(διορθώστε), αλλά μπορείτε να δημιουργήσετε τους δικούς σας τύπους ετικετών.

Γραμματοσειρές με εικονίδια

Μια επέκταση που προσθέτει Κωδικός Visual Studioυποστήριξη για περίπου 20 δημοφιλείς γραμματοσειρές εικονιδίων, συμπεριλαμβανομένων Γραμματοσειρά φοβερή, Ionicons, Γλυφικά, Σχεδιασμός Υλικού...

Ελαχιστοποίηση

Ένα βοηθητικό πρόγραμμα για τη βελτιστοποίηση και τη συμπίεση κώδικα. Ελαχιστοποίησηλειτουργεί με HTML, JSΚαι CSSαρχεία και λειτουργεί εξαιρετικά με πρόσθετα όπως uglify-js, καθαρό-cssΚαι html-minifier.

Αλλαγή υπόθεσης

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

Regex Previewer

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

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

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

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

Πρόσθετο για τον ορθογραφικό έλεγχο στον κώδικα.

Το GitLens επανεκκινεί τις ενσωματωμένες δυνατότητες του Visual Studio Code Git. Σας βοηθά να οπτικοποιήσετε άμεσα πληροφορίες ιστορικού κώδικα στο Git, να πλοηγηθείτε και να εξερευνήσετε απρόσκοπτα το ιστορικό ενός αρχείου ή κλάδου, να αποκτήσετε πολύτιμες πληροφορίες μέσω προσθηκών, συγκρίσεων κώδικα και πολλά άλλα.

Προσθήκες για προγραμματιστές Back-end

PowerShell

Σας επιτρέπει να εργάζεστε με σενάρια PowerShell απευθείας στη διεπαφή του Visual Code.

Πύθων

Μια επέκταση του κώδικα Visual Studio που υποστηρίζει Python (συμπεριλαμβανομένης της Python 3.6) με τα ακόλουθα χαρακτηριστικά:

• Linting (Prospector, Pylint, pycodestyle, Flake8, pylama, pydocstyle, mypy)
• Ευφυής
• Αυτόματη εσοχή, μορφοποίηση κώδικα, ανακατασκευή
• Δοκιμές μονάδων εκτέλεσης και εντοπισμού σφαλμάτων (unittest, pytest, nose)
• Αποσπάσματα

• Εργαλεία για ανάπτυξη και εντοπισμό σφαλμάτων .NET Core.
• Εξαιρετική υποστήριξη επεξεργασίας C#, συμπεριλαμβανομένης της επισήμανσης σύνταξης, IntelliSense, μετάβαση στον ορισμό, εύρεση όλων των αναφορών κ.λπ.
• Υποστήριξη για έργα project.json και csproj για Windows, MacOS και Linux.

Προσθήκες για προγραμματιστές Front-end

JSHint

Το JSHint είναι ένα πολύ βολικό εργαλείο για στατική ανάλυση κώδικα JavaScript. Ελέγχει εάν ο γραπτός κώδικας πληροί τα πρότυπα προγραμματισμού.

Ας μιλήσουμε για Κώδικας   - . Αγαπητοί μου αναγνώστες μου ζήτησαν να σας πω για τις επεκτάσεις που χρησιμοποιώ για την ανάπτυξη. Αυτό θα κάνουμε τώρα.
Σύνδεσμος λήψης VSC: https://code.visualstudio.com/ Το VSC μας θα είναι ένας μονόκερος με λέιζερ με πέντε κέρατα - αφού τον εξοπλίσουμε με τις πιο χρήσιμες επεκτάσεις που χρησιμοποιώ καθημερινά. Α, και αν δεν χρησιμοποιείτε ήδη το καταπληκτικό πρόγραμμα επεξεργασίας VSC, υπάρχει ένας σύνδεσμος κάτω από την παραπάνω εικόνα προς τον επίσημο ιστότοπο όπου μπορείτε να το κατεβάσετε.
Θέμα Υλικού

Θέμα Υλικού

Το πιο επικό θέμα για τον κώδικα του Visual Studio:
https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

Αυτόματη εισαγωγή

Βρίσκει, αναλύει και συμπληρώνει αυτόματα τα ονόματα των μεθόδων και των συμβάντων για όλα τα διαθέσιμα αρχεία. Υποστηρίζει Typescript και TSX.
https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

Κόστος εισαγωγής

Αυτή η επέκταση θα εμφανίσει το μέγεθος του εισαγόμενου πακέτου στον επεξεργαστή σε μία γραμμή με την αντίστοιχη μέθοδο. Η επέκταση χρησιμοποιεί το Webpack με το babili-webpack-plug για τον εντοπισμό του εισαγόμενου αντικειμένου και την εκτίμηση του μεγέθους του.
https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

Εσοχή-Ουράνιο τόξο

Μια απλή επέκταση που κάνει την εσοχή πιο ευανάγνωστη. https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

IntelliSense για ονόματα κλάσεων CSS σε HTML

Μια επέκταση VSCode που συμπληρώνει αυτόματα το όνομα κλάσης CSS για το χαρακτηριστικό κλάσης HTML με βάση τους ορισμούς που βρίσκονται στον χώρο εργασίας σας ή σε εξωτερικά αρχεία που αναφέρονται από το στοιχείο σύνδεσης.
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

SVG Viewer

Ένας εύκολος τρόπος για να κάνετε προεπισκόπηση του SVG.
https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer

Ομορφότερος - Μορφοποιητής κώδικα

Δεν μπορώ να ζήσω χωρίς αυτό — Πακέτο VSCode για μορφοποίηση JavaScript/TypeScript/CSS με χρήση Prettier.
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

React Native Tools

Συμβουλές, εντοπισμός σφαλμάτων και ενσωματωμένες εντολές για το React Native.
https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native

Sublime Text Keymap and Settings Importer

https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings Αυτή η επέκταση σάς επιτρέπει να χρησιμοποιήσετε τα πλήκτρα πρόσβασης Sublime Text 3 στο VSCode Δοκιμάστε το ανοίγοντας την κονσόλα με τη συντόμευση πληκτρολογίου: cmd ⌘ + P - Mac ctrl + P - Windows
Σε αυτήν την κονσόλα μπορείτε να πλοηγηθείτε γρήγορα σε αρχεία και επίσης, εάν προσθέσετε ένα σύμβολο > μπροστά από τη συμβολοσειρά αναζήτησης, μπορείτε να αναζητήσετε ενέργειες όπως η εναλλαγή του ενσωματωμένου τερματικού, η εγκατάσταση μιας επέκτασης κ.λπ. Ένα πολύ βολικό πράγμα για όσους από εμάς έχουμε συνηθίσει στο ST3. ?

npm Intellisense

Μια προσθήκη VSCode που συμπληρώνει αυτόματα τα ονόματα των μονάδων npm στις εισαγωγές.
https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

lit-html

Προσθέτει επισήμανση σύνταξης και υποστήριξη για σήμανση HTML μέσα σε συμβολοσειρές JavaScript και TypeScript, όπως χρησιμοποιείται στο lit-html και σε άλλα πλαίσια.
https://marketplace.visualstudio.com/items?itemName=bierner.lit-html

επισήμανση-ταιριάζουν-ετικέτα

Αυτή η επέκταση έχει σχεδιαστεί για να επισημαίνει τις ζευγαρωμένες ετικέτες ανοίγματος ή κλεισίματος — λειτουργία που λείπει στο VSCode, αλλά θα πρέπει να είναι ενσωματωμένη στο πρόγραμμα επεξεργασίας εκτός πλαισίου.
https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

GitLens - Git υπερτροφοδοτούμενο

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens Αυτή η επέκταση επανεκκινεί τις ενσωματωμένες δυνατότητες Git του Visual Studio Code. Παρέχει σαφείς πληροφορίες σχετικά με την πατρότητα των αλλαγών στο Git και επίσης διευκολύνει την πλοήγηση στα αποθετήρια και σας επιτρέπει να παρακολουθείτε το ιστορικό αλλαγών σε αρχεία ή κλάδους, να χρησιμοποιείτε εντολές σύγκρισης κώδικα και πολλά άλλα.

Git Project Manager

Το Git Project Manager (GPM) είναι μια επέκταση Microsoft VSCode που σας επιτρέπει να ανοίξετε ένα νέο παράθυρο που βασίζεται σε ένα αποθετήριο git απευθείας από το VSCode.
https://marketplace.visualstudio.com/items?itemName=felipecaputo.git-project-manager

Git History

Δείτε τα αρχεία καταγραφής git και το ιστορικό αλλαγών αρχείων και συγκρίνετε κλάδους ή δεσμεύσεις.
https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

File Utils

Ένας βολικός τρόπος για να δημιουργήσετε, να αντιγράψετε, να μετακινήσετε, να μετονομάσετε και να διαγράψετε αρχεία και καταλόγους.
https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils

Bracket Pair Colorizer

Προσαρμόσιμη επέκταση για χρωματισμό ζευγαρωμένων αγκύλων. Εξαιρετικά χρήσιμο όταν εργάζεστε με μεγάλο αριθμό ανακλήσεων.
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Έγχρωμη επισήμανση

Αυτή η επέκταση επισημαίνει τα χρώματα CSS/ιστού που βρίσκονται στο έγγραφό σας.
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

CSS Peek

Πλοηγηθείτε στις ιδιότητες CSS των αναγνωριστικών (id) και των κλάσεων απευθείας από αρχεία HTML. Υποστηρίζει εναλλαγή μεταξύ αρχείων και γρήγορη μετάβαση από το ένα στο άλλο.
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

Πρόγραμμα εντοπισμού σφαλμάτων για Chrome

Ένα εργαλείο για τον εντοπισμό σφαλμάτων κώδικα JavaScript ή οποιουδήποτε άλλου κώδικα στο πρόγραμμα περιήγησης Chrome.
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Quokka.js

Εκτελεί κώδικα JavaScript στην κονσόλα παράλληλα με τον τρόπο που τον γράφετε. (Χρήσιμο για γρήγορες επιδείξεις).
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Trailing Spaces

Τονίζει και αφαιρεί άμεσα τα υστερούντα κενά.
https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces#user-content-installation

TypeScript Hero

https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero Αυτή η επέκταση θα είναι χρήσιμη για οποιονδήποτε γράφει σε TypeScript και θέλει η VSC να οργανώνει εισαγωγές για αυτούς.

WakaTime

Μετρήσεις, πληροφορίες και παρακολούθηση χρόνου δημιουργούνται αυτόματα με βάση στατιστικά στοιχεία της προγραμματιστικής σας εργασίας.
https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime

Vetur

Υποστήριξη Vue για VSCode
https://marketplace.visualstudio.com/items?itemName=octref.vetur

Code Runner

Εκτελέστε ένα κομμάτι κώδικα ή ένα ολόκληρο αρχείο σε πολλές γλώσσες ταυτόχρονα.
Σας ευχαριστούμε που διαβάσατε αυτό το άρθρο! Ακολουθήστε τον σύνδεσμο Twitter για περισσότερες επεκτάσεις VSCode. Γνωρίζετε κάποια άλλα χρήσιμα πρόσθετα που δεν αναφέρονται εδώ; Γράψτε τα στα σχόλια❤ https://twitter.com/wesbos/status/907347014823923714 Μετάφραση του άρθρου: "✨

Ας δούμε τις καλύτερες προσθήκες επεξεργασίας κώδικα του Visual Studio για ανάπτυξη Ιστού το 2020.

1. Ζωντανός διακομιστής
2. Αυτόματο κλείσιμο ετικέτας
3. Κόστος εισαγωγής
4. Θέμα Υλικού
5. Apache Conf
6. Πακέτο Ρωσικής Γλώσσας
7. Μικρό μπόνους

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

Ενεργοποίηση Live Server για αρχεία .html ή .htm:

Ενεργοποίηση Live Server εάν δεν υπάρχουν αρχεία .html ή .htm:

Πώς να ρυθμίσετε την αυτόματη ανανέωση σελίδας για αρχεία PHP χρησιμοποιώντας Live Server

2. Sass

Υποστήριξη σύνταξης Sass: εσοχή, αυτόματη συμπλήρωση κ.λπ.

Μεταγλωττίζει αρχεία SASS/SCSS σε CSS σε πραγματικό χρόνο

Για να το ενεργοποιήσετε πρέπει να πατήσετε Παρακολουθήστε Sassστη γραμμή κατάστασης

Τι περιλαμβάνει το Live Sass Complier:

1. επιλέγοντας το φάκελο εξαγωγής για το μεταγλωττισμένο αρχείο
2. Επιλογή στυλ CSS (εκτεταμένη, συμπαγής, συμπιεσμένη, ένθετη)
3. επιλογή ονόματος επέκτασης (.css ή .min.css)
4. συμβατή επέκταση Ζωντανός διακομιστής
5. ρύθμιση αυτόματης εγκατάστασης προθεμάτων προμηθευτή
6. και ούτω καθεξής

Επιλογή ετικετών - άνοιγμα και κλείσιμο

Η επισήμανση ετικετών μπορεί να προσαρμοστεί για να ταιριάζει στις ανάγκες σας. Η ρύθμισή μου:

"highlight-matching-tag.leftStyle": ( "borderWidth" : "2px 2px 2px 2px" , "borderStyle" : "solid" , "borderColor" : "yellow" , "borderRadius" : "5px" ) , "highlight-matching-tag.rightStyle": ( "borderWidth" : "2px 2px 2px 2px" , "borderStyle" : "solid" , "borderColor" : "yellow" , "borderRadius" : "5px" ) ,

Επισήμανση χρωμάτων web στο πρόγραμμα επεξεργασίας με το κατάλληλο χρώμα

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

Όταν αλλάζετε μία αντιστοιχισμένη ετικέτα, η δεύτερη θα αλλάξει αυτόματα.

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

"auto-rename-tag.activationOnLanguage": [ "html" , "xml" , "php" , "javascript" ] ,

8. Αυτόματο κλείσιμο ετικέτας

Αυτόματο κλείσιμο ετικετών

Λειτουργεί από προεπιλογή για όλες τις γλώσσες: HTML, PHP, JavaScript, markdown, υγρό κ.λπ. Μπορείτε να αλλάξετε τις ρυθμίσεις στο setting.json

"auto-close-tag.activationOnLanguage": [ "php" , "javascript" , "javascriptreact" , "typescript", "typescriptreact" , "plaintext" , "markdown" , "vue" , ​​"liquid" , ]

9.Κόστος εισαγωγής

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

10. Θέμα Υλικό

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

Τότε οι ρυθμίσεις για το settings.json θα είναι έτσι

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

11. Apache Conf

Υποστήριξη σύνταξης Apache. Βολικό για την επεξεργασία αρχείων με επεκτάσεις .htaccess. Υποστηρίζει επίσης τύπους αρχείων: .conf, .htgroups, .htpasswd

Το Code Time είναι μια προσθήκη ανοιχτού κώδικα που παρέχει μετρήσεις απευθείας στον επεξεργαστή κώδικα.

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

Μέσα στο πρόγραμμα περιήγησης, οι πληροφορίες θα μοιάζουν με αυτό:

Είναι πιο πολύχρωμο μέσα στο πρόγραμμα περιήγησης:

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

One Dark Pro

Το One Dark Pro είναι ένα από τα πιο δημοφιλή και πιο συχνά λαμβανόμενα θέματα για το Visual Studio Code.

Σε αυτό το παράδειγμα μπορείτε να δείτε ότι έχουμε εικονίδια για καταλόγους όπως ο πελάτης και ο διακομιστής, καθώς και για αρχεία όπως π.χ .eslintrc .gitignoreΚαι πακέτο.json.

One Dark Proυποστηρίζεται σε React, Angular, Redux και σε πολλά διαφορετικά πλαίσια και βιβλιοθήκες, παρέχοντας διαφορετικά εικονίδια καταλόγου για στοιχεία, βοηθητικά προγράμματα, στυλ, καθώς και Reducers, Actions και Stores.

Bracket Pair Colorizer

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

Έγχρωμη επισήμανση

Το Color Highlight δείχνει μια οπτική αναπαράσταση οποιουδήποτε χρωματικού κώδικα. Για παράδειγμα, εάν εισαγάγετε RGB, RGBa, δεκαεξαδικό ή οποιονδήποτε άλλο κωδικό χρώματος, μπορείτε να δείτε το χρώμα όπως σε αυτό το παράδειγμα:

Path Intelligence

Το Path Intellisense είναι ένα πρόσθετο που συμπληρώνει αυτόματα τα ονόματα αρχείων.

Αυτό είναι χρήσιμο για την εισαγωγή στοιχείων στο React, επειδή δεν χρειάζεται να εισάγετε μη αυτόματα τη διαδρομή προς το αρχείο που αναζητάτε.

Αποσπάσματα ES7 React/Redux/GraphQL/React-Native

Η επόμενη επέκταση είναι τα αποσπάσματα ES7 React/Redux/GraphQL/React-Native. Μεγάλο όνομα, αλλά θα σας εξοικονομήσει πολύ χρόνο, ειδικά αν το χρησιμοποιήσετε στο React.

Αυτή η επέκταση παρέχει αποσπάσματα JavaScript και React/Redux στο ES7 με τη λειτουργικότητα της προσθήκης Babel για VS Code.

Ακριβώς στον επεξεργαστή κώδικα μπορείτε να κάνετε κλικ εντολή + shift + Pκαι μετά Αναζήτηση αποσπασμάτων ES7, θα δείτε μια μακρά λίστα σύντομων εντολών που μπορείτε να εκτελέσετε για να λάβετε μεγαλύτερα κομμάτια κώδικα.

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

GitLens - Git υπερτροφοδοτούμενο

Το GitLens επεκτείνει τις δυνατότητες Git που είναι ενσωματωμένες στον κώδικα του Visual Studio. Σας βοηθά να προσδιορίσετε τον συγγραφέα του κώδικα με μια ματιά με σχολιασμούς φακού Git-blame και κώδικα, να πλοηγηθείτε και να εξερευνήσετε εύκολα τα αποθετήρια του Git, να αποκτήσετε πολύτιμες πληροφορίες χρησιμοποιώντας εντολές διαφορών και πολλά άλλα. Κάνοντας κλικ σε μια γραμμή κώδικα θα σας δείξει ποιος τον επεξεργάστηκε, πότε επεξεργάστηκε και σε ποιο commit.