Top Ten Visual Studio Code Pro Tips

Over the last few years, Visual Studio Code has executed a shock-and-awe campaign over the open-source IDE market. VS Code was released publicly in 2015 and is now used by 35% of all developers according the 2018 Stack Overflow survey. Let’s find out why it’s the cool editor in town with ten of my favorite pro tips.

10. Keybindings and the Command Pallette

If you want to get things done fast, memorize your hot keys. You can look over the essentials in the cheat sheet or by opening the keybindings page.

Ctrl+K+S
⌘+K+S

The command pallette is your best friend, open it with:

Ctrl+P
⌘+P

As a developer, you’re likely juggling many files simultaneously. Start typing the file name and get full-text search results from the workspace - so much faster than clicking through the directory tree.

• You can start typing with a > to get a list of available tasks.
• Or start with an @ to get a list of symbols in the current file.

Create Custom Keybindings

One useful keybinding missing from VS code is Save All. Let’s create our own keybinding to save all modified files in the workspace with Ctrl+Shift+S.

9. Snippets

Angular has two awesome snippet libraries available for VS Code. Both are great and you can use them together.

• Mikael Morlund’s (Great for NgRx, NGXS, Material, and More)
• John Papa’s (Great for Angular core)

After installing, VS Code will use recognize the snippet prefixes. So start typing ngxs- in a file and you should see some snippet options popup with IntelliSense.

8. Integrated Terminal

You can open the integrated command line by expanding the bottom pane of the screen or running:

Ctrl + `
control + `

7. IntelliSense

IntelliSense is just a fancy word for code-completion. VS Code does it better than any editor I’ve worked with. It will automatically pull in types from installed node modules and does a variety of clever things to help you write less code.

Ctrl+Space
⌘+Space

6. Peek Types and Show References

Not sure what some class or interface is all about? You can find the peek types option by highlighting and right-clicking an interface.

If you happen to be looking at an interface and want to know where it is being used, do the same thing, but click on show references. This will provide you with a list of all files using that code.

5. JSON to Code

Have you ever been working with an API in TypeScript and wished you could have its response strong-typed in your project. Paste JSON as Code converts your JSON into a interface usable in strong-typed languages with a single command.

4. Zen Mode

VS Code is a minimal IDE, but it’s still easy to get distracted by Git, Docker, and update notifications. Zen mode hides these panels and let’s you focus strictly on your code.

Ctrl+Shift+K
⌘+K+Z

3. Debugger

The debugger deserves a video all to iteself - thankfully, VS Code has already made one of those.

2. Git and Gitlens

Managing Git is your IDE is much easier then the command line. The Git panel allows you to stage, commit, stash, and undo changes. But you if want a fully integrated solution that shows you who committed what and when, then install the Gitlens extension to annotate every line of code in the project.

1. Live Share

VS Code Live Share is a brand new feature that is still just in developer preview. It allows you to share your workspace in realtime. If you’re a PRO member, reach out on Slack to schedule a live debugging session.