之前我們介紹過Webstorm 的主題與配色和字體的設(shè)置方法，這次來說說 Webstorm 的配置。

1、配置分類

Webstorm 的配置分為項(xiàng)目配置和全局配置，在打開一個(gè)項(xiàng)目的時(shí)候，會(huì)在項(xiàng)目根目錄生成 .idea 的隱藏文件夾，這個(gè)文件夾里保存的就是項(xiàng)目配置，而全局配置保存在文檔目錄，全局配置都可以導(dǎo)出。

2、配置查找

Webstorm 的配置非常的多，想要查找某個(gè)方面的配置，打開設(shè)置搜索關(guān)鍵詞即可。如：

這樣查找的配置，然后再點(diǎn)開其中需要的，進(jìn)去配置即可。

3、全局配置

3.1、插件配置

webstorm 雖然功能豐富，但也提供了很多插件提供下載，以擴(kuò)展我們的日常使用。遺憾的是 webstorm 并沒有原生支持 markdown 的顏色高亮，這需要使用插件來完成。這里以 markdown 插件為例，介紹如何下載安裝插件，并配置。

如上圖，首先打開的是已經(jīng)安裝到本地的插件列表，勾選右邊的選項(xiàng)表示啟用該插件。如果在本地沒有相關(guān) markdown 的插件，可以點(diǎn)擊下邊的瀏覽來訪問在線的插件列表。

在打開之后搜索 markdown，點(diǎn)擊右邊的安裝即可：

某些插件安裝之后，需要重啟 webstorm 之后才可以使用。

3.2、SVN、github 配置

webstorm 非常友好的支持這些版本控制服務(wù)，如常用的 SVN 和 github。windows 下需要事先安裝 SVN 客戶端（下載地址見參考鏈接），Git 的話安裝 github 官網(wǎng)的可視客戶端（下載鏈接見參考鏈接）即可。關(guān)于 SVN 和 github 的賬號(hào)設(shè)置，放在下面的項(xiàng)目配置里說。

webstorm 支持的版本控制功能有很多：

除了常用的 SVN 和 Git 之外，它還提供了本地歷史管理，可以查看一段歷史區(qū)間的代碼修改記錄。

打開歷史記錄，里面的修改記錄非常的詳細(xì)：

這些東西是一些編輯軟件無法直接做到的，通過這些歷史記錄可以非常方便的還原到歷史記錄點(diǎn)，這對(duì)項(xiàng)目開發(fā)非常的便利。為什么要在這里著重的提到這些，那是因?yàn)檫@些東西確實(shí)是幫助到我了。

3.3、文件模板配置

文件模板即新建文件的時(shí)候可以初始化一個(gè)預(yù)先定義好的文件內(nèi)容，比如常見的 HTML、CSS、JS文件等。這些文件模板在 IDE Settings->File and Code Templates 里添加和修改，如圖：

Webstorm 預(yù)先定義了幾個(gè)文件，然后我們可以自由添加和修改：

如上圖，選擇的是 CMD JS FIle，右邊是文件內(nèi)容，紅色高亮的為文件模板的變量，webstorm 提供的文件模板變量有：

• ${PROJECT_NAME} 項(xiàng)目名稱
• ${NAME} 文件名不包括文件后綴
• ${USER} 當(dāng)前電腦登錄用戶
• ${DATE} 日期
• ${TIME} 時(shí)間
• ${YEAR} 年
• ${MONTH} 月
• ${DAY} 日
• ${HOUR} 時(shí)
• ${MINUTE} 分
• ${PRODUCT_NAME} 文件名包括文件后綴
• ${MONTH_NAME_SHORT} 英文短格式月份，如Jan、Feb 等
• ${MONTH_NAME_FULL} 英文長格式月份，如January、February 等

打開新建菜單：

選擇 CMD JS FIle（即剛剛添加的文件模板），輸入文件名（不需要輸入擴(kuò)展名）回車：

4、項(xiàng)目配置

4.1、SVN、Git 配置

SVN 使用的是命令行工具，因此在 windows 下需要額外安裝 svn 命令行軟件。

SVN windows

• 客戶端：https://mac.github.com/github windows
• 客戶端：https://windows.github.com/

在更新項(xiàng)目和提交項(xiàng)目的時(shí)候，Webstorm 會(huì)提示你輸入 SVN 的用戶名和密碼，當(dāng)然首先得把項(xiàng)目克隆下來，然后用 Webstorm 打開。

配置 Github 的時(shí)候，如上圖，填上用戶名和密碼，點(diǎn)擊測(cè)試即可。測(cè)試成功會(huì)彈出提示：

在點(diǎn)擊確定之后，會(huì)彈出輸入保存用戶名和密碼的數(shù)據(jù)進(jìn)行密碼保護(hù)的確認(rèn)：

建議點(diǎn)擊 Cancel 即可。

4.2、項(xiàng)目文件夾標(biāo)記配置

在開發(fā)的時(shí)候，常常資源等信息并不是指向根目錄，在書寫資源路徑的時(shí)候提示是不正確的，這時(shí)候就需要配置文件夾功能了。打開Project Settings > Directories 里打開：

綠色的為測(cè)試目錄，紅色的為排除目錄，藍(lán)色的為資源根目錄。

4.3、項(xiàng)目代碼檢查

打開 Project Settings > JavaScript > Code Quality Tolls > JSHint 啟用，默認(rèn)配置即可。然后在末尾添加全局變量，以通過代碼檢查：

4.4、CSS 預(yù)處理語言的預(yù)編譯、JS 實(shí)時(shí)壓縮

有了 webstorm，基本不需要 grunt、gulp 等前端開發(fā)輔助工具了，webstorm 內(nèi)置的文件監(jiān)聽，可以完成常用的功能，如 CSS 預(yù)處理語言的預(yù)編譯、JS 的實(shí)時(shí)壓縮等。

打開Project Settings > FIle Watchers，然后點(diǎn)擊下邊的加號(hào)開始新建即可：

4.5、項(xiàng)目腳本庫

項(xiàng)目在開發(fā)的時(shí)候，可以配置項(xiàng)目已經(jīng)用到的腳本庫，可以方便的在編程的時(shí)候提示，加快開發(fā)速度和代碼質(zhì)量檢測(cè)。內(nèi)置的有 HTML5、NodeJS 等，如果不存在的也可以手動(dòng)添加。在 Project Settings > JavaScript > Libraries 里打開：

這里介紹的配置雖然是前端開發(fā)中常用的，但也只是 webstorm 里配置的冰山一角，在使用過程中會(huì)收獲更多。值得說的是，在使用 webstorm 之后，再也回不去文本編輯器的時(shí)代了。文本編輯的功能有限，無法完整管理項(xiàng)目，當(dāng)然它的作用就是文本編輯器。而 webstorm 是前端開發(fā)工具，文本編輯它兼顧，但不能做到像 Sublime 那樣極致、快捷。

最新評(píng)論