How To Enable Real-Time Merge Conflict Detection in WebStorm

Ah, the dreaded resolve conflicts popup. You’ve finished crafting the perfect code, just a quick merge in of master (ahem, main) before you submit your PR, and then… ?

If only there was an early warning system for merge conflicts so you could be b…

Ah, the dreaded resolve conflicts popup. You’ve finished crafting the perfect code, just a quick merge in of master (ahem, main) before you submit your PR, and then… ?

img-1-scaled.png

If only there was an early warning system for merge conflicts so you could be better prepared or even avoid the conflicts in the first place I hear you say? Well if you are a WebStorm user today is your lucky day!

Firstly, you’ll need to install and set up GitLive. Then if you right click the gutter on WebStorm, you will see the option to “Show Other’s Changes”.

img-2-scaled.png

It will be disabled if the file open in the editor is not from git or there are no other changes to it from contributors working on other branches (aka you are safe from conflicts). If it’s enabled there will be one or more change indicators in the gutter of the editor.

img-3.3.png

These will show you where your teammates have made changes compared to your version of the file and even update in real-time as you and your teammates are editing.

key indicators-dark.png

If you’ve made a conflicting change you will see the bright red conflict indicator. These conflicts can be uncommitted local changes you have not pushed yet or existing changes on your branch that conflict with your teammates’ changes.

Click your teammate’s icon in the gutter to see the diff between your version and theirs, the branch the offending changes are from, and the issue connected to that branch if there is one.

img-5.3.png

From this popup you can also cherry-pick your teammate’s change directly from their local version of the file. For simple conflicts this can be a quick way to resolve them as identical changes on different branches will merge cleanly.

Unfortunately, it’s not always possible to resolve a conflict straight away but with the early warning, you’ll be better prepared, avoiding any nasty surprises at merge time!

Check out this blog post or the GitLive docs if you want to learn more.


Print Share Comment Cite Upload Translate
APA
Fred | Sciencx (2024-03-28T15:44:41+00:00) » How To Enable Real-Time Merge Conflict Detection in WebStorm. Retrieved from https://www.scien.cx/2021/09/16/how-to-enable-real-time-merge-conflict-detection-in-webstorm/.
MLA
" » How To Enable Real-Time Merge Conflict Detection in WebStorm." Fred | Sciencx - Thursday September 16, 2021, https://www.scien.cx/2021/09/16/how-to-enable-real-time-merge-conflict-detection-in-webstorm/
HARVARD
Fred | Sciencx Thursday September 16, 2021 » How To Enable Real-Time Merge Conflict Detection in WebStorm., viewed 2024-03-28T15:44:41+00:00,<https://www.scien.cx/2021/09/16/how-to-enable-real-time-merge-conflict-detection-in-webstorm/>
VANCOUVER
Fred | Sciencx - » How To Enable Real-Time Merge Conflict Detection in WebStorm. [Internet]. [Accessed 2024-03-28T15:44:41+00:00]. Available from: https://www.scien.cx/2021/09/16/how-to-enable-real-time-merge-conflict-detection-in-webstorm/
CHICAGO
" » How To Enable Real-Time Merge Conflict Detection in WebStorm." Fred | Sciencx - Accessed 2024-03-28T15:44:41+00:00. https://www.scien.cx/2021/09/16/how-to-enable-real-time-merge-conflict-detection-in-webstorm/
IEEE
" » How To Enable Real-Time Merge Conflict Detection in WebStorm." Fred | Sciencx [Online]. Available: https://www.scien.cx/2021/09/16/how-to-enable-real-time-merge-conflict-detection-in-webstorm/. [Accessed: 2024-03-28T15:44:41+00:00]
rf:citation
» How To Enable Real-Time Merge Conflict Detection in WebStorm | Fred | Sciencx | https://www.scien.cx/2021/09/16/how-to-enable-real-time-merge-conflict-detection-in-webstorm/ | 2024-03-28T15:44:41+00:00
https://github.com/addpipe/simple-recorderjs-demo