Powerful VS Code Tips & Tricks

As we know, many developers use VS Code as their preferred IDE. And, everyone knows that it's the best in class IDE that's been providing many amazing features. And a lot of you may also don't know about some amazing features that VS Code provides. Let's learn about some amazing features of VS Code and also how you can become a VS Code power user.

Becoming a power user in VS Code is another way to stay ahead. Developers often talk about how they stay at the top of their game and constantly learn new things and continue to hone their skills. This is a frequently asked interview question, as employers prefer talent dedicated to broadening their skill set. Mastering your IDE and your computer might be one of the best investments in professional development.

Developers always look for a new blog, and each IDE has a blog. Do subscribe! Another reason is that it saves a lot of time, Investing time in improving your workflow always pays off! Higher productivity === More work.

Check out the flowchart below of how long you can work on making a routine task more efficient before you spend more time than you save 👇

Here is what distinguishes a regular user from a power user:

Intimate knowledge of your IDE: VSCode has excellent documentation, Checkout!

Customization: Power users tailor their workflow to fit their specific needs.

Automate: all the boring and repetitive tasks.

Continuously improve: your workflow and keep track of your IDE’s evolution.

Let's see some more features of VS Code and how you can make the right use of it:

Most developers use Git and GitHub on a daily basis, and so do I. However, I try to avoid using the terminal or github.com.

GitHub Pull Requests and Issues allows me to open, edit, and review PRs in the comfort of VSCode. I find my IDE to be a better place to review code than GitHub’s web or desktop apps. Some developers may disagree, but I appreciate the consistency and comfort of doing it in my own IDE.

Another thing is that Gitlens has some amazing features which you can use by rarely reaching for the terminal to use Git. Supercharge your VS Code with Gitlens!

Usually, we all create a new component, create new pages, etc. And it's quite straightforward, But creating a new folder and initializing files might be tedious for all of us, With the help of Supercharge React you can specify the name and location of the new component. The extension then runs a script that creates a folder and initializes the new component.

Many of you've been using different-different terminals for your work, Like OhMyZsh, Hyper, or default terminal, etc. But what if I could tell you that you can customize your terminal for a better and more productive workflow.

You can customize it like by giving shorter keywords for let's say starting a dev server, For example:

ys = yarn start - helps start the app with just two characters.

gdab = git branch | grep -v "master" | xargs git branch -D - deletes all local branches except master

This is really a time-saving feature that we can integrate it with the terminal, Spending less time typing big words save us a lot of time and it'd keeps us focused on the work that we're actually doing.

VSCode has a powerful IntelliSense, and most of the time, you don’t have to think about using it.

However, when you are browsing suggestions, you can press to see documentation about each available option.

IntelliSense can be additionally customized to fit your workflow and personal preferences.

I'm sure that you use a keyboard shortcut like Ctrl+C and Ctrl+V lol, Who doesn't use it ;) They all are well documented, and if you're not familiar with VSCode's vast familiar shortcuts, then I suggest you to check the documentation of VSCode shortcuts and use them to save more time and get the work done faster.

If you’re wondering whether a command has been assigned to a certain key combo, click the keyboard button in the search bar where you can record keystrokes. You will then see what/if commands have been associated with them.

There's no point in customizing anything if you can't back up and reuse it whenever you need it.

Check Settings Sync which helps your code settings as a Gist and it allows you to sync your workflow between multiple machines. You need a GitHub token to configure it, but afterward, you just need to run a single command to upload and download your settings.

I’ve already mentioned several extensions and explained how I use them. Here are some notable mentions:

JavaScript Booster: automates some common refactoring actions.

Surround: If you need to wrap some selected code in an arrow function or maybe a try-catch block? This extension will do it for you!

Node_Modules: Even if you haven’t excluded node_modules from VSCode’s explorer for a performance boost, that folder is so big it’s impossible to navigate. This extension lets you search for whatever it is you’re looking for instead of scrolling around endlessly.

Code issue manager: Bring visibility to issues in your codebase. Share knowledge with your teammates, convince leadership to invest in tech debt, and elevate your engineering culture. Integrates with many IDEs and GitHub, Jira, Linear, and more.

File Utils: A convenient way of creating, duplicating, moving, renaming, and deleting files and directories. It’s also customizable.

Don’t be a regular user. Be a power user instead. Always go a step further than the others and see where it takes you. Always take note of inefficiencies and try to mitigate them.

Hope you guys have found this show helpful, Like the show and comment below if you have any doubts.