├── images ├── add_cursor.gif ├── add_selection_to_next_find_match.gif ├── caps_lock.gif ├── commands.gif ├── dock.gif ├── go_back.gif ├── go_to_change.gif ├── go_to_definition.gif ├── go_to_file.gif ├── go_to_problem.gif ├── go_to_references.gif ├── go_to_symbol.gif ├── hot_corners.gif ├── hover.gif ├── hover_definition.gif ├── quick_fix.gif ├── rectangle.gif ├── rename.gif ├── spaces.gif └── vscode_vim.jpeg └── readme.md /images/add_cursor.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/add_cursor.gif -------------------------------------------------------------------------------- /images/add_selection_to_next_find_match.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/add_selection_to_next_find_match.gif -------------------------------------------------------------------------------- /images/caps_lock.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/caps_lock.gif -------------------------------------------------------------------------------- /images/commands.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/commands.gif -------------------------------------------------------------------------------- /images/dock.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/dock.gif -------------------------------------------------------------------------------- /images/go_back.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/go_back.gif -------------------------------------------------------------------------------- /images/go_to_change.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/go_to_change.gif -------------------------------------------------------------------------------- /images/go_to_definition.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/go_to_definition.gif -------------------------------------------------------------------------------- /images/go_to_file.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/go_to_file.gif -------------------------------------------------------------------------------- /images/go_to_problem.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/go_to_problem.gif -------------------------------------------------------------------------------- /images/go_to_references.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/go_to_references.gif -------------------------------------------------------------------------------- /images/go_to_symbol.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/go_to_symbol.gif -------------------------------------------------------------------------------- /images/hot_corners.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/hot_corners.gif -------------------------------------------------------------------------------- /images/hover.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/hover.gif -------------------------------------------------------------------------------- /images/hover_definition.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/hover_definition.gif -------------------------------------------------------------------------------- /images/quick_fix.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/quick_fix.gif -------------------------------------------------------------------------------- /images/rectangle.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/rectangle.gif -------------------------------------------------------------------------------- /images/rename.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/rename.gif -------------------------------------------------------------------------------- /images/spaces.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/spaces.gif -------------------------------------------------------------------------------- /images/vscode_vim.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sivertschou/shortcuts/be167b3284891fdae3c8ff755820e51ac32b136b/images/vscode_vim.jpeg -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Nyttige tips & tricks 2 | 3 | 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 🤓 4 | 5 | ## Editorshortcuts 6 | 7 | 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). 8 | 9 | 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. 10 | 11 | 12 | 13 | 14 | 35 | 40 | 41 | 42 | 43 | 66 | 71 | 72 | 73 | 74 | 101 | 106 | 107 | 108 | 109 | 130 | 135 | 136 | 137 | 138 | 163 | 168 | 169 | 170 | 171 | 192 | 197 | 198 | 199 | 200 | 225 | 230 | 231 | 232 | 233 | 258 | 263 | 264 | 265 | 266 | 316 | 321 | 322 | 323 | 324 | 374 | 379 | 380 | 381 | 382 | 430 | 435 | 436 | 437 | 438 | 479 | 484 | 485 | 486 | 487 | 511 | 516 | 517 | 518 | 519 |
15 | 16 | ### Go to file 17 | 18 | Lister opp alle filene i prosjektet og lar deg søke i disse. Åpner filen du velger. 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
Keybinding
DefaultCmd P
34 | 		36 | 37 | ![Go to file](/images/go_to_file.gif) 38 | 39 |
44 | 45 | ### Commands 46 | 47 | 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. 48 | 49 | 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_. 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 |
Keybinding
DefaultCmd Shift P
65 | 		67 | 68 | ![Commands](/images/commands.gif) 69 | 70 |
75 | 76 | ### Hover 77 | 78 | Viser informasjon om det som er under cursoren. 79 | 80 | 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. 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 |
Keybinding
DefaultCmd K → Cmd I
ForeslåttCtrl K
100 | 		102 | 103 | ![Show Definition Preview Hover](/images/hover_definition.gif) 104 | 105 |
110 | 111 | ### Quick fix 112 | 113 | 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. 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 |
Keybinding
DefaultCmd .
129 | 		131 | 132 | ![Trigger suggest](/images/quick_fix.gif) 133 | 134 |
139 | 140 | ### Rename Symbol 141 | 142 | Endrer navet på symbolet der det er definert og alle steder det er brukt. 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 |
Keybinding
DefaultF2
ForeslåttCmd Shift 2
162 | 		164 | 165 | ![Rename](/images/rename.gif) 166 | 167 |
172 | 173 | ### Go to symbol 174 | 175 | Lister opp alle symbolene i filen og går til det symbolet du velger. 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 |
Keybinding
DefaultCmd Shift O
191 | 		193 | 194 | ![Go to symbol](/images/go_to_symbol.gif) 195 | 196 |
201 | 202 | ### Go to definition 203 | 204 | 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. 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 |
Keybinding
DefaultF12
ForeslåttCmd Shift D
224 | 		226 | 227 | ![Go to definition](/images/go_to_definition.gif) 228 | 229 |
234 | 235 | ### Go to references 236 | 237 | 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. 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 |
Keybinding
DefaultShift F12
ForeslåttCmd Shift R
257 | 		259 | 260 | ![Go to references](/images/go_to_references.gif) 261 | 262 |
267 | 268 | ### Go Back/Forward 269 | 270 | 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. 271 | 272 | 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. 273 | 274 | #### Go Back 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 |
Keybinding
DefaultCtrl -
ForeslåttCtrl O
294 | 295 | #### Go Forward 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 |
Keybinding
DefaultCtrl Shift -
ForeslåttCtrl I
315 | 		317 | 318 | ![Go back/forward](/images/go_back.gif) 319 | 320 |
325 | 326 | ### Go to Next/Previous Problem 327 | 328 | 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. 329 | 330 | 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. 331 | 332 | #### Go to Next Problem 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 |
Keybinding
DefaultShift F9
ForeslåttCmd Shift 9
352 | 353 | #### Go to Previous Problem 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 |
Keybinding
DefaultShift F8
ForeslåttCmd Shift 8
373 | 		375 | 376 | ![Go to problem](/images/go_to_problem.gif) 377 | 378 |
383 | 384 | ### Go to Next/Previous Change 385 | 386 | Hopper til neste/forrige sted det har blitt gjort en kodeendring – krever at prosjektet bruker git til versjonshåndtering. 387 | 388 | #### Go to Next Change 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 |
Keybinding
DefaultOption F5
ForeslåttCmd Shift 0
408 | 409 | #### Go to Previous Change 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 |
Keybinding
DefaultOption Shift F5
ForeslåttCmd Shift 7
429 | 		431 | 432 | ![Go to change](/images/go_to_change.gif) 433 | 434 |
439 | 440 | ### Add Cursor Above/Below 441 | 442 | 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. 443 | 444 | #### Add Cursor Above 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 |
Keybinding
DefaultOption Cmd ↑
460 | 461 | #### Add Cursor Below 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 |
Keybinding
DefaultOption Cmd ↓
477 | 478 | 		480 | 481 | ![Add cursor](/images/add_cursor.gif) 482 | 483 |
488 | 489 | ### Add Selection to Next Find Match 490 | 491 | 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. 492 | 493 | Brukes for eksempel om du vil gjøre om på et ord som brukes flere steder. 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 |
Keybinding
DefaultCmd D
509 | 510 | 		512 | 513 | ![Go to change](/images/add_selection_to_next_find_match.gif) 514 | 515 |
520 | 521 | 532 | 533 | 536 | 537 | 540 | 541 | 544 | 545 | ## Oppsett av Mac'en 546 | 547 | 548 | 549 | 550 | 563 | 568 | 569 | 570 | 571 | 582 | 587 | 588 | 589 | 590 | 599 | 604 | 605 | 606 | 607 | 614 | 619 | 620 | 621 | 622 | 629 | 634 | 635 | 636 |
551 | 552 | ### Endre Caps Lock til noe nyttig 553 | 554 | 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 🤯 555 | 556 | 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 🤷‍♂️ 557 | 558 | 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_](https://karabiner-elements.pqrs.org/docs/), som tillater all mulig slags herjing. 559 | 560 | 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 🤓 561 | 562 | 564 | 565 | ![Endre Caps Lock](/images/caps_lock.gif) 566 | 567 |
572 | 573 | ### Skru av Spaces-omrokkering 574 | 575 | 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 576 | 577 | 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. 578 | 579 | Heldigvis kan denne omrokkeringen skrus av, slik at du alltid har kontroll på hvor hvilke Spaces ligger i forhold til hverandre 💆‍♂️ 580 | 581 | 583 | 584 | ![Spaces](/images/spaces.gif) 585 | 586 |
591 | 592 | ### Start skjermspareren ved et sveip 593 | 594 | 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! 595 | 596 | 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 ⚽️ 597 | 598 | 600 | 601 | ![Hot corners](/images/hot_corners.gif) 602 | 603 |
608 | 609 | ### Fjern Dock'en 610 | 611 | 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 😋 612 | 613 | 615 | 616 | ![Dock](/images/dock.gif) 617 | 618 |
623 | 624 | ### Vinduflytting med Rectangle 625 | 626 | Mac er helt ubrukelig når det kommer til Window Management. Heldigvis finnes det folk som tar ansvaret i sine egne hender. [_Rectangle_](https://rectangleapp.com/) er et program som enkelt lar deg endre størrelsen og flytte rundt på vinduene dine. 627 | 628 | 630 | 631 | ![Rectangle](/images/rectangle.gif) 632 | 633 |
637 | 638 | ## Andre nyttige ting 639 | 640 | ### Aliaser 641 | 642 | Om du henger mye i termisen (obvi terminalen), så er aliaser og funksjoner fort noe du bør ta en titt på! 643 | 644 | Du kan enkelt legge til et alias ved å utvide `~/.zshrc`-filen din med f.eks.: 645 | 646 | ```bash 647 | # aliaser 648 | alias s='npm start' 649 | alias ni='npm install' 650 | alias nr='npm run' 651 | 652 | alias g=git 653 | alias ga='git add' 654 | alias gc='git commit -v' 655 | alias gl='git pull' 656 | alias gp='git push' 657 | alias gm='git merge' 658 | alias gco='git checkout' 659 | alias gcb='git checkout -b' 660 | alias gcl='git clone --recurse-submodules' 661 | 662 | # funksjoner 663 | function c() { 664 | # åpner ~/.zshrc med vim og sourcer den etterpå 665 | vim ~/.zshrc && source ~/.zshrc 666 | } 667 | ``` 668 | 669 | _[Oh My Zsh](https://ohmyz.sh/)_ 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): 670 | 671 | ```bash 672 | alias gcm='git checkout $(git_main_branch)' 673 | alias gpsup='git push --set-upstream origin $(current_branch)' 674 | ``` 675 | 676 | ### Bruk av Vim / Neovim 677 | 678 | 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. 679 | 680 | 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. 681 | 682 | 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. 683 | 684 | 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. 685 | 686 | 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 🐐 687 | 688 | 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. 689 | 690 | ![yehaw](/images/vscode_vim.jpeg) 691 | 692 | – Si gjerne fra om du oppdager noe feil eller har noen tips/ønsker til noe mer innhold i denne lille lista! 🤠 693 | 694 | 751 | --------------------------------------------------------------------------------