小馬帶你認識前端開發神器WebStorm（WebStorm及Git的相關配置與使用）
先說一下個人感覺吧，小馬之前也是一直在用 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 常用快捷鍵
Git WebStorm web前端
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
