WebStorm中的各種配置的介紹（圖）

這篇文章帶給大家的內容是關於WebStorm中的各種設定方法（圖），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

一、主題配色

主題設定

方法：File -> Settings -> Appearance & Behavior -> Appearance ->Theme.

webstorm-setting-02.jpg

#配色設定

方法：File -> Settings -> Editor -> Colors & Fonts->Scheme.（註：如果你是從Sublime text3轉過來的朋友，比較偏好monokia配色的，可以參考此文 webstorm入門1-主題和配色）

webstorm-setting-04.jpg

#二、開啟多個項目

WebStorm預設情況下一次只能開啟一個項目，這點很不爽，其實是可以設定的。 （註：如果你一開始就建了專案再來配置，記得要把左邊顯示的根路徑移除，不然可能點選Add Content Root配置後也不一定能生效）

方法：File -> Settings -> Directories -> Add Content Root 中新增你目前的工程目錄。

webstorm-setting-01.jpg

三、設定webserver選項（連接埠）

方便其他ip裝置訪問(如手機等測試效果）
方法：File -> Settings -> Build,Execution,Development -> Debugger ->port

webstorm-setting-05.jpg

四、設定檔的預設編碼

#方法：File -> Settings -> Editor -> File Encodings -> IDE Encoding,Project Encoding.

(註：配置前後都可以開啟頁面，在頁面的右下角顯示有編碼，下面截圖右下角就有)

#webstorm-setting-06.jpg

五、快捷鍵配置

你可以使用預設快捷鍵配置，也可以依照自己的風格選擇配置。習慣eclipse和myeclipse開發的可以設定成eclipse快捷鍵。

方法：File -> Settings -> Keymap-> Keymaps

webstorm-setting-07.jpg

六、emmet配置，語法等等

上面提到了快速鍵，webstorm自備emmet外掛。用過zen coding的人應該都知道，emmet就是zen coding的升級版。當然，webstorm也不是支援所有的emmet語法，不過夠用了。可以參考此文Enabling Emmet Support看看具體情況。
如下圖，可以看到css自動加瀏覽器廠商前綴​​。

webstorm-setting-08.png

七、行號，換行，參考線

開啟頁面後，右鍵點選頁面左邊邊界，彈跳視窗選項，依照自己需求勾選就是，如下圖：

#webstorm-setting-09.png

#八、匯入匯出設定

當你需要在其他電腦的webstorm上也想用自己編碼風格時，將設定檔匯入重啟webstorm即可生效。
匯出方法：File -> Export Settings... ->自己選擇選項和路徑。用預設也可以。
導入方法：File -> Import Settings... ->選擇.jar檔案路徑。

九、外掛設定

webstorm自備很多插件，你可以依照自己需求設定。我暫時未使用，如果你用到了，可以參考下面的一些文章。

1. SVN、Git外掛程式配置，CSS預處理語言的預編譯、JS 即時壓縮等等可以參考此文webstorm入門2-配置

2. 使用css預編譯器（sass,less）的朋友,可以省掉gulp、grunt類前端輔助工具,參考此文webstorm入門5-sass、scss、less監聽編譯

以上是WebStorm中的各種配置的介紹（圖）的詳細內容。更多資訊請關注PHP中文網其他相關文章！