DEV Community

Cover image for The Best VS Code Extensions For Remote Working
Carlo Morrone
Carlo Morrone

Posted on

The Best VS Code Extensions For Remote Working

What do developers want? Money, flexible schedules, pizza? Sure. Effortless remote collaboration? Hell, yes! Programming is a team sport and without proper communication, you can’t really expect spectacular results. A remote set-up can make developer-to-developer communication challenging, but equipped with the right tools you have nothing to fear. Let’s take a look at the best VS Code extensions that can seriously improve your remote working routine.

 

Live Share

If you’ve been working remotely for a while now, the chances are that you’re already familiar with this one. This popular extension lets you and your teammates edit code together.

It can also be enhanced by other extensions for example Live Share Audio which allows you to make audio calls, or Live Share Whiteboard to draw on a whiteboard and see each other's changes in real-time.

Benefits for remote teams:

Boost your team’s productivity by pair-programming in real-time, straight from your VS Code editor!

liveshare-icon.png

 

GitLive

This powerful tool combines the functionality of Live Share with other super useful features for remote teams. You can see if your teammates are online, what issue and branch they are working on and even take a peek at their uncommitted changes, all updated in real-time.

But probably the most useful feature is merge conflict detection. Indicators show in the gutter where your teammates have made changes to the file you have open, these update in real-time as you and your teammates are editing and provide early warning of potential merge conflicts.

Finally, GitLive enhances code sharing via LiveShare with video calls and screen share and even allows you to codeshare with teammates using other IDEs such as IntelliJ, WebStorm or PyCharm.

Benefits for remote teams:

Improve developer communication with real-time cross-IDE collaboration, merge conflict detection and video calls!

vsc ultimate v4.png

 

GistPad

Gists are a great way not only to create code snippets, notes, or tasks lists for your private use but also to easily share them with your colleagues. With GistPad you can seamlessly do it straight from your VS Code editor!

You can create new gists from scratch, from local files or snippets. You can also search through and comment on your teammate’s gists (all comments will be displayed at the bottom of an opened file or as a thread in multi-file gists).

The extension has broad documentation and a lot of cool features. What I really like is the sorting feature, which when enabled, will group your gists by type (for example note - gists composed of .txt, .md/.markdown or .adoc files, or diagram - gists that include a .drawio file) which make it supereasy to quickly find what you’re looking for.

Benefits for remote teams:

Gists are usually associated with less formal, casual collaboration. The extension makes it easier to brainstorm over the code snippet, work on and save a piece of code that will be often reused, or share a task list.

gist-pad-3.png

 

Todo Tree

If you create a lot of TODOs while coding and need help in keeping track of them, this extension is a lifesaver. It will quickly search your workspace for comment tags like TODO and FIXME and display them in a tree view in the explorer pane.

Clicking on a TODO within the tree will bring you to the exact line of code that needs fixing and additionally highlight each todo within a file.

Benefits for remote teams:

The extension gives you an overview of all your TODOs and a way to easily access them from the editor. Use it together with your teammates and make sure that no task is going to be forgotten!

todotree.png

 

Codetour

If you’re looking for a way to smoothly onboard a new team member to your team, Codetour might be exactly what you need. This handy extension allows you to record and playback guided walkthroughs of the codebase, directly within the editor.

A "code tour" is a sequence of interactive steps associated with a specific directory, file or line, that includes a description of the respective code and is saved in a chosen workspace. The extension comes with built-in guides that help you get started on a specific task (for example record, export, start or navigate a tour). At any time you can edit the tour by rearranging or deleting certain steps or even change git ref associated with the tour.

Benefits for remote teams:
A great way to explain the codebase and create project guidelines available within VS Code at any time for each member of the team!

codetour-3.png

 

Git Link

Simple and effective extension that does one job: allows you to send a link with selected code from your editor to your teammates, who can view it in GitHub. Besides the advantage of sharing code with your team (note that only committed changes will be reflected in the link), it is also useful if you want to check history, contributors, or branch versions.

Benefits for remote teams:
Easily send links of code snippets to coworkers!

gitlink.gif

 

Good communication within a distributed team is key to productive remote working. Hopefully, some of the tools I rounded up in this short article will make your team collaboration faster, more efficient and productive. Happy hacking!

Discussion (11)

Collapse
amindevphp profile image
Amin

Thanks for share your tips ,its so much benefit , Without this tools work to remotely can be hard !

Collapse
toddewilliams profile image
Todd Williams

If you like Live Share, you should really like CodeTogether as it live shares between VS Code, Eclipse, IntelliJ and IDEs based on them. Not just between IDEs from M$.

Marketplace: marketplace.visualstudio.com/items...
Site: CodeTogether.com

Disclaimer: You can see from my profile that I work for Genuitec and we make CodeTogether.

Collapse
alphacentaurrii profile image
༺Rakesh Singh༻

Thanks bro i am already seeing benefits of this dev community for enhancing and increasing our productivity thanks again

Collapse
jorgejiza profile image
Jorge

Amazing!.
Thanks for sharing. :)

Collapse
wiamnasr profile image
Wiam Nasr (He/Him)

Thank you for this, as a code newbie in VS I found the Todo Tree to be a life saver

Collapse
johanngoncalvespereira profile image
Johann Gonçalves Pereira

Really useful!

Collapse
rudal profile image
Rudy Rudal

Thanks for sharing! without this, probably i have to share screen all the time hahaha

Collapse
rmorse profile image
Ross Morsali

I thought I would know most of these, turns out I didn't! Thanks for sharing.

Collapse
richardkanai123 profile image
Richard Kanai(李凯男)

Great insights

Collapse
antomor profile image
Antonio Morrone • Edited

Good list, I added it in my bookmarks!