VS Code extension improve your project version management
Tags: javascript, vscode, react, github
Published: 2021-11-25 04:03:58

## Background

Our team mainly maintains Tob web projects, and each project has multiple versions that are maintained concurrently. For example, after project A is deloyed to different customers for use, subsequent iterations are upgraded in the form of versions for customers to pay for, and customers can also purchase different versions , After a long time, V1.0, V2.0, V3.0 will appear... This kind of situation where multiple versions are used by different customer groups, in the normal development process, a certain feature or bugfix is in V1.0 After the above development is completed, if you want to apply to other versions such as 2.0, 3.0..., you have to commit/push one by one and then check out to switch between different versions for development and maintenance. The code with similar versions is okay. Cherry-pick can directly apply this commit, and When the version span is large and the business code gap is large, this action of switching the checkout branch is indispensable. Even if you clone multiple codes by creating a new folder, you need to open a lot of vscodes to switch back and forth. What's more troublesome is that if you want to run a project self-test or development preview, you also face tedious and time-consuming operations such as frequent modules-reinstallation of dependencies, which wilfully consumes our development time cost.

How to improve this situation through technical means? Or if there is a tool or plug-in that can list all versions of files, so that files between different versions can be easily modified or run services back and forth in the current editor panel.

Based on this idea, i decided to develop a vscode plug-in to implement a tool for checking out multiple versions.



## Solution

The development tool used in our team is vscode, so we can solve the above problems by developing a plug-in. The main functions of the plug-in should have:
     · List all branches (ie versions) for checkout;
     · The checked out branch and the current project are listed side by side in the same editor panel, which is convenient for real-time development;
     · Add terminal opening support;



## Implementation

Use git for project version or branch management.

#### Implementation analysis:

​     · List branches: All major versions can be easily identified with incremental branch names, for example: v1.0.0, v2.0.0
​     · Version check out: use git worktree

#### List branches

Use the third-party library simple-git to call the git command to find out all branches:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uuzjk5144yxeg9a969kf.png)
 

#### Version checkout

Using git-worktree: Git worktree is a multi-repository and multi-work area management model launched by git in 15 years: a git repository can support multiple work trees, corresponding to different branches. We create a (main) working area (tree) (main working tree) in git through "git init" or "git clone".
Specific information: https://git-scm.com/docs/git-worktree

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zw4ho5wgy3uaa06jicqi.png)
 


## Plug-in

According to the above implementation scheme, the implemented vscode plugin has been released (based on vscode 1.62+): version shuttle 
Plug-in Link:https://marketplace.visualstudio.com/items?itemName=liquidityVision.version-shuttle



## Instructions

Lists all branches (ie versions):

![Image description](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0989e4ba3c6649a3af3db7a03c52e893~tplv-k3u1fbpfcp-watermark.image)

Checkout branch (ie version):

![Image description](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/45721313966b436a8c932a9d892182d6~tplv-k3u1fbpfcp-watermark.image)



Hope it may be handy for you, thanks !