Medicine2code

Essential VS Code Extensions For Remote Work

Tien Phan
Tien Phan

Programming is a team based practice 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!

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!

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.

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!

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!

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!

Conclusion

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 coding!


More Posts

Implement Code Splitting in React with Suspense

Make your application streamlined by loading only what is essential.

Tien Phan
Tien Phan

Use Hooks + Context, not React + Redux

How to manage state in your react application

Tien Phan
Tien Phan