You have unlimited access as a PRO member
You are receiving a free preview of 3 lessons
Your free preview as expired - please upgrade to PRO
- Object Oriented Programming With TypeScript
- Angular Elements Advanced Techniques
- TypeScript - the Basics
- Cloud Scheduler for Firebase Functions
- Testing Firestore Security Rules With the Emulator
- How to Use Git and Github
- Infinite Virtual Scroll With the Angular CDK
- Build a Group Chat With Firestore
- Async Await Pro Tips
Top Ten Visual Studio Code Pro TipsEpisode 112 written by Jeff Delaney
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.
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.
The command pallette is your best friend, open it with:
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.
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
Angular has two awesome snippet libraries available for VS Code. Both are great and you can use them together.
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.
You can open the integrated command line by expanding the bottom pane of the screen or running:
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.
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.
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.
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.
The debugger deserves a video all to iteself - thankfully, VS Code has already made one of those.
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.
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.