Visual Studio Code aanpassen

Visual Studio Code, de nieuwe opensourcecode-editor van Microsoft, biedt ontwikkelaars geweldige functies die aanzienlijk verbeteren faciliteer het proces van broncodebewerking. Bovendien zorgt Visual Studio Code er ook voor dat gebruikers zich niet zullen vervelen wanneer ze ermee werken, omdat dit het hen mogelijk maakt pas verschillende delen van het uiterlijk aan, zoals kleuren, lettertypen, spatiëring en tekstopmaak, net zoals vele functionaliteiten, zoals pluizende en validatie regels.

In dit bericht zullen we eerst eens kijken hoe het uiterlijk van de Visual Studio Code-werkruimte te veranderen, dan zal ik je laten zien hoe je de standaardinstellingen kunt aanpassen met behulp van twee JSON-geformatteerde configuratiebestanden.

Hoe een kleurthema op de VS-code in te stellen

Met Visual Studio Code kunt u dit doen een aangepast kleurenthema instellen voor je editor.

Om een ​​vooraf gemaakt thema in gebruik te nemen, klikt u op de Bestand> Voorkeuren> Kleurthema menu in de bovenste menubalk. Wanneer je slaat “invoeren”, het opdrachtenpalet verschijnt en toont een vervolgkeuzelijst met de thema's waaruit u kunt kiezen.

U kunt hetzelfde effect bereiken als u op drukt F1 om het opdrachtpalet te openen en typ de Voorkeuren: Kleurenthema opdracht in het invoerveld.

Terwijl je over de opties rolt in de vervolgkeuzelijst, het uiterlijk van de werkruimte verandert in realtime, zodat je snel kunt zien welk thema het beste bij je past.

Ik koester de “Hoog contrast” kleurenthema, omdat mijn ogen niet de beste zijn. Dit is hoe mijn zicht er uitziet.

Hoe een thema van VS Code Marketplace te installeren

Als u niet van een van de kleurenthema's houdt die standaard in de VS-code worden aangeboden, kunt u vele andere thema's downloaden van de VS Code Marketplace.

Hier kunt u de thema's bekijken die de Marketplace momenteel heeft. Als je een thema uit de Marketplace wilt installeren, druk dan op F1 in uw VS Code-editor om het opdrachtpalet te openen en typ vervolgens de ext-installatie commando in het invoerveld, kies tenslotte de Extensies: Extensie installeren optie uit de lijst die verschijnt.

Wanneer u op deze optie klikt, verschijnt er een nieuw exemplaar van het opdrachtenpalet. Typ de "ext install-thema" opdracht in het nieuwe invoerveld, en u zult krijg een lijst met alle thema's die beschikbaar zijn via de VS Code Marketplace.

Ik kies het thema genaamd “Materiële themakit”, en installeer het door erop te klikken. Als u het nieuwe thema in de lijst Kleurenthema wilt hebben, op dezelfde plek als de andere standaardthema's, moet u dit doen start de VS-code opnieuw. Na het opnieuw opstarten verschijnt het nieuwe thema in de themalijst en kunt u het vanuit het opdrachtenpalet instellen.

Met het nieuwe materiaalthema ziet mijn editor er nu als volgt uit:

Je kunt teruggaan naar het vorige thema (zoals ik deed, omdat ik nog steeds dat thema prefereer) of je kunt wat meer spelen met andere thema's om te zien welke het meest geschikt is voor jou.

Als je wilt, kun je ook maak je eigen thema, en publiceer het op VS Code Marketplace met behulp van de tool vsce extension manager.

Wijzig gebruikers- en werkruimte-instellingen

Met VS Code kun je niet alleen een aangepast thema instellen, maar je kunt ook configureer veel andere instellingen, zoals formatteringsregels, gebruik van verschillende functies, crashmeldingen, HTTP-instellingen, bestandskoppelingen, pluisjes regels en meer.

U kunt dit doen door twee configuratiebestanden te bewerken, beide in JSON-indeling. Maak je geen zorgen, je hoeft geen professional te zijn, want VS Code biedt een vrij eenvoudige en intuïtieve manier om snel je aanpassingen toe te voegen.

Laten we eerst eens kijken wat het verschil is tussen de twee configuratiebestanden. VS Code heeft twee scopes (globaal en lokaal) voor instellingen, vandaar de twee afzonderlijke bestanden:

1. het globaal settings.json, waarin de configuratieregels geldig zijn voor elke werkruimte
2. de werkruimte-gerelateerd .vscode / settings.json, dat is alleen gerelateerd aan een individuele werkruimte

De globaal settings.json bestand kan worden gevonden in de map waarin uw besturingssysteem elke andere app-gerelateerde configuratiebestanden opslaat, respectievelijk:

• op Windows: % APPDATA% \ Code \ User \ settings.json
• op Linux: $ HOME / .config / Code / User / settings.json
• op Mac: $ HOME / Bibliotheek / Application Support / Code / User / settings.json

De werkruimte gerelateerde settings.json bestand wordt opgeslagen in de map van uw huidige project. Standaard bestaat dit bestand niet, maar zodra u een aangepaste Workspace-instelling toevoegt, maakt VS Code een .vscode / settings.json bestand in één keer en plaatst aangepaste werkruimte-specifieke configuraties erin.

Dus wanneer gebruik je de settings.json bestanden?

Als u wilt dat VS Code uw aangepaste configuratieregels gebruikt allemaal uw projecten, zet ze in de mondiale settings.json het dossier.

Als u wilt dat uw instellingen alleen geldig zijn in uw huidige project, plaats ze in de werkruimtegerelateerde settings.json het dossier.

De instellingen van de werkruimte overschrijven de algemene instellingen, dus wees voorzichtig.

Algemene instellingen worden opgeroepen “Gebruikersinstellingen” in de VS-code. Open ze door op de. Te klikken Bestand> Voorkeuren> Gebruikersinstellingen menu, of door de expressie te typen “Gebruikersinstellingen” in het opdrachtpalet (open het met F1).

VS Code opent twee deelvensters naast elkaar: de linker bevat alle opties die kunnen worden geconfigureerd en de rechter geeft de globale weer settings.json het dossier. U moet uw aangepaste configuratieregels in dit bestand plaatsen.

Zoals je kunt zien, hoef je niets anders te doen, kopieer en plak de instellingen die je wilt veranderen van links naar rechts en voeg de gewijzigde waarden toe.

Laten we een kort voorbeeld bekijken (maar u kunt ook andere wijzigingen aanbrengen op basis van uw individuele behoeften). Ik zal de lettertypefamilie veranderen, de lengte van a tab van de standaard vier spaties naar twee, verminder het maximale aantal werkbestanden van negen naar vijf en verander een van de CSS-lintpuntregels met betrekking tot dubbele stijlen van "negeren" naar "waarschuwing".

Na kopiëren en plakken, mijn wereldwijde settings.json bestand ziet er als volgt uit:

 // Plaats uw instellingen in dit bestand om de standaardinstellingen te overschrijven "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "waarschuwing"

Na het opslaan van de gewijzigde settings.json bestand, het uiterlijk van mijn editor verandert meteen (op de onderstaande screenshot is alleen de verandering van de lettertypefamilie zichtbaar):

U kunt de werkruimte-instellingen op dezelfde manier wijzigen. Nu moet je klikken op de Bestand> Voorkeuren> Instellingen werkruimte in de bovenste menubalk om toegang tot de werkruimte te krijgen .vscode / settings.json het dossier.

Werkruimte-instellingen hebben exact dezelfde configuratie-opties als Gebruikersinstellingen en u kunt dezelfde techniek voor kopiëren plakken gebruiken. Er zijn slechts twee verschillen, de reikwijdte (lokaal in plaats van globaal) en de settings.json bestand waarin uw aangepaste configuraties worden opgeslagen.