Πώς να προσαρμόσετε τον κώδικα Visual Studio

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

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

Πώς να ορίσετε ένα θέμα χρώματος στον κώδικα VS

Το Visual Studio Code σας επιτρέπει να ορίστε ένα προσαρμοσμένο θέμα χρώματος για τον συντάκτη σας.

Για να χρησιμοποιήσετε ένα προκαθορισμένο θέμα, κάντε κλικ στο Αρχείο> Προτιμήσεις> Χρώμα θέμα μενού στην επάνω γραμμή μενού. Όταν χτυπάς “Εισαγω”, η εντολή Palette εντολών εμφανίζεται και εμφανίζει μια αναπτυσσόμενη λίστα των θεμάτων που μπορείτε να επιλέξετε.

Μπορείτε να επιτύχετε το ίδιο αποτέλεσμα αν πατήσετε F1 για να ανοίξετε την παλέτα εντολών και πληκτρολογήστε το Προτιμήσεις: Χρώμα θέμα εντολή στο πεδίο εισαγωγής.

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

Εγώ chooe το “Υψηλή αντίθεση” θέμα χρώματος, καθώς τα μάτια μου δεν είναι τα καλύτερα. Εδώ φαίνεται η άποψή μου.

Πώς να εγκαταστήσετε ένα θέμα από την αγορά κώδικα VS

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

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

Όταν κάνετε κλικ σε αυτήν την επιλογή, εμφανίζεται μια νέα παρουσία της εντολής Palette εντολών. Πληκτρολογήστε το "θέμα εγκατάστασης ext" εντολή στο νέο πεδίο εισαγωγής και θα το κάνετε λάβετε μια λίστα με όλα τα θέματα που διατίθενται από την αγορά κώδικα VS.

Επιλέγω το θέμα που ονομάζεται “Υλικό Κιτ Θέματος”, και να το εγκαταστήσετε κάνοντας κλικ σε αυτό. Για να έχετε το νέο θέμα στη λίστα "Θέματα χρωμάτων", στον ίδιο χώρο όπου είναι τα άλλα προεπιλεγμένα θέματα, πρέπει να κάνετε κάντε επανεκκίνηση του κώδικα VS. Μετά την επανεκκίνηση, το νέο θέμα εμφανίζεται στη λίστα θεμάτων και μπορείτε να το ορίσετε από την παλέτα εντολών.

Με το νέο Υλικό Θέμα, ο συντάκτης μου τώρα μοιάζει με αυτό:

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

Αν θέλετε, μπορείτε επίσης δημιουργήστε το προσαρμοσμένο θέμα σας, και να το δημοσιεύσετε στο VS Code Marketplace χρησιμοποιώντας το εργαλείο διαχείρισης επέκτασης vsce.

Αλλαγή ρυθμίσεων χρήστη και χώρου εργασίας

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

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

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

1. το παγκόσμιο settings.json, στην οποία ισχύουν οι κανόνες διαμόρφωσης για κάθε χώρο εργασίας
2. το χώρο εργασίας .vscode / settings.json, αυτό σχετίζεται μόνο με ένα μεμονωμένο χώρο εργασίας

ο παγκόσμια settings.json μπορείτε να βρείτε στο φάκελο όπου το λειτουργικό σας σύστημα αποθηκεύει όλα τα άλλα αρχεία ρυθμίσεων που σχετίζονται με την εφαρμογή, αντίστοιχα:

• στα Windows: % APPDATA% \ Κώδικα \ Χρήστης \ settings.json
• στο Linux: $ HOME / .config / Κωδικός / Χρήστης / settings.json
• σε Mac: $ HOME / Βιβλιοθήκη / Υποστήριξη εφαρμογών / Κωδικός / Χρήστης / settings.json

ο χώρου εργασίας settings.json Το αρχείο αποθηκεύεται στο φάκελο του τρέχοντος έργου σας. Από προεπιλογή, αυτό το αρχείο δεν υπάρχει, αλλά μόλις προσθέσετε μια προσαρμοσμένη ρύθμιση χώρου εργασίας, ο κώδικας VS δημιουργεί ένα .vscode / settings.json αρχείου ταυτόχρονα και τοποθετεί σε αυτήν προσαρμοσμένες ρυθμίσεις προσαρμοσμένες στο χώρο εργασίας.

Έτσι όταν χρησιμοποιείτε το settings.json αρχεία?

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

Αν θέλετε οι ρυθμίσεις σας να είναι έγκυρες μόνο στο δικό σας τρέχον έργο, τοποθετήστε τα στο χώρο εργασίας settings.json αρχείο.

Οι ρυθμίσεις χώρου εργασίας υπερισχύουν των συνολικών ρυθμίσεων, οπότε να προσέχεις.

Οι γενικές ρυθμίσεις καλούνται “Ρυθμίσεις χρήστη” στον κώδικα VS. Ανοίξτε τα είτε κάνοντας κλικ στο Αρχείο> Προτιμήσεις> Ρυθμίσεις χρήστη μενού ή ξεκινώντας να πληκτρολογήσετε την έκφραση “Ρυθμίσεις χρήστη” στην παλέτα εντολών (ανοίξτε το με F1).

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

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

Ας ρίξουμε μια ματιά σε ένα σύντομο παράδειγμα (αλλά μπορείτε να κάνετε οποιεσδήποτε άλλες τροποποιήσεις ανάλογα με τις ατομικές σας ανάγκες). Θα αλλάξω την οικογένεια των γραμματοσειρών, θα μειώσω το μήκος ενός a αυτί από τους προεπιλεγμένους τέσσερις χώρους σε δύο, να μειώσετε τον μέγιστο αριθμό αρχείων εργασίας από εννέα σε πέντε και να αλλάξετε έναν από τους κανόνες lusting CSS που αφορούν διπλότυπα στυλ από "αγνοώ" προς το "προειδοποίηση".

Μετά την τοποθέτηση αντιγράφων, η παγκόσμια μου settings.json Το αρχείο εμφανίζεται ως εξής:

 // Τοποθετήστε τις ρυθμίσεις σας σε αυτό το αρχείο για να αντικαταστήσετε τις προεπιλεγμένες ρυθμίσεις "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "προειδοποίηση"

Μετά την αποθήκευση του τροποποιημένου settings.json αρχείο, η εμφάνιση του επεξεργαστή μου αλλάζει ταυτόχρονα (στο παρακάτω στιγμιότυπο οθόνης μόνο η αλλαγή της γραμματοσειράς είναι ορατή):

Μπορείτε να αλλάξετε τις ρυθμίσεις χώρου εργασίας παρομοίως. Τώρα πρέπει να κάνετε κλικ στο Αρχείο> Προτιμήσεις> Ρυθμίσεις χώρου εργασίας στην επάνω γραμμή μενού για πρόσβαση στον σχετικό χώρο εργασίας .vscode / settings.json αρχείο.

Οι ρυθμίσεις χώρου εργασίας έχουν ακριβώς τις ίδιες επιλογές διαμόρφωσης με τις Ρυθμίσεις χρήστη και μπορείτε να χρησιμοποιήσετε την ίδια τεχνική αντιγραφής-επικόλλησης. Υπάρχουν μόνο δύο διαφορές, το πεδίο (τοπικό αντί για παγκόσμιο) και το settings.json στο οποίο θα αποθηκευτούν οι προσαρμοσμένες ρυθμίσεις.