Nyttige tips & tricks

Disclaimer: Det er ikke nødvendigvis et mål å bli megaeffektiv på kodeskrivingsfronten, for det er som oftest ikke der utfordringene ligger. Som regel bruker man mye mer tid på å tenke på løsninger enn den faktiske implementasjonen, så se på disse tipsene som noen måter man kan ha det mer moro mens man faktisk implementerer tankene man har brukt tid på å løse 🤓

Editorshortcuts

Vi kommer til å ta utgangspunkt i Visual Studio Code, men shortcutsene og tankene er så klart overførbare til enhver ordentlig editor (les. IntelliJ, Vim osv).

Alle disse kan endres ved å åpne shortcuts-menyen – by default kan denne åpnes med Cmd K → Cmd S, eller ved å kjøre kommandoen Preferences: Open Keyboard Shortcuts – du åpner kommandomenyen med Cmd Shift P.

Go to file Lister opp alle filene i prosjektet og lar deg søke i disse. Åpner filen du velger. Keybinding Default Cmd P
Commands Lister opp alle mulige kommandoer i VS Code, og lar deg søke i disse. Kjører den kommandoen du velger. Her kan du gjøre mer eller mindre alt VS Code lar deg gjøre. Denne er veldig nyttig for ting du ikke bruker så ofte at du orker å sette opp en keybind, og for å sjekke hva som i det hele tatt er mulig. Kommandoer jeg ofte bruker er File: Save without formatting og Preferences: Color Theme (for å endre fargetema f.eks. når jeg deler skjerm). Noen andre kule og nyttige kommandoer er Sort lines Ascending/Descending og Transform to Uppercase/Lowercase/Kebab Case/Title Case. Keybinding Default Cmd Shift P
Hover Viser informasjon om det som er under cursoren. I VS Code finnes det både Show Hover og Show Definition Preview Hover. Jeg foretrekker å bruke Show Definition Preview Hover, siden den gir litt mer info. Keybinding Default Cmd K → Cmd I Foreslått Ctrl K
Quick fix Vis forslagene editoren har om det som er under cursoren. Editoren har ofte gode forslag til ting du kan gjøre, enten det er for å rette opp i feil, eller bare potensielle forbedringer. Dette kan f.eks. være å importere noe du har glemt å importere, eller å fjerne ubrukt kode. Keybinding Default Cmd .
Rename Symbol Endrer navet på symbolet der det er definert og alle steder det er brukt. Keybinding Default F2 Foreslått Cmd Shift 2
Go to symbol Lister opp alle symbolene i filen og går til det symbolet du velger. Keybinding Default Cmd Shift O
Go to definition Går til definisjonen av det som er under cursoren. Denne er nyttig å bruke for å gå til f.eks. der en variabel eller type er definert. Keybinding Default F12 Foreslått Cmd Shift D
Go to references Lister opp alle steder det som er under cursoren er brukt. Denne er nyttig for å finne alle stedene en variabel eller type er brukt, og om den i det hele tatt er brukt. Keybinding Default Shift F12 Foreslått Cmd Shift R
Go Back/Forward Går til neste/forrige sted du var i editoren, lignende frem/tilbake i nettleseren. Denne er nyttig å bruke etter du f.eks. har gått til definisjonen av en variabel eller type, og ønsker å gå tilbake til der du var. Demovideoen viser at man går til definisjonen av en type, og så bruker Go Back for å komme seg tilbake til der man var, og så bruker Go Forward for å komme tilbake til definisjonen igjen. Go Back Keybinding Default Ctrl - Foreslått Ctrl O Go Forward Keybinding Default Ctrl Shift - Foreslått Ctrl I
Go to Next/Previous Problem Hopper til neste/forrige sted editoren har oppdaget en feil/advarsel. Herfra kan man så klart også prøve seg på en Quick Fix, eller bare fikse feilen manuelt. Man kan også velge mellom Go to Next/Previous Problem og Go to Next/Previous Problem in Files – hvor den første kun går mellom advarslene i filen du er i, mens den andre går mellom alle advarslene i prosjektet. Go to Next Problem Keybinding Default Shift F9 Foreslått Cmd Shift 9 Go to Previous Problem Keybinding Default Shift F8 Foreslått Cmd Shift 8
Go to Next/Previous Change Hopper til neste/forrige sted det har blitt gjort en kodeendring – krever at prosjektet bruker git til versjonshåndtering. Go to Next Change Keybinding Default Option F5 Foreslått Cmd Shift 0 Go to Previous Change Keybinding Default Option Shift F5 Foreslått Cmd Shift 7
Add Cursor Above/Below Legger til en ny cursor. Denne er nyttig når du f.eks. skal gjøre samme endring på flere linjer som er ganske like. Add Cursor Above Keybinding Default Option Cmd ↑ Add Cursor Below Keybinding Default Option Cmd ↓
Add Selection to Next Find Match Markerer ordet du er på om det ikke er markert – dersom hele ordet og spawner en ny cursor på neste sted som matcher teksten markert. Dette kan brukes for å spawne nye cursors på gjentagende ord. Brukes for eksempel om du vil gjøre om på et ord som brukes flere steder. Keybinding Default Cmd D

Oppsett av Mac'en

Endre Caps Lock til noe nyttig Hvor ofte bruker du egentlig Caps Lock? Selve knappen ligger jo perfekt plassert for venstre lillefinger, så det er synd at den ikke blir mer brukt. Heldigvis kan man enkelt endre hva den knappen gjør 🤯 Personlig synes jeg det er nice å binde den til enten Esc eller Ctrl (eller en kombo av disse – men mer om det senere), men du får nesten bare teste ut hva du foretrekker – det viktigste er at binder den til noe du får bruk for, enten det er Caps Lock, Esc, Ctrl eller noe annet 🤷‍♂️ Om du skulle ønske du kunne gjøre mer – som f.eks. å binde et klikk på Caps Lock til å resultere i Esc, men hvis du holder Caps Lock nede, så resulterer det i at Ctrl blir holdt nede, så bør du sjekke ut Karabiner Elements, som tillater all mulig slags herjing. Jeg har blant annet satt opp at et klikk på Space sender Space, men hvis jeg holder den nede, så er det det samme som å holde Fn nede. Og så har jeg satt opp at dersom jeg trykker på Fn H/J/K/L, så sender det ←/↓/↑/→ – jeg får med andre ord Vim-pilnavigasjon når jeg holder nede Space 🤓
Skru av Spaces-omrokkering Spaces, altså de virtuelle desktop'ene på macOS, er meganice for å unngå alt for mye rot når man veksler mellom programmer. Problemet er bare at macOS by default omrokkerer på hvor hvilket Space ligger basert på hva du nylig har brukt Det vil si at dersom du har et Space med Google Chrome, et med VS Code og et med Figma, og du har eksplisitt sortert disse i den rekkfølgen, fra venstre. Om du sitter i VS Code og smeller inn en Option Tab for å komme deg til Figma, så vil ikke nødvendigvis et venstreswipe føre deg tilbake til Figma. Heldigvis kan denne omrokkeringen skrus av, slik at du alltid har kontroll på hvor hvilke Spaces ligger i forhold til hverandre 💆‍♂️
Start skjermspareren ved et sveip Synes du også skjermsparerne til Mac er helt vanvittig vakre, men synes det er alt for tungvint å få startet den? Da kan Hot Corners være noe for deg! Du kan få Mac'en til å starte skjermsparer (og låse maskinen i samme slengen) ved å flytte musepekeren til et av hjørnene – ganske nyttig om du vil forlate maskinen trygt og med stil når du skal ta deg en kaffe/et game foos ⚽️
Fjern Dock'en På Mac kan du alltid klikke Cmd Space for å få opp Spotlight Search, hvor du f.eks. kan skrive inn navn på programmet du ønsker å åpne. Dette kombinert med navigasjon på tvers av programmer med Cmd Tab, gjør at du mer eller mindre egentlig ikke trenger denne Dock'en på bunnen av skjermen – som bruker dyrebare pixler på å vise noen ikoner. Heldigvis kan man skjule den når man har programmer som overlapper 😋
Vinduflytting med Rectangle Mac er helt ubrukelig når det kommer til Window Management. Heldigvis finnes det folk som tar ansvaret i sine egne hender. Rectangle er et program som enkelt lar deg endre størrelsen og flytte rundt på vinduene dine.

Andre nyttige ting

Aliaser

Om du henger mye i termisen (obvi terminalen), så er aliaser og funksjoner fort noe du bør ta en titt på!

Du kan enkelt legge til et alias ved å utvide ~/.zshrc-filen din med f.eks.:

# aliaser
alias s='npm start'
alias ni='npm install'
alias nr='npm run'

alias g=git
alias ga='git add'
alias gc='git commit -v'
alias gl='git pull'
alias gp='git push'
alias gm='git merge'
alias gco='git checkout'
alias gcb='git checkout -b'
alias gcl='git clone --recurse-submodules'

# funksjoner
function c() {
    # åpner ~/.zshrc med vim og sourcer den etterpå
    vim ~/.zshrc && source ~/.zshrc
}

Oh My Zsh mange meganice aliaser, spesielt for Git, så sjekk gjerne det ut. Noen av mine favoritter derfra er følgende (disse bruker variabler/funksjoner som blir definert av plugins):

alias gcm='git checkout $(git_main_branch)'
alias gpsup='git push --set-upstream origin $(current_branch)'

Bruk av Vim / Neovim

Nå som du har blitt en råtass på navigasjon i VS Code, oppdager du kanskje at du savner noe bedre navigasjon rundt i selve teksten. Da kan jeg virkelig anbefale deg å sjekke ut Vim/Neovim, som er laget for akkurat dette.

Det er rimelig beinhardt å hoppe rett inn i Vim, for hele konseptet med at du har forskjellige modes (insert mode/normal mode osv.), er ganske annerledes fra vanlige editorer, som VS Code.

Ja, du har kanskje gjort noen endringer med Vim, og da åpnet du en fil, trykket I for å komme inn i insert mode, skrevet det du skulle, trykket Esc for å komme tilbake til normal mode, trykket : for å skrive inn kommandoen wq for å lagre og deretter lukke filen.

Det som fikk ting til å klikke litt for meg, er at alt med Vim handler om å lære seg grunnleggende navigasjon og så å bygge opp egne shortcuts. F.eks., så har jeg bundet Ctrl S til å fyre av kommandoen :w, altså at filen lagres. Det er kanskje uvant og rart at det ikke var sånn innebygd, men det gir deg også muligheten til å sette opp de keybindsa du selv ønsker og trenger.

Det første jeg anbefaler for å se om Vim kan være noe for deg, er å installere en Vim-plugin til favoritteditoren din, og så lære deg grunnleggende navigasjon ved enten dokumentasjonslesing, YouTube-titting eller hva enn som får geita di til å flyte 🐐

Jeg tror ikke dette er helt riktig sted å gå løs på en rask intro til Vim, men det ligger vel potensielt i kortene at det bør lages en eller annen gang.

– Si gjerne fra om du oppdager noe feil eller har noen tips/ønsker til noe mer innhold i denne lille lista! 🤠