A TON of VS Code tips for productivity
Tags: vscode, productivity, webdev, beginners
Published: 2020-11-10 17:03:30

---
title: A TON of VS Code tips for productivity
published: true
description: Here are a ton of VS Code tips I use every day to make me more productive 🚀
tags: [vscode, productivity, webdev, beginners]
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jr9is32d9s3p8dh9vgvv.png
series: VS Code Tips
---

Being productive in VS Code can help you focus on just your code or can speed up some repetitive tasks you are doing. To start being productive all you need is to learn a few keyboard shortcuts and install a few extensions.

So here are some VS Code tips that help me every day.

_Note: This was written for Macs and I would love some help translating this post to work with Windows_

Here is a video version if that's more your speed:
{% youtube 9BCJ_BJARH0 %}

_This was also [posted on our blog](https://koalatea.io/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.

![VS code shell command example](https://dev-to-uploads.s3.amazonaws.com/i/5j33v0pr1f97ge8uucvv.png)

- 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](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line)

### 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).

![VS code rename symbol example](https://dev-to-uploads.s3.amazonaws.com/i/c68tpu0rtuu9hv0f1ehc.png)

## 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.

![Multi-cursor example](https://dev-to-uploads.s3.amazonaws.com/i/ydog5eoyfa3a2gqm76v5.gif)

`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.

![Multi-cursor by word example](https://dev-to-uploads.s3.amazonaws.com/i/o1itr4heqy1y5ozgrazu.gif)

You can also check out the [Multi Line tricks extension](https://marketplace.visualstudio.com/items?itemName=bigous.vscode-multi-line-tricks) 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.

![VS code UI](https://dev-to-uploads.s3.amazonaws.com/i/hrvv8kowuo95yu2qmizf.png)

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 (C)
- `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.

## Resources

[https://marketplace.visualstudio.com/items?itemName=bigous.vscode-multi-line-tricks](https://marketplace.visualstudio.com/items?itemName=bigous.vscode-multi-line-tricks)

[https://www.vscodecandothat.com/](https://www.vscodecandothat.com/)

[https://www.xiaoru.li/post/vscode-tricks/](https://www.xiaoru.li/post/vscode-tricks/)

[https://www.telerik.com/blogs/7-vs-code-productivity-hacks-17-extensions-that-will-change-your-life](https://www.telerik.com/blogs/7-vs-code-productivity-hacks-17-extensions-that-will-change-your-life)

[https://code.visualstudio.com/docs/getstarted/tips-and-tricks](https://code.visualstudio.com/docs/getstarted/tips-and-tricks)

[https://dev.to/mokkapps/how-i-increased-my-productivity-with-visual-studio-code-gfo](https://dev.to/mokkapps/how-i-increased-my-productivity-with-visual-studio-code-gfo)

[https://code.visualstudio.com/docs/getstarted/userinterface#\_command-palette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette)

[https://code.visualstudio.com/docs/editor/codebasics#\_multiple-selections-multicursor](https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor)

[https://code.visualstudio.com/docs/editor/editingevolved#\_rename-symbol](https://code.visualstudio.com/docs/editor/editingevolved#_rename-symbol)

[https://code.visualstudio.com/docs/editor/integrated-terminal](https://code.visualstudio.com/docs/editor/integrated-terminal)

[https://code.visualstudio.com/docs/setup/mac#\_launching-from-the-command-line](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line)

[https://code.visualstudio.com/docs/getstarted/userinterface](https://code.visualstudio.com/docs/getstarted/userinterface)