Slik tilpasser du Visual Studio Code

Visual Studio Code, Microsofts nye åpen kildekoden editor gir utviklere mange fantastiske funksjoner som betydelig legge til rette for prosessen med kildekoden redigering. Dessuten sørger Visual Studio Code for at brukerne ikke kjeder seg når de jobber med det, slik det tillater dem tilpasse flere deler av utseendet sitt, for eksempel farger, fonter, mellomrom og tekstformatering, akkurat som mange funksjoner, for eksempel linting og validaton regler.

I dette innlegget vil vi først se på hvordan å endre utseendet på Visual Studio Code-arbeidsområdet, så vil jeg vise deg hvordan du tilpasser standardinnstillingene ved hjelp av to JSON-formaterte konfigurasjonsfiler.

Slik setter du et farge tema på VS-koden

Visual Studio Code lar deg sett et tilpasset farge tema for redaktøren din.

For å sette et pre-laget tema i bruk, klikk på Fil> Innstillinger> Farge tema menyen i toppmenyen. Når du treffer “Tast inn”, Kommandopaletten dukker opp, og viser en rullegardinliste over temaene du kan velge mellom.

Du kan oppnå samme effekt hvis du trykker på F1 for å åpne kommandopalen, og skriv inn Innstillinger: Farge tema kommando inn i inputfeltet.

Når du ruller over alternativene i rullegardinlisten, Utseendet på arbeidsområdet endres i sanntid, slik at du raskt kan se hvilket tema som passer best til dine behov.

Jeg chooe the “Høy kontrast” farge tema, da øynene mine ikke er de beste. Her ser utseendet mitt ut.

Slik installerer du et tema fra VS Code Marketplace

Hvis du ikke liker noen av fargetemaene som VS Code tilbyr som standard, kan du laste ned mange andre fra VS Code Marketplace.

Her kan du se på temaene Markedsplassen har for øyeblikket. Hvis du vil installere et tema fra Marketplace, trykker du på F1 rett inne i VS Code Editor for å åpne Command Palette, og skriv deretter inn ekstern installasjon kommando inn i inputfeltet, velg endelig Utvidelser: Installer utvidelse alternativet fra listen som dukker opp.

Når du klikker på dette alternativet, kommer en ny forekomst av kommandopaletten opp. Skriv inn "ext installer tema" kommandoen til det nye inntastingsfeltet, og du vil få en liste over alle temaene som er tilgjengelige fra VS Code Marketplace.

Jeg velger temaet som heter “Materialtema sett”, og installer den ved å klikke på den. For å få det nye temaet i fargetema-listen, på samme sted der de andre standardtemaene er, må du start VS-koden igjen. Etter at du har startet på nytt, vises det nye temaet i temarlisten, og du kan angi det fra kommandopaletten.

Med det nye materialet tema ser redaktøren nå ut slik:

Du kan gå tilbake til forrige tema (som jeg gjorde, fordi jeg fremdeles foretrekker det temaet) eller du kan spille rundt flere med andre temaer for å se hvilken som passer best for deg.

Hvis du vil, kan du også Lag ditt eget tema, og publiser den på VS Code Marketplace ved å bruke verktøyet vsce extension manager.

Endre innstillinger for bruker og arbeidsområde

VS-koden tillater ikke bare å angi et tilpasset tema, men du kan også konfigurere mange andre innstillinger, for eksempel formateringsregler, bruk av forskjellige funksjoner, krasjrapporter, HTTP-innstillinger, filforeninger, linting-regler og mer.

Du kan gjøre dette ved å redigere to konfigurasjonsfiler, både i JSON-format. Ikke bekymre deg, du trenger ikke å være en pro, da VS-koden gir en ganske enkel og intuitiv måte å raskt legge til tilpassinger.

Først, la oss se hva som er forskjellen mellom de to konfigurasjonsfilene. VS-koden har to rekkevidder (global og lokal) for innstillinger, derfor de to separate filene:

1. den globale settings.json, der konfigurasjonsreglene er gyldige for hvert arbeidsområde
2. arbeidsområdet relatert .vscode / settings.json, det er bare relatert til et enkelt arbeidsområde

De global settings.json filen kan du finne i mappen der operativsystemet lagrer hver annen apprelatert konfigurasjonsfil, henholdsvis:

• på Windows: % Appdata% \ Kode \ Bruker \ settings.json
• på Linux: $ HOME / .config / kode / Bruker / settings.json
• på Mac: $ HOME / Library / Application Support / Kode / Bruker / settings.json

De arbeidsområde relatert settings.json filen er lagret i mappen til ditt nåværende prosjekt. Denne filen eksisterer som standard ikke, men så snart du legger til en egendefinert arbeidsområdeinnstilling, oppretter VS-kode en .vscode / settings.json filen samtidig, og plasserer egendefinerte arbeidsområde-spesifikke konfigurasjoner i den.

Så når bruker du settings.json filer?

Hvis du vil at VS-koden skal bruke dine egendefinerte konfigurasjonsregler i alle prosjektene dine, legg dem inn i det globale settings.json fil.

Hvis du vil at innstillingene dine bare skal være gyldige i din nåværende prosjekt, plasser dem inn i arbeidsområdet settings.json fil.

Innstillinger for arbeidsområdet overstyrer de globale innstillingene, Så vær forsiktig.

Globale innstillinger kalles “Brukerinstillinger” i VS-koden. Åpne dem enten ved å klikke på Fil> Innstillinger> Brukerinnstillinger menyen, eller ved å begynne å skrive uttrykket “Brukerinstillinger” inn i kommandopalen (åpne den med F1).

VS-kode åpner to rutene ved siden av hverandre: den venstre inneholder alle mulighetene som kan konfigureres, og den høyre viser den globale settings.json fil. Du må plassere dine egendefinerte konfigurasjonsregler i denne filen.

Som du kan se trenger du ikke å gjøre noe annet, bare kopier-lim inn innstillingene du vil endre fra venstre til høyre, og legg til de endrede verdiene.

La oss ta en titt på et kort eksempel (men du kan gjøre andre endringer i henhold til dine individuelle behov). Jeg vil endre fontfamilien, redusere lengden på a tab fra standard fire mellomrom til to, reduser maksimalt antall arbeidsfiler fra ni til fem, og endre en av CSS-linjene som gjelder for dupliserte stilarter fra "overse" til "advarsel".

Etter kopi-liming, min globale settings.json filen ser slik ut:

 // Legg inn innstillingene i denne filen for å overskrive standardinnstillingene "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "advarsel"

Etter lagring av endret settings.json fil, ser utseendet på redaktøren min på en gang (på skjermbildet nedenfor er det bare skiftet av skriftfamilien synlig):

Du kan endre arbeidsområdeinnstillinger på samme måte. Nå må du klikke på Fil> Innstillinger> Innstillinger for arbeidsområdet i øverste menylinje for å få tilgang til arbeidsområdet .vscode / settings.json fil.

Innstillinger for arbeidsområdet har nøyaktig de samme konfigureringsalternativene som brukerinnstillinger, og du kan bruke samme kopieringsteknikk. Det er bare to forskjeller, omfanget (lokalt i stedet for globalt), og settings.json fil der dine tilpassede konfigurasjoner blir lagret.