Even without the extensions and themes that make the VS Code a powerful tool for every developer, but it is loaded with lots of features by default. However, some of these useful features are not obvious, even to experienced developers. And with each new update of VS Code, more handy features get rolled in — often remaining below the waterline.
Here I’ve listed 10 useful VS Code tricks that you might or might not be aware of. It will be helpful for developers of all levels, from the newcomers to the seasoned vet.
1. Type to find any command
Want to find a command, in VS Code? Press Ctrl-Shift-P and start typing.
The command palette, as it’s called, gives you fast access to any registered command, including those provided by add-ons. Plus, if there’s a key binding associated with a given command, it’s displayed in the type-to-search drop-down list. This way, you can cut straight to the key shortcut in the future.
2. Open/Close terminal with one hand
The pop-open terminal window in VS Code is a massive convenience. No need to switch out to another application window to deal with the terminal. It’s also readily accessible by pressing Ctrl-` (the backtick key). What’s nice about this is that pressing these keys requires only one hand, so you can kick open the window or shut it without touching the mouse.
3. Multi cursor selection
One fairly wizardly way to edit a document in the VS Code is to define multiple cursors. That’s right—you can type in a document in more than one place at a time.
To add cursors at arbitrary positions, select a position with your mouse and use Alt+Click and to set cursors above or below the current position use Ctrl+Alt+Up or Ctrl+Alt+Down.
You can add additional cursors to all occurrences of the current selection with Ctrl+Shift+L.
To go back to a single cursor, just hit the Escape key.
4. Word-based suggestions from multiple documents
It has the ability to make word-based suggestions as you type for most common plain-text document types. By default, however, suggestions only get supplied from the current document or open documents of the same type.
But the recently introduced feature lets you find suggestions from all currently open files.
Set the editor.wordBasedSuggestionsMode configuration option to allDocuments to get suggestions from every open file, not just what you’re currently editing or open files with the same extension. This is handy if you have files that hold type stubs for your application, but don’t share a file extension with the file you’re editing.
5. Focus/Zen Mode
It is a distraction-free view. All the extra toolboxes and bars in your window will be removed, allowing you to completely focus on your code.
Jump to and from Zen mode by selecting View > Appearance > Toggle Zen Mode.
Also, you can centre-align your code in Zen Mode to experience a view like a document editor. Jump in and out of the centred layout by selecting View > Appearance > Toggle Centered Layout.
6. Split view
If you’re good at multitasking, and you are working on two different files of the same project simultaneously, or need to check the difference between two files, then go to the split view.
The split view can be customized based on your preferences, whether you like to layout files vertically or horizontally.
You can achieve the split view by selecting View > Editor Layout > Split Up.
7. Git integration
It comes with Git integration that allows you to commit, pull, and push your code changes to a remote Git repository.
You just have to open a file in a VS Code that belongs to a Git repository. The editor will show the difference between the working copy and the current file in a remote repository. This won’t work without an internet connection; one is required to stay connected with the Git repository.
8. Exclude folders
You can use the exclude folder option to remove unwanted folders like node_modules or others you don’t want to open in Visual Studio Code.
To exclude a folder, go to File > Preferences, and search for file.exclude in the search settings. You can add the pattern of the folder you don’t want VS Code to open.
9. Go to definition
While programming or scripting, you’ll often run into a variable or method that you don’t recognize. You could spend several minutes searching for the right file, or you could hold Command Ctrl (on Windows) and click the variable or method name. VS Code will then take you to its definition.
10. Errors and warnings
Edsger Dijkstra once said that if debugging is the process of removing software bugs, then programming must be the process of putting them in.
During your development journey, you’ll often run into errors or warnings. One way to address them is to scroll down to that particular error in the code or a better way is to quickly jump to errors and warnings in the project using Ctrl+Shift+M or cycle through errors with F8 or Shift+F8.
NOTE
Conclusion
I hope you have enjoyed learning some new tricks in making effective use of Visual Studio Code.
Know a trick in VS Code and feel it would be helpful for others? Share it as a comment below! Will add it to another article.
Happy Coding!
Top comments (4)
Thanks for the tip about Ctrl-Shift-P! That's a really handy feature that I never knew about. :)
Thanks for reading :)
Very intresting list of tips for one of the best editors out there, thanks !
I'm glad you liked it! Thanks for reading :)