VS code tips and tricks you might not know


Contains tips and tricks that I had found to be useful.

July 03, 2021
5 min read
VS code Icon

I've been using VS code for almost a year now and had watched and had read a couple vs code tricks that you could find elsewhere in the internet , And i wanted to share the tips and tricks that I had found that could help you love VS Code more.

Gitlens for git integrations

I've had this extension installed in the past but I wasn't leveraging the full potential of it. After spending some time learning about this extension I was blown away by what it can do, it had made my developer experience truly great as you no longer have to go into the terminal to type those git commands.

Track recent changes

This is pretty useful if you want to see the new changes you've made.

Gitlens Demo

sync created branch to github repository

Ever had that time when you're creating a new branch and wanted to sync it in the Github repository, Gitlens can do that too and if you're also planning to delete a branch go to the command palette and type Delete branch.

Gitlens Demo

Commit directly in the source panel

What's even great about this extension is that you could directly commit your code in the source control panel, no more need to go to the terminal and type out the command.

Gitlens Demo

There's a lot more features that Gitlens has to offer and I would really recommend watching this (video)[https://youtu.be/C6wMNoe78oc] to learn more about what Gitlens has to offer.

VS Code Tricks

Just like me you might have read or had watched a couple of vs code tips and tricks. and here are some of the things that I found recently that not many articles had not mentioned.

ctrl + space

Useful for insert/replace suggestion. To fully utilize this feature go to system preferences and find insert mode and change its value to replace, this makes sure that when we're planning to change something it instead replaces.

vs code Demo

word wrap

Ever had that time where you have a long line of code and you would have to scroll just to see the full of it. well, no more need just go to system preferences > word wrap once you find you just need to enable it.

Wrap tabs

this is a particuarly useful when you have too many files open and you would have to scroll just to see the other files, with this functionality enabled this ensures that you're tab would then go to new line. To enable this feature go to preferences by pressing cmd + , or ctrl + a and type the keyword wrap tabs.

press ctrl shift e for windows and for mac cmd + shift + e to open up explore tabs. you can navigate through the files using arrow and down keys, pressing space opens the folder or opens the file in a new tab.

vs code Demo

Fancy Blnking Cursor

One way to make your VS code prettier is by going the preferences and search for Cursor Blinking and change it's value to expand and although this is just my preferences it also has a couple of options that you could explore from.

Enable smooth scrolling effect

Another way to make your VS code experience to another level is by going to the system preferences and search for Smoooth Scrolling and press the check button. This is pretty useful if you're doing some recording.

vs code Demo

Pin tabs

if you have a file that's always been used and you don't want it to be closed, vs code has a functionality that let you pins a particular file by simply right clicking on a tab that you want to be pin and find Pin.

vs code Demo

Leverage VS code extensions

I've had a lot of vs code extensions installed in my computer but these are the extensions that I had found to be primarily useful and used daily as a front-end web developer. it had made my experience more better and also happy with using VS Code.

  • Path Intellisense: Provides path intellisense to your files.
  • Relative Path: Gets the relative path of any file once installed you can start using by pressing the command ctrl + shift + h or Cmd + shift + h.
  • Auto Imports : Finds code completion for all available imports.


to summarize the points of this article.

  • Gitlens for git integrations.
  • Make use of VS Code keyboard shortcuts.
  • Leverage VS code extensions.