Sådan tilpasses Visual Studio Code

Visual Studio Code, Microsofts nye open source-kode editor giver udviklere mange fantastiske funktioner, der markant lette processen med kildekode redigering. Desuden sikrer Visual Studio Code, at brugerne ikke keder sig, når de arbejder med det, som det giver dem mulighed for Tilpas flere dele af dens udseende, såsom farver, skrifttyper, mellemrum og tekstformatering, ligesom mange funktioner, f.eks linting og validaton regler.

I dette indlæg vil vi først se på hvordan man ændrer udseendet af Visual Studio Code-arbejdsområdet, så vil jeg vise dig, hvordan du tilpasser standardindstillingerne ved hjælp af to JSON-formaterede konfigurationsfiler.

Sådan indstilles et farve tema på VS-kode

Visual Studio Code giver dig mulighed for Indstil et brugerdefineret farve tema til din editor.

For at sætte et færdigt tema i brug, skal du klikke på Fil> Indstillinger> Fargetema menu i øverste menulinje. Når du rammer “Gå ind”, Kommandopaletten dukker op, og viser en rulleliste over de temaer, du kan vælge imellem.

Du kan opnå samme effekt, hvis du trykker på F1 for at åbne kommandopaletten og indtaste Indstillinger: Fargetema kommando ind i inputfeltet.

Når du ruller over mulighederne i rullelisten, Udseendet af arbejdsområdet ændres i realtid, så du hurtigt kan se hvilket tema der passer bedst til dine behov.

Jeg chooe the “Høj kontrast” farve tema, da mine øjne ikke er de bedste. Her ser min udseende ud.

Sådan installeres et tema fra VS Code Marketplace

Hvis du ikke kan lide nogen af ​​de farvetemaer, som VS Code tilbyder som standard, kan du downloade mange andre fra VS Code Marketplace.

Her kan du se på de temaer, som Marketplace har i øjeblikket. Hvis du vil installere et tema fra Marketplace, skal du trykke F1 lige inde i din VS-kode editor for at åbne kommandopaletten, og skriv derefter ekstern installation kommando ind i input feltet, endelig vælge den Udvidelser: Installer forlængelse mulighed fra listen, der dukker op.

Når du klikker på denne indstilling, vises en ny forekomst af Command Palette. Indtast "ext installation tema" kommando ind i det nye inputfelt, og du vil få en liste over alle temaerne der er tilgængelige fra VS Code Marketplace.

Jeg vælger det kaldte tema “Materiale Tema Kit”, og installer det ved at klikke på det. For at få det nye tema i Farvetema listen, på samme sted, hvor de andre standardtemaer er, skal du genstart VS-kode. Efter genstart vises det nye tema i temarlisten, og du kan indstille det fra kommandopaletten.

Med det nye Materialetema ser min editor nu sådan ud:

Du kan gå tilbage til det forrige tema (som jeg gjorde, fordi jeg stadig foretrækker det tema), eller du kan lege rundt flere med andre temaer for at se, hvilken er den mest velegnede til dig.

Hvis du vil, kan du også opret dit tilpassede tema, og offentliggøre det på VS Code Marketplace ved at bruge værktøjet vsce extension manager.

Skift indstillinger for bruger og arbejdsområde

VS-kode giver dig ikke kun mulighed for at angive et brugerdefineret tema, men du kan også konfigurere mange andre indstillinger, f.eks. formateringsregler, brug af forskellige funktioner, crashrapporter, HTTP-indstillinger, filforeninger, lintingregler og mere.

Du kan gøre dette ved at redigere to konfigurationsfiler, både i JSON format. Du skal ikke bekymre dig, du behøver ikke at være en pro, da VS-koden tilbyder en ret ligetil og intuitiv måde at hurtigt tilføje dine tilpasninger på.

Lad os først se, hvad der er forskellen mellem de to konfigurationsfiler. VS-koden har to anvendelsesområder (global og lokal) for indstillinger, derfor de to separate filer:

1. den globale settings.json, hvor konfigurationsreglerne gælder for hvert arbejdsområde
2. arbejdspladsrelateret .vscode / settings.json, det er kun relateret til et enkelt arbejdsområde

Det global settings.json filen kan findes i den mappe, hvor operativsystemet gemmer henholdsvis alle andre apprelaterede konfigurationsfiler:

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

Det arbejdsområde-relaterede settings.json filen er gemt i mappen til dit nuværende projekt. Denne fil eksisterer som standard ikke, men så snart du tilføjer en brugerdefineret arbejdsområdeindstilling, opretter VS-kode en .vscode / settings.json fil på en gang og placerer brugerdefinerede arbejdsområdespecifikke konfigurationer i den.

Så hvornår bruger du settings.json filer?

Hvis du vil have VS-kode til at bruge dine brugerdefinerede konfigurationsregler i alle Dine projekter sætter dem ind i det globale settings.json fil.

Hvis du vil have dine indstillinger kun gyldige i din nuværende projekt, placere dem ind i arbejdsområdet settings.json fil.

Arbejdsrumsindstillinger tilsidesætter de globale indstillinger, så vær forsigtig.

Globale indstillinger kaldes “Brugerindstillinger” i VS-kode. Åbn dem enten ved at klikke på Fil> Indstillinger> Brugerindstillinger menuen, eller ved at begynde at skrive udtrykket “Brugerindstillinger” ind i kommandopaletten (åben den med F1).

VS-kode åbner to ruder ved siden af ​​hinanden: den venstre indeholder alle de muligheder, der er mulige at konfigurere, og den rigtige viser den globale settings.json fil. Du skal placere dine brugerdefinerede konfigurationsregler i denne fil.

Som du kan se, behøver du ikke gøre noget andet, skal du bare kopiere indstillingerne, du vil ændre fra venstre til højre, og tilføje de ændrede værdier.

Lad os se på et kort eksempel (men du kan foretage andre ændringer i henhold til dine individuelle behov). Jeg vil ændre skrifttypefamilien, reducere længden af ​​a fanen fra standard fire mellemrum til to, reducer det maksimale antal arbejdsfiler fra ni til fem, og ændrer en af ​​CSS-linjebestemmelserne vedrørende dubletter fra "ignorere" til "advarsel".

Efter kopi-indsættelse, min globale settings.json filen ser sådan ud:

 // Placer dine indstillinger i denne fil for at overskrive standardindstillingerne "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "advarsel"

Efter at have gemt den ændrede settings.json fil, ændrer mit redaktøres udseende på en gang (på skærmbilledet nedenfor er kun skiftet af skrifttypefamilien synlig):

Du kan ændre indstillinger for arbejdsområde på samme måde. Nu skal du klikke på Fil> Indstillinger> Indstillinger for arbejdsområde i øverste menulinje for at få adgang til arbejdsområdet .vscode / settings.json fil.

Arbejdsrumsindstillinger har nøjagtigt de samme konfigurationsindstillinger som Brugerindstillinger, og du kan bruge den samme kopieringsteknik. Der er kun to forskelle, omfanget (lokalt i stedet for globalt) og settings.json fil, hvor dine tilpassede konfigurationer vil blive gemt.