5 VSCode Extensions I Use Daily to Manage My Remote Teams
I work with multiple Front End Development teams on multiple projects. To work with my teams in the most efficient way possible, there are a few VSCode extensions I have come to rely on to streamline my day. It amazes me how far VSCode has come in the last few years. Writing this reminded me of how so many things used to be so difficult, not all that long ago.
GitLens — Git Supercharged
GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more. From: GitLens VSCode Marketplace Page
GitLens is truly the one extension I cannot live without. My job would be so much more difficult without it. I am constantly viewing other developers' code and always trying to determine why they wrote something the way they did. There was a time before Git that you had to physically hunt down people and ask them if they made these changes to a file. Maybe because I remember these times, the ability of Git still impresses me, but add GitLens to the mix, and your code forensics abilities reach CSI Miami levels.
Now I can view a file, find the history by line, by file, and quickly view diffs right from the file itself.
A few of the features I use daily are:
Git Blame — Current Line Blame
This is the feature I use all the time. Place your cursor on any line in the codebase and get a message off to the right. The message contains the author, date, and commit message of the last change for this line.
Mouse over this message, and you get a popup. This section allows for even more actions, such as revisions links to the commits in the repo and more. It is fully customizable.
Current line blame is also the one feature that will keep you humble as a developer. At some point, you will see a piece of code and wonder who the hell wrote that, only to see the git blame pop up saying, "You, 1 year ago". It will happen, I promise.
In a properly documented project, this info will point you quickly to the commit and ticket of any change in the codebase. This will save you multiple hours of investigation.
Revision Navigation
Sometimes you need to see the history of commits on a file. Using revision navigation at the top of the file, I can quickly cycle through the diffs of previous commits until I find the one that added the code in question. Assuming everyone was making their properly formatted commit messages, it will point me to the ticket I need to review or the developer I need to talk to.
Git Code Lens
I'll often want to know when a file I'm looking at was last updated and, if so, by who? With this feature, I can instantly see how many people worked on a file or code block, who they were, and when. This small piece of info can be invaluable. It can answer so many questions that used to take so much time to answer in the past.
Error Lens
ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline. From: Error Lens VSCode Marketplace Page
Error Lens is a simple but powerful extension. It speeds things up when you are reviewing a lot of code in a day. Simply put, this takes ESlint to the next level by placing the ESLint error message right out there in the open for you to see immediately. The little squiggly red lines help, but I prefer a big red reminder right off to the right to tell me what I screwed up immediately. Then, when I pull someone else's branch for a code review, I immediately see if there are issues, which helps me quickly assess the code.
You can add error icons in the gutter and messaging in the status bar in the settings for this extension.
Live Share Extension Pack
This extension pack includes everything you need to start collaboratively editing and debugging in real time, including integrated audio and text chat. This provides you and your team/class with a one-click installation, to begin pair programming, performing remote code reviews, driving interactive lectures, and more, without needing to leave Visual Studio Code. From: Live Share Extension Pack VSCode Marketplace Page
Everyone on a team of two or more developers using VSCode should be familiar with this extension by now. However, I am always surprised by how few developers know about this or have used it yet.
Many times my teams and I meet via teams to go over an issue or review code. They used to share their screen and ask a question about the code. I would then tell them what to change. This method was fine if we're quickly explaining something simple, but often we'd be saying, "No. No. Down one more line. No, the next function. Not that one, that one". Then I'd find myself pointing at the screen with my mouse (or worse, my finger), and of course, they couldn't see it.
Now, I prefer to show them in the code itself. I quickly realized when this extension was first released that it would be the future for remote developers. Though we don't pair-program much, this extension has made it much easier to have these conversations. They can see my cursor, and I can point out precisely what changes need to be made and even make them myself. More importantly, I can pass on pointers to faraway team members they wouldn't otherwise get. Talking about code and actually coding are two different things, and this makes it feel as if we were in the same room.
The beauty is that each participant sees the project in their own VSCode environment, with their theme and plugins. So they are comfortable with the environment and not trying to decipher your theme. And you're not trying to read their bright, default theme.
There are multiple benefits beyond just sharing the screen:
- You can quickly invite multiple people to your session by sending an invite or sharing a link.
- Add participants as collaborators or viewers.
- You can lock down certain files or folders.
- Collaborators and viewers can follow you as you move your cursor or from file to file. Or they can be allowed to work on their own even in different files in your session.
- Not only can you share the code, but you can also share a live server of the project if it's available. So you can debug and view the same session as well. You can even share the terminal.
- There are multiple options for communications, such as chat and speech.
Also great for:
- Pair Programming
- Code Reviews
Peacock
Subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor. From: Peacock VSCode Marketplace Page
This extension is a simple but critical one for my sanity.
As I've said, I work on multiple projects, so I am constantly switching contexts. This constant switching can get confusing quickly when you cannot easily differentiate between two or more VScode windows. I used to find myself going into VSCode, hitting cmd-p to find a file, then freak out wondering why it wasn't there. Then, I'd finally realize I was in the wrong project.
With Peacock, I know that project 1 is the green project, and project 2 is the orange project, and I will instantly know if I open the wrong VSCode window to work.
You can save the colors to your settings.json file in .vscode for the project.
Quokka.js
Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type. From: Quokka.js VSCode Marketplace Page
Quokka comes in handy when I need to teach a concept to new devs, quickly prototype something, or help a dev visualize what is going on with a snippet of code. For example, I can show inline values of variables in the code and demonstrate a proof of concept right in the editor.
This is a paid extension, but there is a community version with limited features. It saves time by saving the need to change contexts to run javaScript code.
Code Time
Code Time is an open-source plugin for automatic programming metrics and time tracking in Visual Studio Code. Join our community of over 150,000 developers who use Code Time to reclaim time for focused, uninterrupted coding. Protect valuable code time and stay in flow. From: Code Time VSCode Marketplace Page
Managing my time over multiple projects with multiple teams and finding time to put my head down and code is hard. Code Time allows me to track my time in VSCode by the project. This allows me to find my best times to code by integrating my calendar and loading their dashboard. In addition, I can add code time blocks to my calendar directly from their dashboard.
I typically only use this to record metrics. I am not in VSCode writing code as much as I was in the past. When writing code regularly, I use this extension to track my time and find the best time to code to block my calendar accordingly.
You can get into the details of your coding time as well by visiting the dashboard. For example, you can see active code times and productivity trends compared to averages. You can also see how you stack up against other developers who use Code Time.
If you work on multiple projects, you can get a breakdown of your work by project too. The extension automatically tracks your work depending on the project you are working on in VSCode.
You can connect Code Time to your calendar to compare your coding time to your meeting time. In addition, you can see how much you're coding outside of work to determine how work is affecting your work-life balance.
There's a "flow mode" that allows you to connect to Slack and automatically turn off notifications, hide your OS taskbar and let you work uninterrupted if you activate it or even if it detects you're actively coding for a while.
What Extensions can you not live without? Tell me in the comments.