VSCode is the ultimate multi-purpose code editor that can fit in any workflow. It has a lot of hidden features and a huge variety of extensions that can take your work experience to a new level. It’s hard to find and keep track of everything, so in this post I will share my experience. Even though this guide is a bit JavaScript/TypeScript-centric, I believe everyone can pick up something new.
Shortcuts
I am sure you already know the basic shortcuts for editing, and I want to focus on the most interesting and useful ones. I will use shortcut names since the actual keybindings are different depending on your OS. You can open Keyboard Shortcuts in your VSCode instance by clicking on the cogwheel in the Activity Bar to look up the combination.
Essentials
Show All Commands - the most powerful shortcut which opens a search through all commands. You can explore and execute any command from here.
Go to file... - opens a search through all files and paths in your workspace. Also, shows a list of recently opened files/tabs.
Editing essentials
Trigger Suggest - invokes Intellisense. I love using it to discover possible props and destructible values from objects.
Copy line up/down - not only does it work for copying lines as the name states, it also works for copying selections!
Go to Bracket - underrated shortcut for Javascript that helps to untangle parenthesis and brackets by jumping between matching brackets.
Quick Fix... - triggers suggestions for refactoring and fixing issues, if the lightbulb is shown next to the gutter.
Format Document - makes messy code look better.
Refactor/inspect
Go to Definition - peek definition and its references.
Rename Symbol - rename value and all its occurrences.
Find - perform a search in the current file.
Replace - find and replace in the current file.
File: Compare Active File with Saved - open a diff of the last saved file state and unsaved changes.
Tab management
Switch tabs - opens a list of currently opened tabs which is great for iterating between files you are working on.
Reopen closed tab - helps you overcome frustration after closing a tab you didn't want to.
History-based navigation
Go back - return to the last editing location or tab.
Go forward - undo for Go back.
Go to Last Edit Location - return to the place of your last edit after traveling through imports.
Quick access
View: Toggle Integrated Terminal - focus, hide, or show the terminal inside VSCode.
View: Show Search - jump to the global search across all files in your workspace.
Additionally, there are editing hacks in the VSCode docs that are worth learning.
Extensions
VSCode utilizes the addon-first approach. Even the basic features are based on extensions (search for "@builtin" in the extensions tab). It means that before starting to work with some new technology, you should consider looking up extensions for it first.
Sharing my list of the most useful and carefully selected extensions I use in my daily workflow:
IntelliCode - gives AI boost to Intellisense and tries to make suggestions more useful.
GitLens - an essential Swiss army knife for working with Git.
GitGraph - adds a visual representation of the history of your Git repo.
Git Stash - used as an addition for GitLens to work with git stash, adds a stash explorer to the Source Control tab, and ability to see diffs.
Conventional Commits - awesome extension that allows writing conventional commit messages with ease and gitmojis.
Back & Forth - navigate through recent files and edits using UI buttons. By the way, I am the author :)
Project Manager - I find to work with VSCode workspaces confusing. This extension makes it easy to switch between projects.
EditorConfig - support cross-editor formatting rules.
Live Server - serve plain HTML website on localhost.
Live Share - a killer VSCode extension that takes pair programming to the highest level.
Resource Monitor - a small dashboard with live stats of your machine.
Grammarly (unofficial) - a popular grammar checker useful for Markdown.
Test Explorer UI - adds a tree of tests and can be extended with complementary extensions for various testing tools.
Favorite themes: OneDark Pro, GitHub theme, Secunda, Kaia Theme.
Favorite icon themes: Material Icon theme, Awoo.
Front-end extensions:
ESLint - essential static analysis tool that prevents huge amount of potential bugs. I can't imagine my life without ESLint.
Prettier - essential code formatter that helps to keep codebase clean. It can be used in combination with ESLint so formatting errors are shown as lint errors (guide).
Quokka - a Javascript runner used for creating and debugging algorithms.
Debugger for Chrome - run debugger right inside VSCode.
Document This - a helper for writing JSDoc notations.
Jest Runner - easily run and debug Jest tests.
More tips
- Use Emmet shortcuts everywhere (guide)
- Learn how to work Git in VSCode UI (guide)
- Use Docker and Remote extension pack for remote development (guide)
- Edit Markdown with ease in VSCode (guide)
- Learn more tricks at vscodecandothat.com
Special thanks to Ana Gilda Rodrigues for proofreading and trying out VSCode