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

1、配置分類

Webstorm 的配置分為項目配置和全局配置，在打開一個項目的時候，會在項目根目錄生成 .idea 的隱藏文件夾，這個文件夾里保存的就是項目配置，而全局配置保存在文檔目錄，全局配置都可以導出。

2、配置查找

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

這樣查找的配置，然后再點開其中需要的，進去配置即可。

3、全局配置

3.1、插件配置

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

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

在打開之后搜索 markdown，點擊右邊的安裝即可：

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

3.2、SVN、github 配置

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

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

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

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

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

3.3、文件模板配置

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

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

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

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

打開新建菜單：

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

4、項目配置

4.1、SVN、Git 配置

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

SVN windows

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

在更新項目和提交項目的時候，Webstorm 會提示你輸入 SVN 的用戶名和密碼，當然首先得把項目克隆下來，然后用 Webstorm 打開。

配置 Github 的時候，如上圖，填上用戶名和密碼，點擊測試即可。測試成功會彈出提示：

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

建議點擊 Cancel 即可。

4.2、項目文件夾標記配置

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

綠色的為測試目錄，紅色的為排除目錄，藍色的為資源根目錄。

4.3、項目代碼檢查

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

4.4、CSS 預處理語言的預編譯、JS 實時壓縮

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

打開Project Settings > FIle Watchers，然后點擊下邊的加號開始新建即可：

4.5、項目腳本庫

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

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

最新評論