Git in WebStorm WebStorm Git 使用指南 WebStorm Git 使用指南 Git sa WebStorm

Prerequisites: 前置條件: 前置条件: Mga Kinakailangan: You need WebStorm installed and SSH keys configured for Gitea. Git must be installed on your computer. 你需要先安裝 WebStorm設定好 SSH 金鑰以連接 Gitea。你的電腦上也需要安裝 Git。 你需要先安装 WebStorm设置好 SSH 密钥以连接 Gitea。你的电脑上也需要安装 Git。 Kailangan mo ng naka-install na WebStorm at na-configure na SSH keys para sa Gitea. Kailangan ding naka-install ang Git sa iyong computer.

WebStorm has a built-in Git GUI that lets you do everything without leaving the IDE — no terminal or external Git client needed. WebStorm 內建了一個完整的 Git 圖形介面,你可以在 IDE 中完成所有 Git 操作,不需要打開終端機或外部工具。 WebStorm 内建了一个完整的 Git 图形界面,你可以在 IDE 中完成所有 Git 操作,不需要打开终端或外部工具。 May built-in Git GUI ang WebStorm na nagbibigay-daan sa iyo na gawin ang lahat nang hindi umaalis sa IDE — hindi kailangan ng terminal o external na Git client.

The main Git-related areas in WebStorm: WebStorm 中主要的 Git 相關區域: WebStorm 中主要的 Git 相关区域: Ang mga pangunahing Git-related na lugar sa WebStorm:

WebStorm Git | VCS menu Editor Area 編輯區域 编辑区域 Editor Area Commit Git Terminal ☑ main Alt+0 Alt+9 Branch widget 分支選擇器 分支选择器 Branch widget
  • Commit tool window (Alt+0) — stage files and write commit messages 暫存檔案並撰寫 commit 訊息 暂存文件并撰写 commit 消息 i-stage ang mga file at sumulat ng commit message
  • Git tool window (Alt+9) — view commit log, branch graph, and diffs 查看 commit 記錄、分支圖和 diff 查看 commit 记录、分支图和 diff tingnan ang commit log, branch graph, at diffs
  • Branch widget 分支選擇器 分支选择器 Branch widget ( bottom-right corner 右下角 右下角 kanang ibaba ) — switch, create, and manage branches 切換、建立和管理分支 切换、创建和管理分支 mag-switch, gumawa, at mag-manage ng branches

You can clone a repository directly from WebStorm without using the terminal. 你可以直接在 WebStorm 中 clone repository,不需要使用終端機。 你可以直接在 WebStorm 中 clone 仓库,不需要使用终端。 Pwede kang mag-clone ng repository nang diretso mula sa WebStorm nang hindi gumagamit ng terminal.

Step 1: From the Welcome screen, click Get from VCS. If you already have a project open, go to Git → Clone... in the menu bar. 步驟一:在歡迎畫面點擊 Get from VCS。如果你已經打開了一個專案,可以從選單列選擇 Git → Clone... 步骤一:在欢迎画面点击 Get from VCS。如果你已经打开了一个项目,可以从菜单栏选择 Git → Clone... Step 1: Mula sa Welcome screen, i-click ang Get from VCS. Kung may bukas ka nang project, pumunta sa Git → Clone... sa menu bar.

Step 2: Paste the SSH clone URL from Gitea and choose where to save the project: 步驟二:貼上從 Gitea 複製的 SSH clone URL,然後選擇專案儲存位置: 步骤二:粘贴从 Gitea 复制的 SSH clone URL,然后选择项目保存位置: Step 2: I-paste ang SSH clone URL mula sa Gitea at piliin kung saan i-save ang project:

Clone Repository URL: git@git-ssh.datawords.hk:MyOrg/my-project.git Directory: ~/Projects/my-project Clone

Step 3: Click Clone. WebStorm will download the repository and open it automatically. 步驟三:點擊 Clone。WebStorm 會下載 repository 並自動打開。 步骤三:点击 Clone。WebStorm 会下载仓库并自动打开。 Step 3: I-click ang Clone. Ida-download ng WebStorm ang repository at awtomatikong bubuksan ito.

Tip: 提示: 提示: Tip: Always use the SSH URL (starting with git@) from Gitea, not HTTPS. This way you won't need to enter a password. 請一律使用 Gitea 的 SSH URL(以 git@ 開頭),而非 HTTPS。這樣就不需要每次輸入密碼。 请一律使用 Gitea 的 SSH URL(以 git@ 开头),而非 HTTPS。这样就不需要每次输入密码。 Laging gumamit ng SSH URL (nagsisimula sa git@) mula sa Gitea, hindi HTTPS. Hindi ka na kailangang mag-enter ng password.

The Commit tool window (Alt+0) is where you stage files and create commits — all without the terminal. Commit 工具視窗Alt+0)讓你暫存檔案和建立 commit,完全不需要使用終端機。 Commit 工具窗口Alt+0)让你暂存文件和创建 commit,完全不需要使用终端。 Ang Commit tool window (Alt+0) ang lugar kung saan ka mag-stage ng files at gumawa ng commits — lahat nang hindi gumagamit ng terminal.

Step 1: Stage files. In the Commit tool window, you'll see all changed files. Check the box next to each file you want to include in the commit. 步驟一:暫存檔案。在 Commit 工具視窗中,你會看到所有已修改的檔案。勾選你想要加入 commit 的檔案。 步骤一:暂存文件。在 Commit 工具窗口中,你会看到所有已修改的文件。勾选你想要加入 commit 的文件。 Step 1: I-stage ang mga file. Sa Commit tool window, makikita mo ang lahat ng nabagong file. I-check ang box sa tabi ng bawat file na gusto mong isama sa commit.

Commit Changes src/index.html M src/style.css M package-lock.json M Commit Message feat: add responsive layout Commit Commit and Push Diff <div class="header"> + <h1>Welcome</h1> - <h1>Hello</h1> </div> Click file 點擊檔案 点击文件 I-click ang file to see diff 查看 diff 查看 diff para makita ang diff

Step 2: Review changes. Click any file in the list to see its diff in the right panel. Green lines are additions, red lines are deletions. 步驟二:檢查改動。點擊列表中的任何檔案,右側面板會顯示其 diff。綠色行表示新增,紅色行表示刪除。 步骤二:检查改动。点击列表中的任何文件,右侧面板会显示其 diff。绿色行表示新增,红色行表示删除。 Step 2: I-review ang mga pagbabago. I-click ang kahit anong file sa list para makita ang diff sa kanang panel. Berde ang mga additions, pula ang mga deletions.

Step 3: Write a commit message in the text area and click Commit (or Commit and Push to push immediately). 步驟三:撰寫 commit 訊息然後點擊 Commit(或者點擊 Commit and Push 直接推送)。 步骤三:撰写 commit 消息然后点击 Commit(或者点击 Commit and Push 直接推送)。 Step 3: Sumulat ng commit message sa text area at i-click ang Commit (o Commit and Push para i-push kaagad).

Shortcut: 快捷鍵: 快捷键: Shortcut: Press Ctrl+K to open the Commit dialog at any time. Use Ctrl+Shift+K to push after committing. 隨時按 Ctrl+K 打開 Commit 對話框。Commit 後按 Ctrl+Shift+K 推送。 随时按 Ctrl+K 打开 Commit 对话框。Commit 后按 Ctrl+Shift+K 推送。 Pindutin ang Ctrl+K para buksan ang Commit dialog anumang oras. Gamitin ang Ctrl+Shift+K para mag-push pagkatapos mag-commit.
Important: 重要: 重要: Mahalaga: Always review the diff before committing. Make sure you're not including sensitive files like .env or API keys. 提交前請務必檢查 diff。確保你沒有加入敏感檔案,如 .env 或 API 金鑰。 提交前请务必检查 diff。确保你没有加入敏感文件,如 .env 或 API 密钥。 Laging i-review ang diff bago mag-commit. Siguraduhing hindi ka nagsasama ng mga sensitive file tulad ng .env o API keys.

The branch widget in the bottom-right corner of WebStorm shows your current branch and lets you manage all branches. WebStorm 右下角的分支選擇器顯示你目前的分支,並讓你管理所有分支。 WebStorm 右下角的分支选择器显示你目前的分支,并让你管理所有分支。 Ang branch widget sa kanang ibaba ng WebStorm ay nagpapakita ng iyong kasalukuyang branch at nagbibigay-daan sa iyo na pamahalaan ang lahat ng branches.

Create a new branch 建立新分支 创建新分支 Gumawa ng bagong branch

  1. Click the branch name in the bottom-right corner (e.g. develop) 點擊右下角的分支名稱(例如 develop 点击右下角的分支名称(例如 develop I-click ang branch name sa kanang ibaba (hal. develop)
  2. Select New Branch 選擇 New Branch 选择 New Branch Piliin ang New Branch
  3. Type the branch name (e.g. feature/add-login) and press Enter 輸入分支名稱(例如 feature/add-login)然後按 Enter 输入分支名称(例如 feature/add-login)然后按 Enter I-type ang branch name (hal. feature/add-login) at pindutin ang Enter
Search branches... + New Branch Local Branches ☑ develop feature/sidebar fix/header-bug ☑ develop Click here 點擊這裡 点击这里 I-click dito

Switch branches 切換分支 切换分支 Mag-switch ng branch

Click the branch widget and select the branch you want to switch to. WebStorm will automatically stash or warn you about uncommitted changes. 點擊分支選擇器,選擇你要切換的分支。WebStorm 會自動 stash 或提醒你有未提交的改動。 点击分支选择器,选择你要切换的分支。WebStorm 会自动 stash 或提醒你有未提交的改动。 I-click ang branch widget at piliin ang branch na gusto mong lipatan. Awtomatikong mag-stash o magbabala ang WebStorm tungkol sa mga hindi pa na-commit na pagbabago.

Other branch operations 其他分支操作 其他分支操作 Iba pang branch operations

Right-click any branch in the popup to see more options: Merge into Current, Rebase Current onto Selected, Rename, Delete, and more. 在彈出選單中右鍵點擊任何分支可以看到更多選項:Merge into CurrentRebase Current onto SelectedRenameDelete 等。 在弹出菜单中右键点击任何分支可以看到更多选项:Merge into CurrentRebase Current onto SelectedRenameDelete 等。 I-right-click ang kahit anong branch sa popup para makita ang mga karagdagang opsyon: Merge into Current, Rebase Current onto Selected, Rename, Delete, at iba pa.

Push

After committing, push your changes to Gitea: Commit 之後,將你的改動推送到 Gitea: Commit 之后,将你的改动推送到 Gitea: Pagkatapos mag-commit, i-push ang iyong mga pagbabago sa Gitea:

  1. Press Ctrl+Shift+K (or go to Git → Push) Ctrl+Shift+K(或到 Git → Push Ctrl+Shift+K(或到 Git → Push Pindutin ang Ctrl+Shift+K (o pumunta sa Git → Push)
  2. Review the list of commits to be pushed 檢查即將推送的 commit 列表 检查即将推送的 commit 列表 I-review ang listahan ng mga commit na pu-push
  3. Click Push 點擊 Push 点击 Push I-click ang Push
WebStorm Local Gitea Remote Ctrl+Shift+K Ctrl+T

Pull (Update)

Before starting work each day, update your project to get the latest changes: 每天開始工作前,更新專案以取得最新改動: 每天开始工作前,更新项目以获取最新改动: Bago magsimulang magtrabaho araw-araw, i-update ang iyong project para makuha ang pinakabagong mga pagbabago:

  1. Press Ctrl+T (or go to Git → Update Project) Ctrl+T(或到 Git → Update Project Ctrl+T(或到 Git → Update Project Pindutin ang Ctrl+T (o pumunta sa Git → Update Project)
  2. Choose Rebase as the update method 選擇 Rebase 作為更新方式 选择 Rebase 作为更新方式 Piliin ang Rebase bilang update method
  3. Click OK 點擊 OK 点击 OK I-click ang OK

Push Rejected — Remote Has New Changes Push 被拒絕 — 遠端有新改動 Push 被拒绝 — 远端有新改动 Push Rejected — May Bagong Changes sa Remote

If someone else pushed changes while you were working, your push will be rejected. This is normal and easy to fix. 如果其他人在你工作期間推送了改動,你的 push 會被拒絕。這是正常的,很容易處理。 如果其他人在你工作期间推送了改动,你的 push 会被拒绝。这是正常的,很容易处理。 Kung may ibang nag-push ng mga pagbabago habang nagtatrabaho ka, ang iyong push ay mare-reject. Normal ito at madaling ayusin.

A Your commit (B) 你的 commit (B) 你的 commit (B) Iyong commit (B) Their commit (C) 對方的 commit (C) 对方的 commit (C) Kanilang commit (C) Push rejected! Push 被拒絕! Push 被拒绝! Push rejected! Fix: Pull first, then Push 解決:先 Pull 再 Push 解决:先 Pull 再 Push Ayusin: Pull muna, tapos Push Merged 已合併 已合并 Na-merge Push

WebStorm makes this easy — when push is rejected, it shows a dialog offering to update and push automatically. Click it and WebStorm will pull the remote changes, integrate them, and push for you. WebStorm 會讓這件事變得很簡單 — 當 push 被拒絕時,它會彈出對話框提供自動更新並推送的選項。點擊後 WebStorm 會自動拉取遠端改動、整合後再推送。 WebStorm 会让这件事变得很简单 — 当 push 被拒绝时,它会弹出对话框提供自动更新并推送的选项。点击后 WebStorm 会自动拉取远端改动、整合后再推送。 Ginagawa itong madali ng WebStorm — kapag na-reject ang push, magpapakita ito ng dialog na nag-aalok na mag-update at mag-push nang awtomatiko. I-click ito at pu-pull ng WebStorm ang remote changes, i-integrate ang mga ito, at mag-push para sa iyo.

You can also do it manually: press Ctrl+T to pull first, then Ctrl+Shift+K to push again. 你也可以手動操作:先按 Ctrl+T 拉取,然後按 Ctrl+Shift+K 再次推送。 你也可以手动操作:先按 Ctrl+T 拉取,然后按 Ctrl+Shift+K 再次推送。 Pwede mo rin gawin nang mano-mano: pindutin ang Ctrl+T para mag-pull muna, pagkatapos Ctrl+Shift+K para mag-push ulit.

Merge vs Rebase — Two Ways to Integrate Changes Merge 與 Rebase — 兩種整合改動的方式 Merge 与 Rebase — 两种整合改动的方式 Merge vs Rebase — Dalawang Paraan para I-integrate ang Changes

When you pull (Ctrl+T), WebStorm asks you to choose between Merge and Rebase. Here's the difference: 當你拉取(Ctrl+T)時,WebStorm 會讓你選擇 MergeRebase。以下是兩者的區別: 当你拉取(Ctrl+T)时,WebStorm 会让你选择 MergeRebase。以下是两者的区别: Kapag nag-pull ka (Ctrl+T), tatanungin ka ng WebStorm na pumili sa pagitan ng Merge at Rebase. Narito ang pagkakaiba:

Merge A C B M Creates a merge commit (M) 產生一個合併 commit (M) 产生一个合并 commit (M) Gumagawa ng merge commit (M) History shows the branch split 歷史記錄會顯示分支分叉 历史记录会显示分支分叉 Ipinapakita ng history ang branch split Rebase A C B' B Replays your commit after theirs 將你的 commit 搬到對方之後重放 将你的 commit 搬到对方之后重放 Ire-replay ang iyong commit pagkatapos ng kanila History stays as a straight line 歷史記錄保持為一條直線 历史记录保持为一条直线 Nananatiling straight line ang history Merge Rebase History 歷史記錄 历史记录 History Branched (shows merge) 有分叉(顯示合併) 有分叉(显示合并) May branch (shows merge) Clean straight line 乾淨的直線 干净的直线 Malinis na straight line Difficulty 難度 难度 Difficulty Easier & safer 更簡單、更安全 更简单、更安全 Mas madali at mas safe Cleaner, but riskier 更整潔,但有風險 更整洁,但有风险 Mas malinis, pero may risk
Recommendation: 建議: 建议: Rekomendasyon: When pulling changes on the same branch, use Rebase — it keeps the history clean without unnecessary merge commits. Use Merge when combining different branches (e.g. merging a feature branch into develop), as it preserves the branch history. 同一條分支上拉取改動時,請使用 Rebase — 它能保持歷史記錄乾淨,不會產生多餘的合併 commit。在合併不同分支時(例如將功能分支合併到 develop)使用 Merge,這樣可以保留分支歷史。 同一条分支上拉取改动时,请使用 Rebase — 它能保持历史记录干净,不会产生多余的合并 commit。在合并不同分支时(例如将功能分支合并到 develop)使用 Merge,这样可以保留分支历史。 Kapag nag-pull ng mga pagbabago sa parehong branch, gamitin ang Rebase — pinapanatili nitong malinis ang history nang walang hindi kailangang merge commits. Gamitin ang Merge kapag pinagsasama ang magkaibang branches (hal. pag-merge ng feature branch sa develop), dahil pinapanatili nito ang branch history.

When two people edit the same lines in a file, Git creates a merge conflict. WebStorm has a powerful 3-way merge tool to resolve them visually. 當兩個人修改同一個檔案的相同行時,Git 會產生合併衝突。WebStorm 有一個強大的三欄合併工具,可以圖形化地解決衝突。 当两个人修改同一个文件的相同行时,Git 会产生合并冲突。WebStorm 有一个强大的三栏合并工具,可以图形化地解决冲突。 Kapag dalawang tao ang nag-edit ng parehong mga linya sa isang file, gumagawa ang Git ng merge conflict. May malakas na 3-way merge tool ang WebStorm para resolbahin ang mga ito nang visual.

When a conflict occurs, WebStorm shows a notification. Click Merge to open the merge tool: 當衝突發生時,WebStorm 會顯示通知。點擊 Merge 打開合併工具: 当冲突发生时,WebStorm 会显示通知。点击 Merge 打开合并工具: Kapag may nangyaring conflict, magpapakita ng notification ang WebStorm. I-click ang Merge para buksan ang merge tool:

Yours (Local) 你的版本(本地) 你的版本(本地) Sa Iyo (Local) color: blue; font-size: 16px; » Result (Output) 結果(輸出) 结果(输出) Resulta (Output) color: blue; font-size: 16px; padding: 8px; « Theirs (Remote) 對方的版本(遠端) 对方的版本(远端) Sa Kanila (Remote) color: red; padding: 8px;

The merge tool shows three panels: 合併工具顯示三個面板: 合并工具显示三个面板: Ang merge tool ay nagpapakita ng tatlong panel:

  • Left — your local changes 左邊 — 你的本地改動 左边 — 你的本地改动 Kaliwa — ang iyong local na mga pagbabago
  • Center — the merged result (this is what gets saved) 中間 — 合併後的結果(這是最終儲存的版本) 中间 — 合并后的结果(这是最终保存的版本) Gitna — ang na-merge na resulta (ito ang mase-save)
  • Right — the other person's changes (from the remote) 右邊 — 對方的改動(來自遠端) 右边 — 对方的改动(来自远端) Kanan — ang mga pagbabago ng ibang tao (mula sa remote)

For each conflict, click the » or « arrows to accept changes from left or right. You can also edit the center panel directly. When done, click Apply. 對於每個衝突,點擊 »« 箭頭來接受左邊或右邊的改動。你也可以直接編輯中間面板。完成後點擊 Apply 对于每个冲突,点击 »« 箭头来接受左边或右边的改动。你也可以直接编辑中间面板。完成后点击 Apply Para sa bawat conflict, i-click ang » o « arrows para tanggapin ang mga pagbabago mula sa kaliwa o kanan. Pwede mo ring i-edit nang diretso ang center panel. Kapag tapos na, i-click ang Apply.

Tip: 提示: 提示: Tip: Non-conflicting changes are merged automatically. You only need to resolve the parts where both sides changed the same lines. 沒有衝突的改動會自動合併。你只需要處理雙方都修改了相同行的部分。 没有冲突的改动会自动合并。你只需要处理双方都修改了相同行的部分。 Ang mga hindi nag-conflict na pagbabago ay awtomatikong ina-merge. Kailangan mo lang resolbahin ang mga bahagi kung saan pareho nilang binago ang parehong mga linya.

Quick reference of the most useful Git shortcuts in WebStorm: WebStorm 中最常用的 Git 快捷鍵速查表: WebStorm 中最常用的 Git 快捷键速查表: Mabilis na reference ng mga pinaka-kapaki-pakinabang na Git shortcuts sa WebStorm:

Shortcut 快捷鍵 快捷键 Shortcut Action 操作 操作 Action
Ctrl+K Commit changes 提交改動 提交改动 I-commit ang mga pagbabago
Ctrl+Shift+K Push commits to remote 推送 commit 到遠端 推送 commit 到远端 I-push ang mga commit sa remote
Ctrl+T Update project (pull) 更新專案(拉取) 更新项目(拉取) I-update ang project (pull)
Alt+9 Open Git log 打開 Git 記錄 打开 Git 记录 Buksan ang Git log
Alt+0 Open Commit tool window 打開 Commit 工具視窗 打开 Commit 工具窗口 Buksan ang Commit tool window
Alt+` VCS operations popup (quick menu) VCS 操作選單(快速選單) VCS 操作菜单(快速菜单) VCS operations popup (quick menu)
Ctrl+D Show diff for selected file 顯示選中檔案的 diff 显示选中文件的 diff Ipakita ang diff ng napiling file
Ctrl+Alt+Z Rollback changes (revert file) 回退改動(還原檔案) 回退改动(还原文件) I-rollback ang mga pagbabago (i-revert ang file)
Tip: 提示: 提示: Tip: On macOS, replace Ctrl with Cmd and Alt with Option for all shortcuts above. macOS 上,將以上所有快捷鍵中的 Ctrl 替換為 CmdAlt 替換為 Option macOS 上,将以上所有快捷键中的 Ctrl 替换为 CmdAlt 替换为 Option Sa macOS, palitan ang Ctrl ng Cmd at Alt ng Option para sa lahat ng shortcuts sa itaas.

Other useful features you can explore: 其他值得探索的實用功能: 其他值得探索的实用功能: Iba pang mga kapaki-pakinabang na feature na pwede mong i-explore:

  • Git Blameright-click the gutter (line numbers area) → Annotate with Git Blame to see who changed each line 右鍵點擊行號區域 → Annotate with Git Blame 查看每行的修改者 右键点击行号区域 → Annotate with Git Blame 查看每行的修改者 i-right-click ang gutter (line numbers area) → Annotate with Git Blame para makita kung sino ang nagbago sa bawat linya
  • Local Historyright-click a file → Local History → Show History to see all changes, even uncommitted ones 右鍵點擊檔案 → Local History → Show History 查看所有改動,包括未提交的 右键点击文件 → Local History → Show History 查看所有改动,包括未提交的 i-right-click ang file → Local History → Show History para makita ang lahat ng pagbabago, kahit hindi pa na-commit
  • StashGit → Stash Changes to temporarily save uncommitted work Git → Stash Changes 暫時儲存未提交的工作 Git → Stash Changes 暂时保存未提交的工作 Git → Stash Changes para pansamantalang i-save ang hindi pa na-commit na trabaho

You're all set! 大功告成! 大功告成! Handa ka na!

You can now do all your everyday Git operations directly in WebStorm. For more details on creating pull requests, see the Pull Request Guide. 你現在可以直接在 WebStorm 中完成所有日常 Git 操作。關於如何建立 Pull Request,請參閱 Pull Request 指南 你现在可以直接在 WebStorm 中完成所有日常 Git 操作。关于如何创建 Pull Request,请参阅 Pull Request 指南 Pwede mo nang gawin ang lahat ng pang-araw-araw na Git operations nang diretso sa WebStorm. Para sa mga detalye tungkol sa paggawa ng pull requests, tingnan ang Pull Request Guide.