A TON of VS Code tips for productivity

A TON of VS Code tips for productivity:

VS Code CLI and the integrated terminal

VS Code CLI

VSCode has a CLI to open VS Code directly from your terminal.

Install it with these simple steps:

  • Launch VS Code
  • Open the Command Palette (shift+cmd+p) and type ‘shell command’ to find the Shell Command: Install ‘code’ command in PATH command.

  • Restart the terminal for the new \$PATH value to take effect. You’ll be able to type ‘code .’ in any folder to start editing files in that folder.

If you’re having issues go here to the documentation

Integrated Terminal

VS Code has an integrated terminal you can open and start using directly in VS Code. If you didn’t know, now you know 💁‍♀️. And you have to start using it.

It works exactly like your current terminal and you can open it like this:

  • Use the ⌃` keyboard shortcut with the backtick character.
  • Use the View > Terminal menu command.
  • From the Command Palette (shift+cmd+p), use the View: Toggle Integrated Terminal command.

Refactoring with Rename Symbol

Naming is the hardest and most important part of programming. That’s just how it is, I don’t make the rules.

You are going to be renaming a lot while building your Twitter competitor. So let’s make that much easier.

To rename a symbol (in some languages even across multiple files) press F2 after selecting the symbol you would like to rename. Then type away and you just saved yourself 100s of hours (over the course of many many years, of course).

Multiple selections (multi-cursor)

Now here is the tip that will change your life. Write this down, bookmark it, remember this, or whatever. This is just the best tip and you’ll use it all the time.

Multiple-cursors can be added and operate independently based on the context it sits in.

So there are a few ways you can add multiple-cursors.

alt+click which will add a new cursor on every click.

alt+cmd+down or alt+cmd+up that will insert cursors below or above respectively.

cmd+d selects the word at the cursor or the next occurrence of the current selection adding a cursor at each word.

shift+cmd+l will select each occurrence of the currently selected text adding a cursor to each selection.

You can also check out the Multi Line tricks extension which will allow you to add a cursor at the end of each selected line with alt+shift+l

Command Palette

VS Code’s command palette makes VS Code completely accessible using only the keyboard. Typing shift+cmd+P will bring up the Command Palette allowing you to access all of the functionality of VS Code.

Here are a few shortcuts for the most useful commands:

  • cmd+P will let you navigate to any file or symbol by typing its name
  • ctrl+tab will cycle you through the last set of files opened
  • shift+cmd+P will bring you directly to the editor commands
  • shift+cmd+O will let you navigate to a specific symbol in a file
  • alt+G will let you navigate to a specific line in a file

User Interface Navigation

The user interface is broken up into 5 parts:

  • Editor – The main area to edit your files. You can open as many editors as you like side by side vertically and horizontally.
  • Side Bar – Contains different views like the Explorer to assist you while working on your project.
  • Status Bar – Information about the opened project and the files you edit.
  • Activity Bar – Located on the far left-hand side, this lets you switch between views and gives you additional context-specific indicators, like the number of outgoing changes when Git is enabled.
  • Panels – You can display different panels below the editor region for output or debug information, errors and warnings, or an integrated terminal. Panel can also be moved to the right for more vertical space.

Here are some shortcuts to help you navigate the UI:

  • shift+cmd+E Explorer (A)
  • shift+cmd+F Search (A)
  • shift+ctrl+G Source Control (A)
  • cmd+shift+D Run Panel (A)
  • cmd+shift+X Extension Panel (A)
  • cmd+b Toggle Side Bar visibility (B)
  • ctrl+cmd+w Toggle Tab visibility ©
  • cmd+j Toggle open bottom panel (D) with Terminal, Problems, Output, Debug Console

More Keyboard Shortcuts

There are a ton of keyboard shortcuts available in VS Code. We’ll go over some general shortcuts now and more detailed tips for each feature.

General

  • alt+Z Toggle word wrap. If you have long lines in your file and need to see everything without formatting each line.
  • cmd+F Search in the current file
  • alt+shift+left / alt+shift+right Make selection by word
  • cmd+D Finds and selects the next match for the currently selected word.
  • cmd+down / cmd+up Move cursor to end/beginning of the current file
  • cmd+left / cmd+right Move cursor to end/beginning of current line
  • alt+left / alt+right Move cursor by word
  • ctrl+- / ctrl+shift+- Go back and Go forward. This is across files and selections. So if you move files you can go back forward. If you go to the bottom of a file and make a selection you can Go back to your previous selection.
  • shift+ctrl+cmd+left / shift+ctrl+cmd+right Expand or shrink block selection. This is useful for selecting a component, function, HTML element, etc.
  • F12 / cmd+click Jump to definition

Editing

  • cmd+X When not selecting text will cut the current line
  • cmd+shift+K Delete current line
  • shift+down / shift+up Move a selection up or down.
  • alt+down / alt+up Move a line up or down.
  • shift+alt+down / shift+alt+up Copy line or selection and paste below or above line or selection.

from Tumblr https://generouspiratequeen.tumblr.com/post/634475603822886912

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s