原文連結:在 WebStorm 中熟練地使用 git

WebStorm 是一款非常強大的程式碼編輯器,然而其中一些技巧有待我們深入發掘,在這裡我先寫一篇 git 操作相關的使用技巧,希望能夠向大家介紹,如何在 WebStorm 中熟練地使用 git?

下面我們將以圖形化介面的方式,教會大家:

1。 git init 初始化(這一步要在命令列操作)

2。 git remotes 管理(增刪改查)

3。 git clone 檢出(約等於以上兩步的合成)

4。 git fetch 拉取遠端倉庫更新

5。 git merge 合併分支

6。 git merge 解決衝突

7。 git add 追蹤檔案

8。 git commit 提交檔案

9。 git push 推送檔案

前置準備:這裡我們以 coding。net 這個程式碼託管網站中演示:

- 我們先來建立一個倉庫

在 WebStorm 中熟練地使用 git

- 建立成功,複製遠端倉庫地址

https://

git。coding。net/dear_liz

hihua/repository-demo。git

在 WebStorm 中熟練地使用 git

那麼,如何將專案同步到本地呢?這裡我們提供兩種方式:

- 第一種思路是,建立一個全新專案後,對其

git init

初始化為 git 專案,然後設定遠端倉庫地址

- 第二種思路是,直接

check out

檢出 github 倉庫到本地目錄

方式一

在 WebStorm 中,建立一個專案:

在 WebStorm 中熟練地使用 git

在專案根目錄下,執行如下 git 命令:

git init

在 WebStorm 中熟練地使用 git

如果此時看到 WebStorm 中出現

Version Control

工具條,並且專案目錄下出現

。git

資料夾,說明我們的專案已經成功初始化為 git 專案

在 WebStorm 中熟練地使用 git

在 WebStorm 中熟練地使用 git

這時我們還需要設定遠端倉庫地址

在 WebStorm 中熟練地使用 git

這裡透過圖形化介面,對 remotes 進行查詢、新增、修改、刪除,而且可以設定多個 remote,相當直觀 ^_^

在 WebStorm 中熟練地使用 git

成功新增遠端倉庫地址

在 WebStorm 中熟練地使用 git

其實,對應的 git 命令是

// 新增

git remote add origin https://git。coding。net/dear_lizhihua/repository-demo。git

// 刪除

git remote remove origin

// 修改 = 刪除 + 新增

git remote remove origin

git remote add origin https://git。coding。net/dear_lizhihua/repository-demo。git

// 查詢

git remote -v

方式二

在 WebStorm 中熟練地使用 git

注意,在資料夾下檢出時,不能有同名的檔案目錄存在

在 WebStorm 中熟練地使用 git

其實,對應的 git 命令是

git clone https://git。coding。net/dear_lizhihua/repository-demo。git

拉取遠端倉庫更新

這裡,我們將大家熟悉的 git pull,拆分為大家不熟悉的

git fetch

git merge

兩個命令的合成,其實拆分後的操作,是比較安全穩妥的做法,具體原因我會在下面詳細解釋(還可以參考 git 少用 pull 多用 fetch 和 merge(git: fetch and merge, don’t pull) 一文),建議大家儘量透過這種方式

更新遠端倉庫的所有分支

這裡我們解釋下為什麼不使用 git pull 這種奇怪操作的原因:

1。 使用 git pull,會在更新完直接 merge。而在兩個分支之間有多個檔案衝突的情況下,會導致產生一堆待 merge 檔案。

2。 只使用 git fetch 更新遠端倉庫的所有分支,等於將這種衝突放在 git merge 這一步。這樣我就可以等到真正需要的時候,再去解決分支下檔案的衝突

前置準備:這裡我們的遠端倉庫還是一個空的倉庫,為了演示我們需要先在網站頁面進行檔案操作,以進行更新操作

前置準備開始

勾選

啟用 README。md 檔案初始化倉庫

,點選

快速初始化倉庫

按鈕

在 WebStorm 中熟練地使用 git

成功建立 README。md

在 WebStorm 中熟練地使用 git

前置準備結束

先記住右下角的工具條中的分支

在 WebStorm 中熟練地使用 git

然後,我們進行更新

在 WebStorm 中熟練地使用 git

奇怪?遠端的分支已經出現了,但是檔案並沒有更新,版本控制裡面也沒有任何提交記錄

在 WebStorm 中熟練地使用 git

以下這些步驟,只在專案初始化時用到

在第一次更新時,我們還需要將 checkout 到 origin/master 上,然後建立從 origin/master 分支處建立 master 分支

在 WebStorm 中熟練地使用 git

在 WebStorm 中熟練地使用 git

在 WebStorm 中熟練地使用 git

至此,更新就算成功了

將遠端分支,合併到本地分支

前置準備:這裡為了演示,我們需要先在網站頁面中執行遠端分支更新

前置準備開始

點選新建檔案,建立一個 。gitignore 檔案

在 WebStorm 中熟練地使用 git

前置準備結束

然後,我們執行上一步的 git fetch

在 WebStorm 中熟練地使用 git

更新成功後,執行 merge 操作

在 WebStorm 中熟練地使用 git

merge 完成,成功獲取到遠端倉庫的檔案

在 WebStorm 中熟練地使用 git

其實,對應的 git 命令是

git fetch origin

git merge origin/master

解決衝突 & 衝突時的說明

前置準備:這裡我們以 http://webpack.js.org 中文倉庫為例,translation 分支是英文文件分支,cn 分支是中文文件分支,二者都是從 master 分支中建立。

衝突產生的說明:我們首先應當瞭解,git 是基於檔案差異、逐行對比。我們一般會在 cn 分支下進行翻譯,然而有時我們會遇到這樣一種情況,當 translation 分支和 cn 分支都對同一檔案的相同行做了修改(這種場景非常常見,因為 translation 分支,同一檔案很可能會增刪改某一句、符號,而我們對這一句也做了翻譯),此時將兩個分支合併,就會發生行的衝突,這時就需要我們解決衝突。我們用以下一系列圖片說明:

將 Local Branches 中的

translation 分支

合併到

cn 分支

在 WebStorm 中熟練地使用 git

衝突檔案的列表

在 WebStorm 中熟練地使用 git

開啟第一個檔案,找到衝突的行(紅色背景)

重要說明:中間部分是 未衝突時 cn 分支下,此檔案所在的 git 節點;左側是 cn 分支下,從 未衝突的 git 節點 到 此檔案最新的 git 節點

的所有 commit 改動;右側是 en 分支下,從

未衝突的 git 節點

此檔案最新的 git 節點

** 的所有 commit 改動。

在 WebStorm 中熟練地使用 git

重新翻譯,將這行的兩側合併(紅色背景自動消除)

在 WebStorm 中熟練地使用 git

右側綠色背景的是 translation 分支新增的行,左側藍色背景是 cn 分支修改的行,我們透過 accept 將這些行整體合併過來(綠色背景和藍色背景自動消除)。

在 WebStorm 中熟練地使用 git

所有的新增、修改、刪除全部處理後,出現提示

在 WebStorm 中熟練地使用 git

第一個檔案從列表中消失,接下來我們逐個合併這些檔案

在 WebStorm 中熟練地使用 git

也可以透過

accept yours

accept theirs

批次處理合併

在 WebStorm 中熟練地使用 git

出現一個新的 git 節點

在 WebStorm 中熟練地使用 git

試著 push 一下,會發現提交記錄為

Merge branch ‘translation’ into cn

的最後一個 git 節點,就是我們合併處理過的那些檔案,這裡我們暫時不推送到遠端倉庫的分支,選擇 Cancel

在 WebStorm 中熟練地使用 git

如果 merge 過程出現問題,不要過分擔心,因為我們並沒有產生真正推送,遠端倉庫的分支下暫時還沒有我們的提交記錄,我們先 git reset 重置到 origin/cn 分支的最後一個 git 節點上

在 WebStorm 中熟練地使用 git

選擇 Hard 模式

在 WebStorm 中熟練地使用 git

其實,對應的 git 命令是(其中

{{git_node_hash}}

部分是你希望重置的 git 節點 hash)

git reset ——hard {{git_node_hash}}

在 WebStorm 中熟練地使用 git

重置成功了,我們可以將上面的合併步驟再重複一次

追蹤(add)本地目錄中的檔案

前置準備:這裡我們為了便於演示,先建立一個新檔案 LICENCE

在 WebStorm 中熟練地使用 git

這個檔案未被追蹤時,是紅色文字,我們點選 add 追蹤它

在 WebStorm 中熟練地使用 git

其實,對應的 git 命令是(其中

{{git_node_hash}}

部分是你希望重置的 git 節點 hash)

git add LICENCE

將本地目錄提交(commit)到遠端倉庫

追蹤成功後,點選 commit 提交它

在 WebStorm 中熟練地使用 git

填寫 message 提交資訊 add LICENSE,然後點選

Commit

按鈕

在 WebStorm 中熟練地使用 git

提交成功

在 WebStorm 中熟練地使用 git

其實,對應的 git 命令是

git commit -m ‘add LICENSE’

將本地目錄推送(push)到遠端倉庫

點選

Push

在 WebStorm 中熟練地使用 git

選擇分支

Current Branch

在 WebStorm 中熟練地使用 git

push 的資訊詳細,點選

Push

按鈕

在 WebStorm 中熟練地使用 git

pushing。。。

在 WebStorm 中熟練地使用 git

push 成功

在 WebStorm 中熟練地使用 git

其實,對應的 git 命令是

git push origin master