Kako prilagoditi Visual Studio Code

Visual Studio Code, novi Microsoftov urednik otvorenog koda pruža programerima mnoge sjajne značajke olakšati proces uređivanja izvornog koda. Osim toga, Visual Studio Code također osigurava da korisnicima neće biti dosadno kada rade s njim, što im to omogućuje prilagodite nekoliko dijelova njegovog izgleda, kao što su boje, fontovi, razmaci i oblikovanje teksta, baš kao i mnoge funkcionalnosti, kao što je ostavlja dlačice i pravila validacije.

U ovom postu, najprije ćemo pogledati kako promijeniti izgled radnog prostora Visual Studio Code, onda ću vam pokazati kako prilagoditi zadane postavke uz pomoć dva JSON-formatirane konfiguracijske datoteke.

Kako postaviti temu boje na VS kod

Visual Studio Code omogućuje vam postavite prilagođenu temu boje za svog urednika.

Da biste upotrijebili unaprijed pripremljenu temu, kliknite na Datoteka> Postavke> Tema boje izbornika u gornjoj traci izbornika. Kada udariš “Unesi”, pojavljuje se naredbena paleta i prikazuje padajući popis tema koje možete odabrati.

Isti učinak možete postići ako pritisnete F1 da biste otvorili paletu naredbi i upišite Postavke: boja teme naredbu u polje za unos.

Dok prelistavate opcije na padajućem popisu, izgled radnog prostora mijenja se u stvarnom vremenu, tako da možete brzo vidjeti koja tema najbolje odgovara vašim potrebama.

Ja odabirem “Visoki kontrast” boja tema, jer moje oči nisu najbolje. Evo kako izgleda moj pogled.

Kako instalirati temu iz VS Code Marketplace

Ako vam se ne sviđa bilo koja od tema boja koje VS kod nudi po defaultu, možete preuzeti mnoge druge s VS Code Marketplace.

Ovdje možete pogledati teme koje Marketplace trenutno ima. Ako želite instalirati temu s usluge Marketplace, pritisnite F1 u uređivaču VS koda kako biste otvorili paletu naredbi, a zatim upišite ext install naredbu u polje za unos, konačno odaberite Proširenja: instalirajte proširenje s popisa koji se pojavljuje.

Kada kliknete na ovu opciju, pojavljuje se nova instanca palete naredbi. Upišite "ext install tema" naredbu u novo polje za unos, a vi ćete dobiti popis svih tema koje su dostupne na tržištu VS koda.

Odabirem temu koja se zove “Komplet tematskih materijala”, i instalirajte ga klikom na nju. Da biste imali novu temu na popisu Teme boja, na istom mjestu gdje su ostale zadane teme, trebate ponovno pokrenite VS kod. Nakon ponovnog pokretanja, nova tema pojavljuje se na popisu tema, a možete je postaviti iz palete naredbi.

S novom temom materijala moj urednik sada izgleda ovako:

Možete se vratiti na prethodnu temu (kao što sam ja učinio, jer još uvijek preferiram tu temu) ili se možete poigrati s nekim drugim temama da biste vidjeli koja je najprikladnija za vas.

Ako želite, također možete stvorite prilagođenu temu, i objavite ga na VS Code Marketplace pomoću alata za upravljanje proširenjima vsce.

Promijeni postavke korisnika i radnog prostora

VS kôd ne dopušta samo da postavite prilagođenu temu, ali možete i konfigurirati mnoge druge postavke, kao što su pravila oblikovanja, korištenje različitih značajki, izvješća o padu, postavke HTTP-a, asocijacije datoteka, pravila za ispisivanje i drugo.

To možete učiniti uređivanjem dvije konfiguracijske datoteke, obje u JSON formatu. Ne brinite, ne morate biti profesionalac jer VS kôd nudi prilično jednostavan i intuitivan način za brzo dodavanje prilagođavanja.

Isprva ćemo vidjeti koja je razlika između dvije konfiguracijske datoteke. VS kôd ima dva područja rada (globalno i lokalne) za postavke, dakle dvije zasebne datoteke:

1. globalno settings.json, u kojima su pravila konfiguracije valjana za svaki radni prostor
2. u vezi s radnim prostorom .vscode / settings.json, koji se odnose samo na pojedinačni radni prostor

globalno settings.json Datoteka se može pronaći u mapi gdje operacijski sustav pohranjuje sve druge konfiguracijske datoteke povezane s aplikacijom, odnosno:

• u sustavu Windows: % AppData% \ Kod \ Korisnik \ settings.json
• na Linuxu: $ HOME / .config / kod / Korisnik / settings.json
• na Macu: $ HOME / Knjižnica / Podrška za aplikacije / Kod / Korisnik / settings.json

Radni prostor vezane settings.json datoteka je pohranjena u mapi trenutnog projekta. Prema zadanim postavkama ova datoteka ne postoji, ali čim dodate prilagođenu postavku radnog prostora, VS kod stvara a .vscode / settings.json datoteku odjednom, te u nju postavlja prilagođene konfiguracije specifične za radni prostor.

Dakle, kada ćete koristiti settings.json slika?

Ako želite da VS kod koristi vaša prilagođena pravila za konfiguraciju svi svoje projekte, stavite ih u globalno settings.json datoteka.

Ako želite da vaše postavke budu važeće samo u vašem trenutni projekt, smjestite ih u radni prostor settings.json datoteka.

Postavke radnog prostora nadjačavaju globalne postavke, pa budi oprezan.

Pozivaju se globalne postavke “Korisničke postavke” u VS kodu. Otvorite ih ili klikom na Datoteka> Postavke> Postavke korisnika ili početkom upisivanja izraza “Korisničke postavke” u paletu naredbi (otvorite je pomoću F1).

VS kod otvara dva okna jedan do drugog: lijeva sadrži sve opcije koje je moguće konfigurirati, a desna prikazuje globalno settings.json datoteka. U ovu datoteku morate postaviti svoja prilagođena pravila za konfiguraciju.

Kao što možete vidjeti, ne morate raditi ništa drugo, samo kopirajte postavke koje želite promijeniti s lijeve strane na desno i dodajte izmijenjene vrijednosti.

Pogledajmo kratak primjer (ali možete napraviti bilo koje druge izmjene u skladu s vašim individualnim potrebama). Promijenit ću obitelj fontova, smanjiti duljinu a kartica od zadanih četiriju razmaka do dva, smanjite maksimalni broj radnih datoteka s devet na pet i promijenite jedno od pravila CSS-a o dupliciranju stilova iz "zanemariti" do "upozorenje".

Nakon kopiranja, moje globalno settings.json datoteka izgleda ovako:

 // Postavite postavke u ovu datoteku da biste prebrisali zadane postavke "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "upozorenje"

Nakon spremanja izmijenjenog settings.json datoteka, izgled mog urednika istodobno se mijenja (na donjoj slici zaslona vidljiva je samo promjena obitelji fonta):

Na sličan način možete promijeniti postavke radnog prostora. Sada trebate kliknuti na Datoteka> Postavke> Postavke radnog prostora na gornjoj traci izbornika za pristupanje radnom prostoru .vscode / settings.json datoteka.

Postavke radnog prostora imaju iste opcije konfiguracije kao Korisničke postavke, a možete koristiti istu tehniku ​​kopiranja. Postoje samo dvije razlike, opseg (lokalni umjesto globalnog) i settings.json datoteku u koju će se spremiti vaše prilagođene konfiguracije.