Scribd
Upload
5 views2 pages

Vscode Tricks

The document outlines 10 VSCode editor tricks to enhance development workflow, including multi-cursor editing, quick file opening, and integrated terminal usage. Each trick is accompanied by shortcuts for Windows/Linux and macOS, as well as brief explanations of their benefits. Mastering these techniques can significantly improve navigation, editing, and overall productivity in coding tasks.

Uploaded by

johntaichiqigong
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views2 pages

Vscode Tricks

The document outlines 10 VSCode editor tricks to enhance development workflow, including multi-cursor editing, quick file opening, and integrated terminal usage. Each trick is accompanied by shortcuts for Windows/Linux and macOS, as well as brief explanations of their benefits. Mastering these techniques can significantly improve navigation, editing, and overall productivity in coding tasks.

Uploaded by

johntaichiqigong
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Here are 10 VSCode editor tricks that can significantly speed up your development

workflow:

### 1. **Multi-Cursor Editing**


You can place multiple cursors in the editor to edit multiple lines at once. This
is particularly useful for bulk editing or refactoring.

- **Shortcut**:
- Windows/Linux: `Ctrl + Alt + Down` (or `Up`) to add cursors below/above.
- macOS: `Cmd + Option + Down` (or `Up`).
- **Another way**: Hold `Ctrl` (Windows) or `Cmd` (macOS) and click anywhere in the
editor to add multiple cursors.

---

### 2. **Quick Open (Go to File)**


Quickly open any file in your workspace without navigating through folders.

- **Shortcut**:
- Windows/Linux: `Ctrl + P`
- macOS: `Cmd + P`
- Start typing the file name and hit `Enter` to open it directly.

---

### 3. **Peek Definition**


Instead of opening a new tab to view a function or variable definition, you can
quickly peek at it in a small popup.

- **Shortcut**:
- Windows/Linux: `Alt + F12`
- macOS: `Option + F12`
- This is great for inspecting code without losing your place.

---

### 4. **Integrated Terminal**


VSCode has a built-in terminal, so you don't have to switch between editor and
terminal windows.

- **Shortcut**:
- Windows/Linux: `Ctrl + ~`
- macOS: `Cmd + ~`
- You can also open a new terminal by clicking **Terminal** → **New Terminal** from
the top menu.

---

### 5. **Split Editor**


Easily split your editor into multiple panes for viewing multiple files side by
side.

- **Shortcut**:
- Windows/Linux: `Ctrl + \`
- macOS: `Cmd + \`
- You can then move files between these panes by dragging them.

---
### 6. **Emmet Abbreviations**
Use Emmet to write HTML/CSS more quickly. For example, typing
`div.container>ul>li*5` will expand to a `<div>` with a container class and an
unordered list with 5 list items.

- **Example**: Type `ul>li*5` and press `Tab` to generate a list with 5 items.

---

### 7. **Rename Symbol (Refactoring)**


Rename variables, functions, classes, or files across your entire workspace without
manually finding and replacing each instance.

- **Shortcut**:
- Windows/Linux: `F2`
- macOS: `F2`
- After selecting a variable or function, press `F2` to rename it, and VSCode will
update all instances.

---

### 8. **Auto Save**


Enable **auto-save** to automatically save your files as you type.

- To enable: Go to **File** → **Auto Save**, or press `Ctrl + Shift + P` and search


for "Auto Save."
- This feature ensures you never lose progress and saves time during development.

---

### 9. **Live Server (Extension)**


The **Live Server** extension allows you to launch a local development server
directly from VSCode and see changes live in the browser as you save files.

- To install: Go to the Extensions panel (`Ctrl + Shift + X`), search for **Live
Server**, and install it.
- After installation, right-click on your `index.html` file and select **Open with
Live Server**.

---

### 10. **Code Formatting with Prettier**


Prettier is a code formatter that automatically formats your code to maintain
consistent style across your project.

- Install the **Prettier** extension via the Extensions panel.


- To format a file, press `Shift + Alt + F` (Windows/Linux) or `Shift + Option + F`
(macOS).
- You can also enable auto-format on save in the settings (`"editor.formatOnSave":
true`).

---

By mastering these VSCode tricks, you'll be able to develop more efficiently and
reduce the time spent on repetitive tasks. These tricks help improve navigation,
editing, and overall productivity.

You might also like