tooling

10 Useful VS Code Keyboard Shortcuts

Paul Ccari

Sep 5st ・ 8 min

Basic key Commands

You can open the VS Code by opening the terminal on the directory you would like, and run

code .

If you are not able to run the script, go to open the VSCODE , press Cmd + Shift + P and type 'code' Then select Shell Command: Install 'code' command in PATH and run it, and reload your VSCODE

Popular Themes & Icon Themes

It's a trend to a dark themes, you might heard that dark themes are better for your eyes, but that's not TRUE! Why? Dark themes are unestethic, so they look nice and they are trendy which is why everybody is working on dark theme. But the true of the matter is, if you want a theme that is the best for your eyes, and reading comprehension, go with dark text on a light background is best! So to change themes, you can do it by pressing 'Cmd + shift + P' and type Preferences: Color Theme Now late night would be great to work on dark themes

Favorites light themes:

  • Hop Light
  • Night Owl light
  • Noctis
  • min Light (Minimalist)

Favorites dark themes:

  • Night owl
  • Cobalt2
  • Dracula
  • You can also install slack, win95, SynthWave '94' for themes.

Icon Themes

  • Material Icons
  • Chalice Icon Theme (Minimalist)

Fonts

[Fira Code][https://github.com/tonsky/FiraCode] Then enable Font Ligatures to make some cool connections on equals, check it out!

Recomendations

  • Turn off minimap, you won't use it and you'll save some the space.
  • Optional - You can move the sidebar to the right. Why? Because your eyes, wont jumping and follow the code to the right and left when you hide the sidebar.
  • Open Editors : Visible => set to O

EMMET for HTML & CSS

  • You can group section with (...) + (...)
  • You can use it on html and css
  • Use Emmet:balanceIn to select on parent wrapper
  • Wrap with Abrreviation
  • Update Tag
  • For images, know the size of it => Update Image Size

Moving Code

To move up or down a line or segment of code you'll use

Opt + Up/Down

To copy or paste a line of code, you dont need to select the whole line. Just use it and it will copy or paste the line where the cursor is pointing:

Cmd + C , Cmd + V

To duplicate

Opt + Shift + Up/Down

For collapsing sidebar

Cmd + \

For switching between files

Cmd + P

For opening the integrated terminal

Control + `

10 Useful VS Code Keyboard Shorcuts for macOS

As a developer, we need to be more productive and do some shorcuts to save us time To search on a file

For Code Folding/Unfolding

Opt + Cmd + [  /  ]

Custom Folding for HTML, JS

// #region [nombre]
// #endregion [nombre]

Basic editing

For searching any expression | word in a file we use:

cmd + F

For searching any expression | word in the whole project we use:

cmd + Shift + F

For replace any expression | word :

Option + Cmd + F

Once we put the word we are looking for, then we press this command to select all ocurrences

opt + enter

We can also look for words by selecting one by one

cmd + D

If we would want to skip a word by selecting one by one, we can press this command and keep selecting with Cmd + D

cmd + K

Another way to select all ocurrences is by pressing this command, which will be the word where the cursor is

Cmd + Shift + L

Another way to select all ocurrences is by pressing this command, which will be the word where the cursor is

Cmd + Shift + L

Navigation

This is gonna get you to the last file you opened

Cmd + P + P

For segment the code

Cmd + P => @ , @:

For

Cmd + 0 => To get your cursor on the sidebar => Then open with Cmd + Down
Cmd + 1 => To get your cursor on the editor  

Refactoring

For rename refactoring in multiple files

F2

Select the lines of code you would like to refactor to extract to a method or a function

Cmd + .  

That’s it!

Now it’s your turn to say hi.

Do you want to work together or talk about an idea? Lets get in touch then. Just drop me a line!

@ Paul Ccari, 2021. All Rights Reserved.