Cum de a personaliza Visual Studio Code

Visual Studio Code, noul editor de cod open-source al Microsoft oferă dezvoltatorilor cu multe caracteristici minunate, în mod semnificativ facilitarea procesului de editare a codului sursă. În plus, Visual Studio Code asigură, de asemenea, că utilizatorii nu se vor plictisi atunci când lucrează cu el, așa cum le permite personaliza mai multe părți ale aspectului său, cum ar fi culorile, fonturile, spațierea și formatarea textului, la fel ca multe funcționalități, cum ar fi scămoșare și norme validaton.

În acest post, la început ne vom uita la cum să modificați aspectul spațiului de lucru Visual Studio Code, atunci vă voi arăta cum să personalizați setările implicite cu ajutorul a două JSON-fișiere de configurare formatate.

Cum să setați o temă de culoare pe codul VS

Codul Visual Studio vă permite să setați o temă de culori personalizată pentru editorul tău.

Pentru a pune în aplicare o temă pre-făcută, faceți clic pe Fișier> Preferințe> Temă culori meniul din bara de meniu de sus. Când ai lovit “introduce”, Paleta Comandă apare și afișează o listă descendentă a temelor pe care le puteți alege.

Puteți obține același efect dacă apăsați F1 pentru a deschide paleta de comandă și tastați Preferințe: Temă culori comanda în câmpul de introducere.

În timp ce treceți peste opțiunile din lista derulantă, aspectul spațiului de lucru se schimbă în timp real, astfel încât să puteți vedea rapid ce temă se potrivește nevoilor dvs. cele mai bune.

Eu o dau “Contrast mare” temă de culoare, deoarece ochii mei nu sunt cei mai buni. Iata ce parerea mea arata.

Cum se instalează o temă din VS Code Marketplace

Dacă nu vă place niciuna dintre temele culorilor VS Code oferă în mod implicit, puteți descărca multe altele din VS Code Marketplace.

Aici puteți să aruncați o privire la temele pe care le are în prezent Marketplace. Dacă doriți să instalați o temă din Marketplace, apăsați F1 chiar în interiorul editorului dvs. de cod VS pentru a deschide Paleta de comandă, apoi tastați ext instalare comanda în câmpul de intrare, alegeți în final Extensii: Instalați extensia opțiune din lista care apare.

Când faceți clic pe această opțiune, apare o nouă instanță a paletei de comandă. Tastați "temă de instalare ext" comanda în câmpul de intrare nou, și veți face obțineți o listă cu toate temele care sunt disponibile din VS Code Marketplace.

Eu aleg tema numită “Material Theme Kit”, și instalați-l făcând clic pe el. Pentru a avea noua temă în lista de culori tematice, în același loc unde sunt alte teme implicite, trebuie să le faceți reporniți codul VS. După repornire, noua temă apare în lista temelor și o puteți seta din Paleta de comandă.

Cu noul material tematic, editorul meu arată acum:

Puteți să vă întoarceți la tema anterioară (așa cum am făcut-o, pentru că eu încă prefer tema respectivă) sau puteți să vă jucați mai multe cu alte teme pentru a vedea care este cea mai potrivită pentru dvs..

Dacă doriți, puteți, de asemenea creați tema personalizată, și să o publicați pe VS Code Marketplace utilizând instrumentul manager de extensie vsce.

Modificați setările pentru utilizatori și pentru spațiul de lucru

Codul VS nu vă permite doar să setați o temă personalizată, dar puteți, de asemenea configurați multe alte setări, cum ar fi regulile de formatare, utilizarea diferitelor funcții, rapoartele de eroare, setările HTTP, asociațiile de fișiere, regulile de lustruire și multe altele.

Puteți face acest lucru prin editarea a două fișiere de configurare, atât în ​​format JSON. Nu vă faceți griji, nu trebuie să fiți un pro, deoarece Codul VS oferă o modalitate destul de simplă și intuitivă de a vă adăuga rapid personalizările.

La început, să vedem care este diferența dintre cele două fișiere de configurare. Codul VS are două domenii (global și local) pentru setări, de aici cele două fișiere separate:

1. globală settings.json, în care regulile de configurare sunt valabile pentru fiecare spațiu de lucru
2. spațiul de lucru .vscode / settings.json, care are legătură doar cu un spațiu de lucru individual

global settings.json fișierul poate fi găsit în directorul în care sistemul dvs. de operare stochează toate celelalte fișiere de configurare legate de aplicație, respectiv:

• pe Windows: % APPDATA% \ Codul \ utilizator \ settings.json
• pe Linux: $ HOME / .config / Cod / utilizator / settings.json
• pe Mac: $ HOME / Bibliotecă / Suport pentru aplicații / Cod / Utilizator / settings.json

-Spațiu de lucru legate de settings.json fișierul este stocat în dosarul proiectului dvs. curent. Implicit, acest fișier nu există, dar imediat ce adăugați o setare de spațiu de lucru personalizat, codul VS creează o .vscode / settings.json fișierul dintr-o dată și plasează configurații personalizate pentru spațiul de lucru.

Atunci când folosiți settings.json fișiere?

Dacă doriți ca codul VS să utilizeze regulile personalizate de configurare în toate proiectele dvs., puneți-le în lume settings.json fişier.

Dacă doriți ca setările dvs. să fie valabile numai pentru dvs. proiectul actual, plasați-le în spațiul de lucru settings.json fişier.

Setările spațiului de lucru înlocuiesc setările globale, deci fii atent.

Sunt solicitate setări globale “Setarile utilizatorului” în Codul VS. Deschideți-le fie făcând clic pe Fișier> Preferințe> Setări utilizator meniu sau începeți să tastați expresia “Setarile utilizatorului” în paleta de comandă (deschideți-o cu F1).

Codul VS deschide două panouri unul lângă celălalt: cel din stânga conține toate opțiunile care pot fi configurate, iar cea dreaptă afișează imaginea globală settings.json fişier. Trebuie să plasați regulile personalizate de configurare în acest fișier.

După cum puteți vedea, nu este necesar să faceți altceva, copiați-inserați setările pe care doriți să le modificați din partea stângă spre dreapta și adăugați valorile modificate.

Să aruncăm o privire asupra unui scurt exemplu (dar puteți face orice alte modificări în funcție de nevoile dvs. individuale). Voi schimba familia de caractere, va reduce lungimea a fila de la cele patru spații implicite la două, reduceți numărul maxim de fișiere de lucru de la nouă la cinci și schimbați una dintre regulile de lustruire CSS referitoare la stilurile duplicate din "ignora" la "avertizare".

Dupa copiere-pastrare, la nivel mondial settings.json fișierul arată astfel:

 // Plasați setările în acest fișier pentru a suprascrie setările implicite "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "avertizare" 

După salvarea modului modificat settings.json fișierul, aspectul editorului meu se schimbă imediat (pe ecranul de mai jos este vizibilă numai modificarea familiei de fonturi):

Puteți modifica în mod similar și Setările spațiului de lucru. Acum trebuie să faceți clic pe Fișier> Preferințe> Setări spațiu de lucru în bara de meniu de sus pentru a accesa spațiul de lucru .vscode / settings.json fişier.

Setările spațiului de lucru au exact aceleași opțiuni de configurare ca și Setările utilizatorului și puteți utiliza aceeași tehnică de copiere-lipire. Există doar două diferențe, domeniul (local în loc de global) și settings.json fișier în care vor fi salvate configurațiile dvs. personalizate.