Hopp til innhold

Vis din IDE: @lfbergee's VSCode

Leiv Fredrik Berge

2020.10.02

For å skrive kode trenger vi noe å skrive kode i, for de fleste av oss utviklere betyr det en IDE. Og i mitt tilfelle har det vært VSCode de siste ca 5 årene. I en Fremtindsk deleånd, skal jeg prøve å dele noe av det jeg gjør for å customize min VSCode.

Litt bakgrunn først, VSCode er utviklet av et lite amerikansk firma Microsoft. Den startet livet sitt som en liten enkel editor for Azure, men etterhvert ble den såpass komplett at Microsoft stappet den inn i et Electron skall og begynte å shippe den som en desktop app også. Så i bunn så bygger den på webteknologi, typescript, html og css. Grunntanken er en lettvekst teksteditor med støtte for plugins for å bygge IDEen du trenger. Liten aside, VSCode er på god vei tilbake til weben, feks CodeSanbox bruker Monaco (grunnlaget til VSCode) og mye tyder på at Github Codespaces blir VSCode (med litt ekstra snacks) som skytjeneste.

Prøv ctrl+shift+I.

Min IDE

La oss starte med det obligatoriske bilde. Jeg bruker Horizon som theme. Nord og An Old Hope Theme er også i rotasjonen. For ikoner i explorer-taben bruker jeg vscode-icons.

Kodeblokkene her referer til settings.json fila du finner ved ctrl + p og Settings(JSON)
"workbench.colorTheme": "Horizon",
"workbench.iconTheme": "vscode-icons",

Annet visuelt jeg har tweeket på er fonten, Fira Code med font ligatures og Brackets Pair Colorizer 2 som fargelegger tilhørende paranteser.

"editor.fontFamily": "Fira Code Retina",
"editor.fontLigatures": true,
"terminal.integrated.fontFamily": "Fira Code Retina",

Ellers av opinionated ting jeg har gjort med utsenede er å flytte hele aktivitetsbaren til høyre. Jeg toggler den inn og ut (ctrl + b) hundrevis av ganger hver dag, og når den er der så flytter ikke koden på seg, imotsetning til når den er til venstre.

"workbench.sideBar.location": "right"

Som en av de som lider av bundlephobia så har jeg Import Cost, som legger til størrelsen på importen i grønntekst etter importen. Desuten driver GitLens å strør litt om seg i UIet med info om repositoryet. Den er også ganske fin til å visualisere git historiken iforhold til den innebygde i VSCode, dog ikke i nærheten av Intellij sin fantastiske git merge editor sak.

Prøv ctrl + shift + p og skriv git så ser du alle mulighetene GitLens tilbyr

Jeg setter veldig pris på det minimalistiske utrykket, jeg vil at IDEen ikke skal være i veien for koden. Så aktivitetsbaren går vekk når den ikke trengs (ctrl + b), terminalen går vekk med ctrl + shift \. Og alt er modifisertbart, så om du kommer fra en annen IDE, så finnes det sannsynligvis en keymap som gjør at du kan bruke hurtigtastene du er vant med, eller du kan enkelt lage din egen. Vim og Emacs er støttet også om man er en sånn en, ellers så anbefaller jeg å skrive ut denne VSCode Cheet Sheet og begynne å bruke mest mulig at keyboardet isteden for musa. Og gå til innkjøp av et ordentlig keyboard (just saying, hvor mange ganger klikker du ikke på tastaturet ditt iløpet av en dag...).

Tips og triks

ctrl + p, om ikke du vil lære noen shortcuts, lær hvertfall denne. Der har du tilgang til mer eller mindre alt VSCode kan gjøre. Den starter med hurtig åpning av filer.

Her kan du søke og åpne filer fra det åpne prosjektet ditt, og skriver du inn > så kommer du inn i Command palette. Evt ctrl + shift + p for å gå dit direkte. Det er utgangspunktet for det meste av det kule i VSCode. Bli venn med Command Palette! Husker du ikke hotkeys for operasjonen du vil gjøre, så ligger den her, og lister ut hva hotkeysa er til neste gang du trenger å gjøre den operasjonen.

Flere prosjekt

De fleste av oss jobber vel fort vekk med mer enn et prosjekt, så Project Manager er helt essensiell for meg. alt + shift + p gir meg en liste av mine prosjekter og kan enkelt hoppe mellom de. For de som sliter med å skille prosjekt fra hverandre, så kan det være smart å sette ulike themes per prosjekt, ved å sette i workspace settings.json isteden for den globale. Eventuel Peacock løser samme problem på en litt annen måte.

Snippets

Snippets er forkortelser for ting du ofte skriver. Feks imr blir til import React from 'react';, skriv forkortelsen og tab eller enter for å ekspandere teksten. Du kan skrive disse selv, feks jeg har jklhl som lager <h$1 className=\"jkl-title-large\">$2</h$1>, $1 er der cursoren starter, tab tar meg til $2. Hvis du vil ha min Jøkul snippets, så ligger de som en Gist på min github, ctrl + shift + p Configure User Snippets og lag en ny snippets vil med det scopet du syns er fornuftig.

Du kan også laste ned andres snippets, feks denne for react, graphql og javascript. Hvis du mister autocomplete, så du har skrevet inn imr, men listen med valg er borte, sett cursoren på slutten av ordet og trykk ctrl + space, så får du forslagslista tilbake.

One more thing

Vel egentlig så er det en haug flere ting. Eslint-integrasjon, Prettier som kodeformaterer, formater kun endra linjer(ny funksjonalitet i 1.49!!), Jest-integrasjon, fornuftig git-integrasjon, LiveShare, IntelliCode, Quokka.. Men for å avslutte med en siste liten sak, Code Spell Check, med den så kan jeg lure de fleste med at jeg faktisk kan skrive på engelsk.

Oppsummering

Men litt av poenget med VSCode sånn jeg ser det, er å vokse inn i IDEen din. Du må installere en god del plugins for å få en komplett opplevelse, mens andre alternativ kommer ferdig ut av boksen. Men det gjør også at du i din takt lærer deg funksjoner, legger til plugins som løser dine problem, isteden for å fullstendig overvelde deg med alle funksjonene med en gang. For Java utvikling så har jeg fortsatt ikke kommet i mål med VSCode, det blir litt tungt og kronglete iforhold til Intellij, men for javascript, typescript, html, css og det meste annet du kan tenke på som er relevant for web, så er VSCode goto for meg. Samtidig er det bare et verktøy og jeg syns man bør være villig til å prøve andre vertøy også, så om noe som passer deg bedre dukker opp så kan man bruke det isteden.

I deleånden, så sender jeg ballen over til @Piofinn til å dele noe fra sin workflow!