Webstorm 超實用配置教程
原文來自:http://www.jianshu.com/p/4ce97b360c13php
1、下載安裝包css
Webstorm 2017.1.4 百度雲盤下載地址:https://pan.baidu.com/s/1kVqoPJhhtml
2、安裝過程（包含輸入註冊碼永久使用）node
雙擊下一步下一步便可，過程當中有幾個步驟說明一下：git
1. 配置 Webstorm 安裝項web
選擇 64 位，防止桌面 Webstorm 快捷方式打不開。npm
配置 Webstorm 安裝項json
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 工具的主題和風格
3、使用心得
關於 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—— 打開設置窗口
4、優化 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 中能夠集成不少插件，這些插件也會影響運行速度，有的插件你可能壓根都沒聽過，更不會使用，能夠取消勾選。