10 Essential Productivity Tips for Visual Studio Code

Visual Studio Code is easy nan champion programming matter editor. For many, it replaced Sublime Text arsenic their editor of choice. It's an Electron-based JavaScript app, but it's lightning-fast and doesn't suffer capacity issues for illustration galore JavaScript apps do.

And successful lawsuit you were wondering, yes, VS Code is open-source and disposable connected GitHub. Here are respective basal Visual Studio Code tips that you should study if you want to boost your productivity and workflow to nan adjacent level.

1. Master nan Command Palette successful VS Code

Much for illustration Sublime Text (and TextMate earlier it), VS Code has thing called a command palette. This characteristic lets you entree various commands conscionable by typing them retired alternatively than having to navigate menus utilizing your mouse.

You tin bring up nan bid palette pinch nan Ctrl + Shift + P (or Cmd + Shift + P) keyboard shortcut. Just commencement typing what you want to do (e.g., "close"), and nan options will update successful existent time. Some commands reside successful categories (e.g., "File," Git," "Terminal," etc.) which makes them easier to locate.

2. Set a Working Project Folder

If you click connected Explorer successful nan navigation sidebar, you'll spot a caller subpanel unfastened up. This subpanel consists of 2 sections (you whitethorn person to click connected nan three-dot paper and prime Open Editors to person it arsenic 1 of nan options): Open Editors (i.e., files and documents presently open) and No Folder Opened. The second is what we're willing in.

Click Open Folder (or you tin navigate to File > Open Folder successful nan paper bar) and prime immoderate files connected your system. This will load that files into VS Code arsenic nan "current moving project," allowing you easy entree to each files and subfolders, truthful you don't person to support flipping backmost and distant to File Explorer.

3. View Several Files astatine Once

Most modern matter editors tin support much than 1 record astatine once, allowing you to move betwixt unfastened files done a tab-based interface. More precocious matter editors whitethorn moreover support side-by-side matter editing, and VS Code does excessively (albeit horizontally only).

But side-by-side editing is reliable connected smaller screens, for illustration laptops aliases older monitors, and that's wherever VS Code shines.

It has thing called dynamic panels, wherever if 1 of nan unfastened archive panels is excessively narrow, it will automatically widen erstwhile you make that archive progressive (i.e., spot your cursor successful it). If you're still utilizing a solution adjacent to 720p, you'll emotion this feature.

4. Edit Multiple Lines astatine Once

If you ever request to insert aliases delete aggregate instances of matter passim a document, each you person to do is create multiple cursors. You tin do this by holding down Alt (or Option connected Mac) and clicking anyplace successful nan text. Every click creates a caller cursor.

This is peculiarly useful for things for illustration HTML, wherever you mightiness want to adhd galore instances of nan aforesaid people aliases alteration nan format of respective hyperlinks. Learn it and emotion it.

5. Go to Definition

When you're programming aliases scripting, oftentimes, you'll tally into a adaptable aliases method that you don't recognize. So what do you do? You could walk respective minutes searching for nan correct file, aliases you could prime nan variable/method pinch your cursor and deed F12 to instantly jump to its definition. Alternatively, prime your method, function, aliases adaptable and property Ctrl or Cmd, past click connected it to spell to nan definition.

Or you tin usage nan Alt + F12 (or Cmd + F12) keyboard shortcut to simply peek astatine nan definition, which shows you nan meaning correct successful statement wherever your cursor is alternatively than opening up nan root file.

To spell nan other direction, you tin prime a defined variable/method and usage nan Shift + F12 keyboard shortcut to find each references to it. This besides shows up successful nan statement astatine your cursor.

6. Rename All Occurrences

Refactoring is simply a necessary facet of penning and maintaining cleanable code, but it tin beryllium rather a headache—especially erstwhile you're refactoring a ample module aliases an different immense chunk of code. So alternatively of hunting done dozens of files conscionable to rename a adaptable aliases method, fto VS Code do it for you.

If you prime a variable/method and deed F2, you tin edit nan name, and it will alteration each lawsuit of that variable's sanction passim nan full existent moving project.

If you only want to alteration wrong nan existent file, usage nan Ctrl/Cmd + F2 keyboard shortcut, and VS Code will spawn a cursor astatine each lawsuit passim nan existent file.

7. Search Across Many Files

If you're moving pinch files that aren't root code, nan symbol-finding features supra (in extremity #5) won't beryllium usable. So what tin you do erstwhile you request to find a condemnation aliases connection but don't cognize which record it's in? You spell backmost to nan basal Find function.

Ctrl/Cmd + F lets you hunt wrong nan existent file, while Ctrl + Shift + F (or Shift + Cmd + F) lets you hunt wrong each files successful nan full existent moving project, including each sub-folders recursively.

8. Use nan Command Line successful VS Code

VS Code comes pinch an integrated terminal. On Windows, this terminal shows up arsenic Command Prompt. On Mac and Linux, it shows up arsenic a Bash prompt. Either way, nan terminal starts successful nan existent moving project's directory, if location is one, aliases successful your location files otherwise.

It besides supports nan expertise to person multiple, abstracted terminals. Just click nan Plus (+) button successful nan apical correct to spawn much terminal instances, aliases click nan Trash Can to adjacent nan existent terminal. The drop-down paper makes it easy to move betwixt them (and doesn't discarded arsenic overmuch surface abstraction arsenic a tab-based interface might).

9. Install a New Theme successful VS Code

As you’d astir apt expect, VS Code lets you taxable nan syntax highlighting of matter and root code. Unfortunately, it doesn't let theming of nan interface itself, but nan syntax highlighting is nan important bit. A bully taxable tin boost your productivity much than you mightiness think.

You tin find caller themes connected nan VS Code Marketplace (they're free), aliases you tin hunt for them straight successful VS Code. Check retired our database of the champion VS Code themes successful lawsuit you request recommendations.

10. Install Third-Party Extensions successful VS Code

The past basal characteristic to item is nan extensibility of VS Code done third-party extensions. As pinch themes, you tin find them connected nan VS Code Marketplace (yes, these are free arsenic well), aliases you tin hunt for them successful VS Code. Access nan Extensions sheet pinch nan Ctrl + Shift + X (or Shift + Cmd + X) keyboard shortcut.

Extensions are nan cardinal to maximizing your productivity. You'll find each kinds of devices here, for illustration linters, debuggers, snippets, quality-of-life improvements to VS Code itself, build tools, and moreover immoderate extensions that usage ChatGPT for easier programming successful VS Code.

Visual Studio Code Is nan Best Text Editor

As overmuch arsenic galore look to emotion it, VS Code isn't cleanable for anyone—nothing ever is—and it whitethorn not beryllium what you're looking for. Remember that VS Code is simply a matter editor, not a full-blown IDE.

However, you should springiness it a try, and spell successful pinch an unfastened mind. We deliberation its features whitethorn astonishment you—in a bully way!