Developer Productivity Tools

software software development tools

Every developer has their own environment. Take a peek into the environment I use to create software. Most of these are independent of the software I create and can be used by anyone.

1. GitLens Visual Studio Code Extension

Visual Studio Code - commonly referred to as vscode - is a free to use code editor created by Microsoft available on all operating systems. With its large popularity, if you are a developer you probably already use this everyday.

On the surface vscode is a code editor that allows you to edit files. Its power lies in the extensions it offers and the customizability of your programming environment. If there is a way to optimize your coding experience an extension for it probably exists.

How does it increase productivity?

My most used (and all time favourite) extension that improves productivity is the GitLens extension. With 59.43 million downloads and an overall rating of 4.8/5 stars, I am confident this will be one of your most used extensions. Overall this extension allows you to use Git inside your code editor.

If you open your project in its root folder, Vscode is smart enough to recognize the branch you are currently on as well as all previous repository information. The days of needing to be a command line wizard are long gone with the ability to do all source control commands straight from your code editor’s GUI. As seen in the image below, the source control menu contains multiple submenus such as commits, repositories, file history, branches, etc. The use of these sub-menus could be a full article itself but I will focus on the source control section since I use it the most.

The source control section is a list of all files changed since your last commit. Each file can be selected to show a side by side ‘Working Tree’ highlighting the removals and additions you did to each file. Picture either git diff or the Files Changed section of a PR on GitHub.

Before I commit and push my code for a PR review I use this file changes section to go through all the changes I made on the current branch to make sure when I create my PR it is clean and only contains changes I made to complete the feature.

Website: https://gitlens.amod.io/

2. GitHub Actions

GitHub Actions is a relatively new feature GitHub provides. This feature automates workflows through the use of action scripts. Action scripts are used to run some code when different things happen in your repository. This could be anything from welcoming a new user, to a full CI/CD pipeline.

How does it increase productivity?

Actions increase productivity by allowing developers to automate workflows in their projects. This is not a new concept as seen in well known tools such as Travis, Jenkins, CircleCI, and many others but if you already have your repository in GitHub it does further centralize your development process.

A nice feature Actions provides that helps with developer productivity is the ability to see whether all tests have passed before merging a pull request. If set up to run on pull request creation, GitHub will run the tests when a pull request is created. This then will stop the reviewers from merging the pull request until all tests have been completed. If there are failing tests it will display this information above the ‘Merge pull request’. This can restrict failing tests from getting into the main branch.

A repository’s workflows are stored in .yml files that contain the instructions for Actions to follow. GitHub provides many great examples here if you would like a base file to start with.

Website: https://github.com/features/actions

3. OhMyZsh Z Shell Framework

With the release of MacOS Catalina, Apple switched from bash to Z shell(zsh) as their default login shell. This was due to the licensing around using bash. The licensing for zsh is much easier for Apple to keep their shell environment updated to the latest version for their new releases.

OhMyZsh is a Z shell framework used to easily install plugins and themes. With its massive popularity there is a large community of developers that have created content to help you understand its features as well as help you through any problems you might encounter.

I would suggest this framework to anyone who doesn’t want to worry about small details and would rather have a quick and easy way to customize their shell. You can have all these features with the default Z shell but it will take more time to set up.

How does it increase productivity?

As every developer knows, getting the right theme for a text editor is almost as important as writing good code. OhMyZsh brings the same ability to your terminal through the use of themes.

Here are some features the simple theme in the image below contains:

  • The current branch is displayed beside the directory path. No more needing to type $ git branch to see if you're pushing to master.
  • The X beside the current branch shows that you have uncommitted changes.
  • Double clicking tab will allow you to tab through the options available. Depending on how long you name your branch names this could save seconds of your day.

Okay, none of these are life changing but it's a nice visual upgrade from the default black and white terminal.

Depending on your developer needs, the plugins are where you can actually save time without having to configure shell scripts yourself. There are around 300 different plugins you can choose from to add aliases to your terminal without you having to write the shell scripts yourself. It’s as simple as adding the plugin name to your ~/.zshrc file in the form plugins=(... <NAME>).

Out of all tools mentioned in this article I believe this one is the most variable in its helpfulness. I am glad it's available as I use it myself but I can see how a developer would view it as being overkill for what is essentially a few shell scripts.

Website: https://ohmyz.sh/

4. React DevTools Extension

Although all the other tools in this list could be used by any developer, this tool is specifically for React developers. React DevTools is a Chrome and Firefox extension that provides a component tree hierarchy in the dev tools. Picture the ‘elements’ tab but with your component names rather than html tags. Each component can be selected to show it’s props, state, and hooks.

How does it increase productivity?

This extension is really helpful when trying to debug what components have been rendered as well as what their current variables are assigned to. I like using this extension to manually edit props or state variables in my components to see the result.

This is also helpful when starting a new feature that I am not sure where in the codebase I will be working from. I can use this extension in the app's feature location to find what the affected component names are, then start developing in the code base from there.

Website: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

5. Microsoft Azure Virtual Machines

While at work I use MacOS but I have helped develop a Windows service. To test this I needed access to a Windows environment. Microsoft offers a cloud platform service that provides access to a windows virtual machine.

How does it increase productivity?

Microsoft Azure provides users with all the benefits of virtual machines. This helps with productivity by providing access to tools without buying another physical machine. To develop the Windows service I could have used another PC with windows installed but it was much easier (and cheaper) to open the Azure virtual machine and do everything remotely.

Website: https://docs.microsoft.com/en-us/azure/virtual-desktop/overview

Chris Francis
Software Developer, BiteSite