What Are Several Useful Keyboard Shortcuts for Maximizing Productivity in VS Code?

You're likely already familiar with some of the basic shortcuts, which are inherited from your operating system. Shortcuts like Ctrl + S to save, Ctrl + C to copy, and Ctrl + V to paste all work in VS Code.

But there's a few that are application specific and can still level up your productivity. It's worth noting that some of these shortcuts may differ by operating system.

For example, Shift + Alt + F will run your configured formatter (such as prettier, for a JavaScript project) on the currently opened file.

Or Ctrl + Shift + F (Windows), or Cmd + Shift + F (Mac), to search the text contents of all the files in your workspace. Then Ctrl + Shift + H (Windows), or Cmd + Shift + H (Mac), if you want to run a find-and-replace.

If you need to remove a line, Ctrl + Shift + K (Windows), or Cmd + Shift + K (Mac), will delete it.

Need some extra room for all your code? Ctrl + B (Windows), or Cmd + B (Mac), will hide the sidebar - which has the file list and extensions menu.

Or maybe you just can't see your code? Ctrl + plus (Windows), or Cmd + plus (Mac), will increase the scaling of the editor, and Ctrl + minus (Windows), or Cmd + minus (Mac), will decrease it.

Finally, if you forget any of these shortcuts, you always have Ctrl + Shift + P (Windows), or Cmd + Shift + P (Mac), which opens the command palette for you to select whatever you may need.

What Are Some Good VS Code Extensions You Can Use in Your Editor?

Better Comments is an extension that offers special highlighting for specific code comments. For example, it will call out "TODO" comments, as well as syntax to indicate questions or warnings.

Code Spell Checker offers indication when you have spelled something incorrectly in your code. Because it is designed for code files, it will account for things like camel case.

Error Lens will help you catch any highlighted errors in your code. Rather than having to rely on the underline that VS Code shows by default, this extension highlights the entire line and displays the error message.

Indent Rainbow adds color to your different levels of indentation. In combination with VS Code's native bracket pair colorization, this can dramatically help identify what scope your code is in.

Or maybe you're looking for something a bit more practical? Consider an AI assistant, like GitHub Copilot or Tabnine, to offer you inline suggestions as you are writing your code.

An icon pack, such as VS Code Great Icons, can help make your file tree cleaner and easier to parse at a glance. And an extension like Colorize can help you understand the values in your CSS properties.

You'll also want language-specific extensions for your projects. If you are using JavaScript, you will likely want ESLint and Prettier to lint and format your code. If you are using TypeScript, you might want Pretty Typescript Errors for easier to read messages.

Finally, you can also have a bit of fun with your editor. VS Code Pets offers configurable virtual pets to keep you company while you squash some bugs.

Power Mode will create flashy effects when you achieve a high enough "combo" by writing more code.