Table of Contents
Visual Studio Code (VS Code) has become the go-to editor for developers, and there’s a reason why it’s so popular. Whether you’re just starting with it or have been using it for a while, a few handy tips can take your experience to the next level.
These tips go beyond just shortcuts. They help you streamline your workflow, save time, and enhance your productivity. From improving how you navigate through files to customizing your layout, these tweaks are all about making your coding journey smoother and more efficient. Let’s dive into them!
Integrated Shell and Multiple Profiles
The integrated terminal in VS Code allows you to run your code or scripts without leaving the editor. To open it, press Ctrl + ` (backtick). This gives you access to a terminal that stays within the editor window. You can select the terminal shell from a dropdown menu that includes options like PowerShell, Command Prompt, or Bash. Simply click the dropdown and choose the one you need. Split Terminal: To work with multiple terminal profiles simultaneously, use the Split Terminal feature. Click the dropdown next to the Plus icon on the top of the terminal window and select Split Terminal. This will let you work with separate shells for different tasks, like running a development server in one and executing commands in another.
Commands:
- Open integrated terminal:
Ctrl + `
- Open a terminal in an external window:
Ctrl + Shift + C
Split terminal: Click the dropdown next to the plus sign in the terminal → Split Terminal
Split the Editor
VS Code offers a split editor feature, allowing you to view and edit multiple files side by side. To split your current editor horizontally, press **Ctrl + **.This feature helps when you’re comparing two files or working on different sections of code simultaneously. You can create several split layouts, including grid layouts, by going to View → Editor Layout → Select Layout and choose how you want your workspace to be arranged.
Commands:
- Split the editor horizontally:
*Ctrl + *
- Close active split:
Ctrl + W
- Switch between splits:
Ctrl + 1/2/3...
- Create a new split layout:
View → Editor Layout → Select Layout
Create Files on the Go
When you click on a file path in your code (for example, in an import statement), hold Ctrl and click the path to open the file instantly. If the file doesn’t exist yet, VS Code will prompt you to create it right then and there, making it super easy to manage files without leaving the editor.
Commands:
- Open a file from the path:
Ctrl + Click on the path
Scroll Fast
For large files, scrolling through code can be slow. But if you press Alt and scroll with your mouse wheel, the scroll speed increases by 5x, making it much faster to navigate large files.
Commands:
- Fast scroll:
Alt + Mouse Scroll
Synchronize Scrolling Across Editors
When you are comparing two files side by side, you can synchronize the scrolling so that when you scroll one editor, the other scrolls at the same speed. To enable this, open the Command Palette (Ctrl + Shift + P), search for Toggle Locked Scrolling Across Editors, and hit Enter.
Commands:
- Open Command Palette:
Ctrl + Shift + P
- Toggle-locked scrolling across editors:
Toggle Locked Scrolling Across Editors
Sticky Scroll
When working with large files, especially those with sections or headings, the Sticky Scroll feature allows the current section you’re editing to remain visible at the top of the editor. This helps with navigation and keeps your focus on the relevant part of the document.
To activate it, go to the Command Palette (Ctrl + Shift + P) and search for Toggle Editor Sticky Scroll.
Commands:
- Open Command Palette:
Ctrl + Shift + P
- Toggle Sticky Scroll: Toggle Editor Sticky Scroll
Multi-Cursor Editing
Multi-cursor editing is an incredibly useful feature when you want to edit the same text in multiple places simultaneously. To add multiple cursors, hold Alt and click in multiple locations. If you want to add cursors at every occurrence of a selected word, press Ctrl + Shift + L.
You can also add a cursor for the next occurrence by pressing Ctrl + D repeatedly.
Commands:
- Add multiple cursors:
Alt + Left-click
- Add cursor to every occurrence:
Ctrl + Shift + L
- Select the next occurrence:
Ctrl + D
Markdown Preview
If you’re working with markdown files, you can preview them easily in VS Code. To open a markdown preview in a new tab, press Ctrl + Shift + V. Alternatively, you can use Ctrl + K V to view the markdown in a side-by-side split.
Commands:
- Open Markdown preview in a new tab:
Ctrl + Shift + V
- Open Markdown preview in split view:
Ctrl + K V
Zen Mode
For distraction-free coding, Zen Mode eliminates all UI elements except the editor, allowing you to focus solely on your code. To enable Zen Mode, press Ctrl + K Z. To exit, press Esc twice.
Commands:
- Enable Zen Mode:
Ctrl + K Z
- Exit Zen Mode:
Esc (twice)
Move a Line-Up or Down
To quickly reorder lines of code, you can move them up or down without cutting and pasting. Press Alt + Up Arrow to move a line up and Alt + Down Arrow to move it down.
Commands:
- Move line up:
Alt + Up Arrow
- Move line down:
Alt + Down Arrow
Rename Function/Variable
Renaming a function or variable across your entire codebase is easy in VS Code. Select the item you want to rename and press F2. Then type the new name, and it will be updated in all occurrences automatically.
Commands:
- Rename variable or function:
F2
Format the Whole Document
To automatically format an entire document according to the defined code style, press Ctrl + Shift + I. This will tidy up your code without needing to manually adjust indentations or line breaks.
Commands:
- Format entire document:
Ctrl + Shift + I
Comment/Uncomment Multiple Lines
To comment or uncomment multiple lines at once, press Ctrl + Shift + A on Linux (this is OS-specific). This is a huge time-saver when you want to quickly disable or enable sections of code.
Commands:
- Comment multiple lines (Linux only):
Ctrl + Shift + A
Simple Browser
VS Code includes a Simple Browser extension for viewing web content directly in the editor. This is useful for quickly previewing web pages or documentation without leaving the code editor.
To use it, open the Command Palette (Ctrl + Shift + P) and search for Simple Browser.
Commands:
- Open Simple Browser:
Ctrl + Shift + P
→ search for “Simple Browser”
Double-Click Keeps the File Active
By default, VS Code will close files that you haven’t modified when you open a new file. However, if you want to keep a file open even after opening another, simply double-click the file in Explorer. This will keep the file active in the editor.
Commands:
- Open a file and keep it active:
Double-click
the file in the explorer
THE FINAL WORD
VS Code is packed with powerful features that, when used correctly, can significantly boost your productivity. These 15 tips and tricks will help streamline your workflow and allow you to work more efficiently, whether you’re a beginner or an experienced developer. Start using these commands today and unlock the full potential of VS Code!
Let’s Get Started