VS-kod – Hur man ändrar teckensnitt

Det är lätt för en utvecklare att underskatta vikten av sin arbetsmiljö. Nej, vi pratar inte om din stol, skrivbord och väggfärg. Vi pratar om din virtuella arbetsmiljö.

Att få din Visual Studio-kodredigerare att känna sig som hemma är oerhört viktigt för din arbetseffektivitet. Typsnittet täcker en stor del av den totala VS-känslan. I den här artikeln kommer vi att lära dig hur du redigerar teckensnitt i olika delar av VS Code-redigeraren.

Hur man ändrar teckensnitt i VS-kod

Även om du är en utvecklare som har arbetat med VS under en lång tid nu, kanske du fortfarande inte känner till dess alternativ för teckensnittsändring.

Om du inte bryr dig om varför det är viktigt att välja ditt eget typsnitt, hoppa direkt till handledningen några stycken nedan. Kom dock ihåg att skälen till att du ändrar ditt teckensnitt (som beskrivs nedan) kan hjälpa ditt beslut.

Varför är typsnitt så viktiga i VS? Tja, om den estetiska aspekten inte räcker för dig (och lita på oss, efter timmar och timmar tillbringade i en kodredigerare börjar det spela roll), så handlar det faktiskt också om funktionalitet. Så vad gör ett teckensnitt "lämpligt" för VS?

I första hand vill du att skillnaden mellan liknande karaktärer ska vara anmärkningsvärd. Om du till exempel enkelt särskiljer siffran 1 och gemen L kan avsevärt snabba upp din kodning och spara tid.

Sedan finns det faktum att vissa utvecklare gillar att använda ligaturer. Ligaturer är några symboler sammanfogade. Dessa kallas också "glyfer", och de kan betyda en hel del vid kodning.

Utan vidare, så här ändrar du teckensnittsfamiljen i VS:

  1. Öppna din VS-editor.

  2. Navigera till den övre delen av skärmen och välj Fil.

  3. Gå nu till i rullgardinsmenyn Inställningar >inställningar.

  4. Du kommer nu att se Vanligen använd avsnitt med en meny till höger på skärmen kan du komma åt typsnittet från den här sidan eller genom att följa steget nedan.

  5. Eller klicka på Textredigerare > Teckensnitt och leta efter standardposten "editor.fontFamily": "Konsoler”.

  6. Då, istället för "Konsoler," skriv in namnet på önskat typsnitt.

Detta bör automatiskt ändra teckensnittsfamiljen.

Hur man ändrar teckenstorlek i VS-kod

Även om du har perfekt syn, vill du hålla dina ögon så bekväma som möjligt när du skriver rader med kod. Precis som avvikelsen mellan liknande tecken är viktig när du väljer en teckensnittsfamilj, är teckenstorleken viktig för att göra kodning lättare för ögat och hjälpa dig att arbeta mer effektivt.

Det finns ingen magisk formel för den bästa teckenstorleken för kodning. Helst vill du se karaktärerna så tydligt som möjligt, men du vill också att linjen ska passa VS-fönstret. Så prova olika teckenstorlekar och hitta den perfekta som passar dina kodningsbehov.

Så här ändrar du teckenstorleken i VS-kod:

  1. Navigera till Användarinställningar menyn (steg nummer 3 i teckensnittshandledningen).

  2. Leta efter "editor.fontSize": 15 linje kan din teckenstorlek vara inställd på något annat.

  3. Då, istället för "15," ange önskad teckenstorlek.

Hur man ändrar teckensnitt för Explorer i VS-kod

Utforskarfunktionen i VS Code fungerar precis som utforskarfunktionen i de flesta andra appar. Den används för att hantera, bläddra och öppna filer och mappar för att arbeta med ditt projekt. Eftersom VS Code är baserad på mappar och filer gör Utforskaren det enkelt för dig att komma igång – öppna bara filen/mappen med VS Code. Så enkelt är det.

Du kan förvänta dig att använda VS Code Explorer en hel del. Om Explorers teckensnittsstorlek inte passar dig kommer du gärna att veta att du kan ändra den.

  1. Gå till Användarinställningar menyn igen.

  2. Hitta "editor.fontSize": 14 din teckenstorlek kan skilja sig åt.

  3. Ändra detta till en teckenstorlek som du väljer, 18 används i detta exempel.

Hur man ändrar terminalteckensnitt i VS-kod

Istället för att byta fönster eller göra ändringar i den befintliga terminalens tillstånd, låter VS Code dig använda en integrerad terminal, som finns i ditt projekts/arbetsutrymmes rot. Naturligtvis kanske du vill göra ändringar i teckensnittet här för att underlätta användningen. Så här går du tillväga för att ändra teckensnittet för VS Code-terminalen:

  1. Navigera till rotmappen för ditt projekt/arbetsyta.
  2. Öppna settings.json fil med VS-kod. Alternativt, i VS-kod, tryck Ctrl+Skift+P (istället för Ctrl, använd Command för Mac-enheter) och hitta settings.json fil. VS code json inställningsfil
  3. Ändra motsvarande tre rader till detta:

    "terminal.external.osxExec": "iTerm.app",

    "terminal.integrated.shell.osx": "/bin/zsh",

    "terminal.integrated.fontFamily": "D2Coding",

    Anteckna det D2Coding är ett exempel. Du kan också välja vilket typsnitt du föredrar.

  4. Spara inställningarna när du är klar.

För att ändra terminalens teckensnittsstorlek, navigera till "terminal.integrated.fontSize": inträde och ställ in det efter dina egna önskemål.

Hur man ändrar teckensnitt för kommentarer i VS-kod

Kodkommentarposter är som standard i samma typsnitt som resten av koden. Att ändra detta gör att de sticker ut, vilket ofta kan förhindra timmar av slöseri med arbete (det är lätt att missa en kommentar när den är i samma typsnitt som allt annat i VS). Så enkelt som den här typen av saker kan verka, är lösningen lite mer komplex än du förväntar dig. Resultaten kanske inte är idealiska, eftersom detta kan orsaka vissa anpassningsproblem. Ändå skadar det inte att prova:

  1. Gå till rotinstallationsmappen för VS Code på din enhet.
  2. Navigera till tryck på style.css ingång i terminalen. Detta kommer att skapa en stilmall.
  3. Nu är det dags att lägga till teckensnittsregeln. Här är ett exempel på en stil:

    .mtk3 {

    font-family: "iosevka";

    teckenstorlek: 1em;

    teckensnittsstil: kursiv;

    }

  4. Öppen settings.json och lägg till denna post:

    "vscode_custom_css.imports":

    "file:///Users/username/.vscode/style.css"],

  5. Ladda nu ned Custom CSS och JS Loader-plugin.
  6. När det är installerat, använd Ctrl+Skift+P kommandot och se till att plugin-programmet är aktiverat.
  7. Starta om VS Code.
  8. Kommentarerna ska nu ha ett nytt typsnitt.

Hur man ändrar sidofältets teckensnittsstorlek i VS-kod

Det finns ingen inställning i VS Code som gör att användaren kan ändra terminalens teckenstorlek. Det finns dock en lösning, och den involverar den nämnda Custom CSS och JS Loader-plugin.

  1. I plugin-programmet, navigera till tilläggsdetaljerna och följ handledningsavsnittet noggrant.
  2. Använd följande logik:

    "vscode_custom_css.imports": ["[infoga anpassad fil-URL]"]

  3. Gör detta för varje anpassad fil.

Resultatet borde ge en mycket bättre och estetiskt tilltalande VS Code-sidofält.

Hur man ändrar teckensnitt med olika operativsystem

Om du kodar i VS använder du antingen en Windows-dator, en Mac eller ett Linux-system. Även om dessa tre inte är identiska när det gäller VS, beror skillnaderna mest på tangentalternativet Ctrl/Cmd och standardplatserna för VS-kodfilerna. Så principen för teckensnittsändring i VS-kod förblir i stort sett densamma på alla enheter.

Ytterligare FAQ

Varför kan jag inte ändra teckensnittet i VS Code?

Det finns många misstag du kan göra i VS Code, och att ändra teckensnittet är inte lika enkelt som att göra det i MS Word. Eftersom du kommer att använda mycket kodning för att ändra det faktiska VS Code-teckensnittet, bör du veta om den vanligaste tillsynen som folk gör. Se till att varje post är omgiven av citattecken. Till exempel, "vscode_custom_css.imports": ["file:///Users/username/.vscode/style.css"], fungerar inte om du inte använder citattecken. Se dessutom till att du använder mellanslag mellan kommandona.

Vilket teckensnitt används för kod i VS Code?

Som standard är teckensnittet som används för kodning i VS Code Consolas. Om du följer den här guiden kan du ändra de flesta typsnitt i VS Code, oavsett om vi pratar om själva koden, terminalen, kommentarerna eller utforskarfunktionen.

Men om du pratar om typsnittet som finns på VS Codes officiella webbplatsbilder, kan ingen berätta vilken som användes. Om inte VS Code-utvecklare uttryckligen avslöjar vilket typsnitt som användes, finns det inget sätt att ta reda på det.

Hur hackar jag ett VS Code-teckensnitt?

Ursprungligen betydde att hacka att modifiera, men om du med detta menar att lägga till Hack-teckensnittet till VS, kan du lägga till det via Hackens webbplats. Ladda ner TrueType-teckensnittet från Hack. Extrahera den nedladdade zip-filen. Installera de extraherade filerna. Gå sedan till Verktyg, följt av Alternativ. I menyn Alternativ väljer du Miljö och navigerar sedan till Teckensnitt och färger. Öppna rullgardinsmenyn Font och välj posten Hack.

Vilket typsnitt använder hackare?

Som en tumregel använder varje kodare, inklusive hackare, ett typsnitt de gillar. Ett bra exempel på ett populärt typsnitt som påstås vara ett "hackers val" skulle vara Ray Bluetens, även känd som Lawn Dart Fonts.

Ändra teckensnittsalternativ i VS-kod

Att hantera teckensnittsalternativ i VS Code är definitivt inte lika enkelt som att ändra teckensnitt i ett textredigeringsprogram. Men med tanke på att vi pratar om kodningsprogram här, erbjuder VS ett brett utbud av alternativ jämfört med konkurrenterna. Följ instruktionerna i den här artikeln och gör din kodningsupplevelse så personlig, användarvänlig och smidig som möjligt.

Lyckades du redigera dina teckensnittsinställningar i VS Code? Har du stött på några problem? Scrolla ner och kolla in vår kommentarsektion nedan. Det kryllar av goda råd. Avstå inte heller från att ställa en egen fråga eller starta en diskussion. Vår community hjälper mer än gärna till.