WebStorm的使用方法集合（圖文）

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

1. 圖片寬高提示。

平常你在寫 HTML 時，遇到 img 標籤時，是不是要費好大勁去知道圖片的寬高？ WS 直接展示給你了。

2. 標籤重構、檔案重新命名、 CSS 重構以及JS 重構

2.1 標籤重構

如果你想把

<p>此处省略200行</p>

改為

<p>此处省略200行</p>

該怎麼辦？在 WS 裡，你只需將遊標移到

或

，讓後按重構的快捷鍵就可以輕鬆地把它變為 p 標籤。

2.2 檔案重新命名

你想把 style1.css 重新命名為 style2.css，但是 style1.css 被很多 html 檔案引用了，怎麼辦？
使用 WS 的檔案重新命名功能，大膽地重新命名吧，它會自動幫你更新所有參考。 （前提是你的引用是正確且符合常規的）

2.3 CSS 重構

另外，如果你想把內聯的style 移到外部CSS 檔案裡，也是可是透過重構功能實現的。雖然在生產環境下你不會在 HTML 裡寫內嵌 style 的，但我們調試時為了方便，會常常這麼做。等你調試完了，自然會用到這個功能。

（WS 8.0 以更新此功能，詳見評論）
JS 重構也很好用。包括變數重命名、宣告提升等等等等。 WS 是我用過的對 JS 重構支援最好的 IDE。你可以告訴我還有什麼 IDE 對 JS 重構支援不錯，我去比較下。

3. 對業界最新技術的支援

你安裝WS 後，你會發現它內建了SASS、NodeJS、CoffeeScript、 Jade 的支持。
連 Emmet 都內建了，而且快捷鍵還是 Tab，太方便了。沒有這個功能我都不想寫 HTML 了。
如果它發現你的檔案後綴是 .less/.scss/.sass 或 .coffee，就會問你，你是否需要把它們自動編譯成 css 或 js。
如果它發現你有 NPM，會自動列出你安裝過的 package，方便管理和升級。 （這個似乎需要裝NodeJS 支援插件，我記不清是不是自帶功能了。）

#4. 可自訂程式碼格式化規則

#雖然很多IDE 都有格式化功能，但能自訂到WS 這種程度的還沒看過。

是否保留單行的 { }。

是否保留單行的function。

屬性是否要對其。

冒號前後是否加空格。

……

#5. 設定項目是可搜尋的（英文）

「這個IDE 有這麼多設定項，我要折騰好久啊！」

WS 考慮到了這一點，所以他的所有設定都是可搜尋的，不會讓你漫無目的地摸索，想設定什麼就搜什麼。

想設定外觀，就搜尋 appearance；

想設定快捷鍵，就搜尋 keymap;

想設定外掛程式就搜尋 plugin。 當你進入 keymap，你還可以進行二級搜索，例如你想知道 format 功能的快捷鍵，就直接搜 format。

你甚至可以反過來，搜尋 Ctrl L 這個快捷鍵對應的功能是什麼。 ###P.S. WS 的快速鍵是支援二次按鍵的。例如我把 Git add 的快速鍵設定為 Alt G & Alt A，把 Git commit 設定為 Alt G & Alt C。這樣的好處是不會讓你無快捷鍵可設。 #########6. 再說說其他 IDE 也有的功能吧#########6.1. 本機版本控制。你在 WS 裡所有的編輯都被存在本地了，你隨時可以還原到歷史版本。 ###############不過要注意這些歷史有可能被清除。 ######6.2. 能與番茄工作法結合。有個插件叫      Pomodoro-tm，應該有不少程式設計師喜歡。 ######6.3. 能與 Redmine / Trello / Jira 等整合。 ############

6.4 檔案結構分析。直接看圖。

JS 檔案結構

HTML 檔案結構

這個功能對於大文件特別有用。好功能太多，有機會以後再介紹了。

以上是WebStorm的使用方法集合（圖文）的詳細內容。更多資訊請關注PHP中文網其他相關文章！