先說一下個人感覺吧，小馬之前也是一直在用 Visual Studio Code 來進行開發，但隨著開發需求增加，VS 所需要的插件越來越多（用過 vs code 的同學都知道，它雖可以進行各種開發語言的撰寫，但是需要相應的插件支持），而插件一多就會造成軟體環境卡頓、專案啟動卡頓等問題，及其影響體驗；還有就是在公司進行團隊協同開發時需要用到 GIT，而 VS 中 GIt 操作是比較復雜的，專案的各種操作都需要用到專門的命令，我相信現在一定有許多小伙伴并不知道如何用它操作 GIT 吧；
而 WebStrom 主要用于前端開發，當我們用到JS或者其他框架時，無需安裝插件，下載即可使用，開發流暢度自然會很高，雖無各類插件但像代碼整理等便捷功能它一樣不少；除此之外Git操作極為簡單，無需命令操作，
（ VS code也很強，僅憑個人習慣使用，）
目錄
一、在 webstorm 中配置 Git
二、克隆 Git 倉庫上的專案至本地
三、更新專案代碼
四、WebStrom 中專案檔案顏色詳解
五、專案提交至 Git
六、檔案定位
七、終端控制臺與版本控制臺
八、 WebStrom 常用快捷鍵
WebStorm 是 JetBrains 公司旗下一款 JavaScript 開發工具，已經被廣大中國 JS 開發者譽為“Web前端開發神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等，與 IntelliJ IDEA 同源，繼承了 IntelliJ IDEA 強大的 JS 部分的功能，
小馬在這里使用的是 WebSrtrom 2018.3 英文版，
一、在 webstorm 中配置 Git
1.點擊 File->Settings…；
2.輸入 Git 進行搜索；
3.點擊 GitHub->Add account，輸入自己的 Git 賬號和密碼；
4.點擊 Git，在 Path to Git executable 中選擇自己電腦所安裝的 Git 所在絕對路徑；
5.點擊 Apply，點擊 ok，Git 配置完成；
二、克隆 Git 倉庫上的專案至本地
1.打開軟體，check out->GIT；
2.已經進入軟體也可，點擊 VCS->Git->Clone;
3. 出現以下彈框，填好目標地址和本地存盤路徑后點擊 Clone 即可；
4.克隆之后記得先改變分支，進入到自己的分支；
5.分支命名；
6.選好分支后打開 Terminal，npm i / cnpm i 命令下載 node_modules 包；
7.下載完modules包之后就可以正常啟動專案了；
三、更新專案代碼
在使用 Git 協同開發的環境下，每次打開 webstorm 專案最好先更新代碼，讓自己的代碼與 Git 倉庫保持同步，以免出現一些不必要的沖突；
1.點擊以下按鈕拉取最新代碼進行更新，也可用快捷鍵 Ctrl+T；
2.出現以下彈框，點擊ok；
3.更新成功后會有如下提示；
四、WebStrom 中專案檔案顏色詳解
紅色：本地新增檔案，沒有關聯到git，直接提交無法提交到Git(提交時不顯示該檔案)，需要先Add添加至倉庫后再提交；
綠色：紅色檔案Add至倉庫后轉變而成，ctrl + k 可以直接提交；
藍色：檔案內容已經被修改，可以revert恢復至修改前狀態；
當檔案名稱為藍色時說明該檔案已經被修改，但還未提交至Git；
如果是誤修改，想要回到檔案修改前的狀態，右鍵 -> Git -> Revert 即可恢復;
當檔案名為紅色時表示該檔案為新創建的檔案且未上傳至倉庫，僅存在于本地；
想要洗掉此新創建的檔案時，若該檔案未被其他檔案參考則無需安全洗掉，直接洗掉即可；
五、專案提交至 Git
1.代碼修改完成之后(此時檔案名為藍色)提交至 Git 倉庫，提交按鈕如下，也可使用快捷鍵Ctrl+K；（注意在提交前最好先進行拉取(更新) 
代碼操作，保證代碼在最新狀態再提交，避免產生沖突）
2.提交時必須寫明備注，提交時注意選擇自己確定要提交的代碼檔案，不提交的不要選擇，提交成功會有成功提示且會在版本控制中生成提交記錄；提交成功后檔案名變為正常顏色；
3.若想要提交新創建的檔案(檔案名為紅色)，必須先將此檔案添加到倉庫中，右鍵->Git->Add，如果該檔案已經添加則Add選項不可選中，添加成功后檔案名稱變為綠色，綠色時可直接提交；
六、檔案定位
當檔案數目較多時點擊該圖示可將當前所撰寫的代碼檔案在專案檔案目錄中定位；
七、終端控制臺與版本控制臺
在軟體底部可以進入終端控制臺與版本控制臺；
終端控制臺用于專案的啟動，node_modules包的下載等；
cnpm安裝命令：npm install -g cnpm (cnpm是npm的淘寶鏡像，在國內速度要優于npm)
node_modules包下載：cnpm i / npm i
專案啟動命令：cnpm run dev / npm run dev
版本控制可以看到專案的進展情況，Git倉庫成員的提交記錄等；
八、 WebStrom 常用快捷鍵
| ctrl + / | 單行注釋 |
| ctrl + shift + / | 塊注釋 |
| Ctrl+R | 替換文本 |
| Ctrl+F | 查找文本 |
| Ctrl+H | 顯示類結構圖 |
| Ctrl+Q | 顯示注釋檔案 |
| Ctrl+ALT+L | 自動整理代碼格式 |
| Ctrl+B / 雙擊滾輪 | 快速打開游標處的類或方法 |
| Ctrl+T | 拉取最新代碼 |
| Ctrl+K | 提交代碼至Git |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/395103.html
標籤：其他
上一篇：介面測驗之Postman使用