Webstorm 超實用教程

更新日誌

    2017年10月18日（四）
    Webstorm 啓動緩慢，操作卡頓優化。
    2017年10月22日（三.7）
    Webstorm 配置 Less 自動轉譯 CSS。
    2017年11月2日
    Webstorm 配置 File Types，使微信小程序代碼高亮顯示。（三.9）
    2017年11月29日
    Webstorm 2017.2 版本使用搜狗輸入法卡頓解決方案。（三.10）
    2017年12月11日
    Webstorm 彈出 Npm 對話框。（三.11）

一、下載安裝包

Webstorm 2017.1.4 【非漢化版】百度雲盤下載地址

Webstorm 2017.2 【漢化版】百度雲盤下載地址，密碼：8oya
二、安裝過程（包含輸入註冊碼永久使用）

雙擊下一步下一步即可，過程中有幾個步驟說明一下：

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

有朋友反映使用該網站激活失敗，我又去找了另一種激活方式，實測在 Webstorm 2017.2 版本上是激活成功的。Webstorm2017.2 版本激活文件，密碼：fls5

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）
常用開發工具窗口![](https://s1.51cto.com/images/blog/201805/05/1060a8fd0eca9b13f2cd152ede07cffd.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

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 語法高亮。![](https://s1.51cto.com/images/blog/201805/05/eb98cbbdf9830cd34c221028f155358f.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

注意：前面的 * 號不能忘記。

10. Webstorm 2017.2 版本使用搜狗輸入法卡頓問題

卡頓卡的人心煩，查了一些資料都沒起作用，就差重裝 Webstorm 了，後來在搜狗貼吧上看到一方法試了試是有用的。

安裝搜狗輸入法最新版本，然後重啓 Webstorm（剛裝好沒重啓，使用輸入法還是卡，以爲沒啥用，後來重啓之後發現一點都不卡了）。

11. Webstorm 彈出 Npm 對話框

實際開發中，在終端會經常敲入 npm run dev 等指令，Webstorm 集成了這一功能，帶來了很大的便利。但在打開 Webstorm 有些人卻找不到該對話框。
Npm 對話框

首先確保你的項目含有 package.json 文件，並且文件內含有 script 腳本指令。右鍵 package.json 文件，可以看到如下畫面，點擊 Show npm Scripts 即可。還有一個方法，快捷鍵 Ctrl + E 也可以看到該選項，只不過該方法有時候會掉鏈子。
如何彈出 Npm 對話框

12. 快捷鍵 —— 最常用的快捷鍵最佳應在 10 個以內

    Ctrl + Shift + R —— 快速定位到文件並跳轉

    Ctrl + Shift + F —— 全局搜索文件內某個字符串 （Webstorm 默認快捷鍵，eclipse 中是 Ctrl + H）

    Ctrl + Shift + U —— 大小寫切換

    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 中的內容，這會浪費很多時間。
關閉 node_modules 校驗

4. 取消勾選不常用的插件

webstorm 中可以集成很多插件，這些插件也會影響運行速度，有的插件你可能壓根都沒聽過，更不會使用，可以取消勾選。
取消勾選不常用的插件

作者：dkvirus
鏈接：https://www.jianshu.com/p/4ce97b360c13
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。