Webstorm 超實用配置教程
原文來自:http://www.jianshu.com/p/4ce97b360c13
一、下載安裝包
Webstorm 2017.1.4 百度雲盤下載地址:https://pan.baidu.com/s/1kVqoPJh
二、安裝過程（包含輸入注冊碼永久使用）
雙擊下一步下一步即可，過程中有幾個步驟說明一下：
1. 配置 Webstorm 安裝項
選擇 64 位，防止桌面 Webstorm 快捷方式打不開。
配置 Webstorm 安裝項
2. 是否導入 Webstorm 配置信息
這里的意思是之前使用過 Webstorm ，並且配置過，Webstorm 配置信息可以起到優化性能的作用，因為它本身是個比較吃內存的東西，文件多了容易卡頓，可以通過在配置文件中得到優化，后面單獨介紹優化。
劇透：Webstorm 安裝完成后配置信息位置：C:\Users\Administrator\.WebStorm2017.1。
是否導入 Webstorm 配置信息
3. 激活 Webstorm
免費版的試用期是 30 天，30 天之后各種讓人不舒服，比如不能保存，每隔30分鍾自動關閉程序等等，所以在開始的時候還是激活成功使用永久版本的比較好。
要填的內容：http://idea.imsxm.com/，復制進去即可。
激活 Webstorm
4. 設置 Webstorm 工具的主題和風格
這里暫時寫保持默認設置，后面會單獨介紹如何折騰一個獨一無二的屬於個人審美的 Webstorm 工具。
設置 Webstorm 工具的主題和風格
三、使用心得
關於 Webstorm 大多數配置都在File -> Settings選項卡中進行的，也許你不得不第一個記住它的快捷鍵：Ctrl + Alt + S。
1. 設置開發工具主題/風格
File -> settings -> Editor -> colors&fonts -> scheme name.
跟人覺得Default Darcula這兩款主題還可以，如果內置主題都不喜歡，可以去主題下載地址尋找你中意的主題。
2. 換成自己熟悉編輯器的快鍵鍵：如 Eclipse 的快捷鍵 + 自定義快捷鍵組合
快捷鍵設置
3. 取消勾選安全保存時間
這兩項取消勾選，否則影響熱更新，不能及時將修改的內容反應在瀏覽器上。
取消勾選安全保存時間
4. 集成 Eslint
集成 Eslint 的前提是你的項目里使用了 Eslint。
集成 Eslint
5. 集成 Git
對 Webstorm 集成 Git 的前提是你已經掌握 Git 的基礎使用方法，如果對於 Git 的基本概念不了解的話，可以參閱：廖雪峰 Git 教程。
集成 Git
Webstorm 集成 Git 帶來的遍歷就是將 Git 的指令用選項的意思表達出來，如果你熟悉 Git 是如何提交代碼的，那么在 Webstorm 使用 Git 提交代碼應該不是什么難事。
git 提交代碼
對於分支的操作在 Webstorm 右下角
操作分支
6. 常用開發工具窗口
開發過程中，最常用的工具窗口有以下幾個：
Project 記錄項目的層級結構；（快捷鍵 Alt + 1）
Structure 記錄當前文件內部的層級結構，方便快速定位到某個方法；（快捷鍵 Alt + 7）
Npm 使用 npm 構建的工程，Npm 窗口會記錄 package.json 里的腳本信息，一般用於快速啟動項目；快捷鍵 （Ctrl + E）
TODO 項目中難免會預留 TODO 標記用於日后完善，該窗口可以快速定位到哪個文件的哪一行預留了 TODO 標記。（快捷鍵 Alt + 6）
常用開發工具窗口
7. 配置 Less 自動轉譯 CSS
在進行配置之前，請確保你已經使用 npm/yarn 或其它工具全局安裝了 less 包。
$ npm install less -g
配置 Less 自動轉譯 CSS
8. Webstorm 安裝 Editorconfig 插件
如果你的項目中要使用 .editorconfig 配置文件控制代碼風格，那么 Editorconfig 插件必不可少。Webstorm 2017.1 及之后的版本都默認安裝了這個插件，如果沒有安裝，參照下圖自行安裝。
安裝 Editorconfig 插件
9. 文件類型設置 —— File Types
在使用微信開發工具開發小程序時，經常遇到這么個問題：小程序開發工具不支持多例模式，一次性只能打開一個項目，可是同時又想打開其他項目參考里面的代碼，總不至於用文本編輯器打開吧。我的選擇是使用 Webstorm 打開小程序的項目，可是隨之而來的一個問題就是小程序的 .wxml 和 .wxss 文件類型 Webstorm 無法識別，代碼都是一片黑色，沒有背景高亮看着很是不舒服。
使用 File Types 可以將 .wxml 和 .wxss 文件類型添加到 Webstorm 中。
File Types 設置
在 Cascading Style Sheet 下添加 *.wxss 類型，使用 css 語法高亮；
在 HTML 下添加 *.wxml 類型，使用 html 語法高亮。
注意：前面的 * 號不能忘記。
10. Webstorm 2017.2 版本使用搜狗輸入法卡頓問題
卡頓卡的人心煩，查了一些資料都沒起作用，就差重裝 Webstorm 了，后來在搜狗貼吧上看到一方法試了試是有用的。
安裝搜狗輸入法最新版本，然后重啟 Webstorm（剛裝好沒重啟，使用輸入法還是卡，以為沒啥用，后來重啟之后發現一點都不卡了）。
11. 快捷鍵 —— 最常用的快捷鍵最佳應在 10 個以內
Ctrl + Shift + R—— 快速定位到文件並跳轉
Ctrl + Shift + F—— 全局搜索文件內某個字符串 （Webstorm 默認快捷鍵，eclipse 中是Ctrl + H）
Ctrl + E—— 打開最近操作過的文件
Ctrl + Alt + L—— 格式化代碼（與 QQ 快捷鍵沖突，自定修改 QQ 快捷鍵）
Ctrl + Y—— 刪除光標所在行
Ctrl + Alt + S—— 打開設置窗口
四、優化 Webstorm
使用 webstorm 有時打開項目時很慢很慢，有時操作時卡頓，這些不好的體驗都可以通過簡單的設置規避掉。
1. 調整 webstorm 內存
webstorm 安裝目錄 > bin > WebStorm.exe.vmoptions。文本編輯器打開，修改第二行和第三行內容。
第二行：-Xms526m
第三行：-Xmx1024m
樓主電腦是 8 g 內存，這樣分配明顯好很多，測試發現 -Xms 最大值不能超過1024，否則webstorm將無法打開。
2. 把不必要索引的文件進行排除
webstorm 如果同時引入很多個項目也會導致卡頓，我們可以將不需要的項目隱藏起來，和 Eclipse 中 close project 功能一樣。
選擇項目 > 右鍵 > Mark Directory As > Excluded。操作完成后會發現項目“消失了”。
不過還是建議 webstorm 只打開一個項目。
3. 關閉 node_modules 校驗
在 node 項目中存在 node_modules 目錄，每次打開 webstrom 時會校驗文件，同樣也會校驗 node_modules 中的內容，這會浪費很多時間。
4. 取消勾選不常用的插件
webstorm 中可以集成很多插件，這些插件也會影響運行速度，有的插件你可能壓根都沒聽過，更不會使用，可以取消勾選。
