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