WebStorm是jetbrains旗下一款JavaScript 開發工具，被廣大JS開發者譽為"Web前端開發神器""最強大的HTML5編輯器""最智能的JavaSscript IDE"。

本文給大家講解WebStorm的界面展示，歡迎下載最新版產品體驗！

WebStorm v2022.2正式版下載

1、用戶界面

當您在 WebStorm 中打開一個項目時，默認的用戶界面如下所示：

根據插件集和配置設置，您的 IDE 的外觀和行為可能會有所不同。

2、編輯

使用 編輯器閱讀、編寫和探索您的源代碼。

3、操作指示

快捷鍵：Alt+Enter

裝訂線中出現的各種圖標（例如 ）黃色燈泡圖標可幫助您注意到快速修復和其他操作。單擊此類操作指示器或按Alt+Enter打開一個操作列表，其中包含當前插入符號位置可用的所有快速修復和其他操作。

4、導航欄

快捷鍵：Alt+Home

顯示/隱藏：查看/外觀/導航欄

頂部的導航欄是項目視圖的快速替代品，您可以在其中瀏覽項目結構、打開特定文件并跳轉到當前文件中的特定代碼元素。

5、狀態欄

顯示/隱藏：查看/外觀/狀態欄

當您將鼠標指針懸停在主窗口底部狀態欄的左側時，會顯示最近的事件消息和操作說明。單擊狀態欄中的消息以在“通知”工具窗口中將其打開。當您搜索問題的解決方案或需要將其添加到支持票或 WebStorm 問題跟蹤器時，右鍵單擊狀態欄中的消息并選擇復制以粘貼消息文本。

使用快速訪問按鈕顯示工具窗口或在工具窗口隱藏工具窗口之間切換并隱藏工具窗口欄。

狀態欄還顯示后臺任務的進度。您可以單擊后臺任務以顯示后臺任務管理器。

狀態欄的右側部分包含指示整個項目和 IDE 狀態并提供對各種設置的訪問的小部件。根據插件集和配置設置，小部件集可以更改。右鍵單擊狀態欄以選擇要顯示或隱藏的小部件。

6、工具窗口

顯示/隱藏：查看/工具窗口

工具窗口提供補充編輯代碼的功能。例如，項目工具窗口顯示項目結構，運行工具窗口顯示應用程序運行時的輸出。

默認情況下，工具窗口停靠在主窗口的兩側和底部。您可以根據需要對它們進行排列、取消停靠、調整大小、隱藏等等。右鍵單擊工具窗口顯示選項菜單按鈕的標題或單擊其排列選項的標題。

您可以分配快捷方式以快速訪問您經常使用的工具窗口。默認情況下，其中一些具有快捷方式。例如，要打開項目工具窗口，請按Alt+1，要打開終端工具窗口，請按Alt+F12。要從編輯器跳轉到上一個活動工具窗口，請按F12。

7、上下文菜單

您可以右鍵單擊界面的各種元素以查看當前上下文中可用的操作。例如，在項目工具窗口中右鍵單擊一個文件以執行與該文件相關的操作，或在編輯器中右鍵單擊以查看應用于當前代碼片段的操作。

大多數這些操作也可以從屏幕頂部或主窗口的主菜單中執行。帶有快捷方式的操作會在操作名稱旁邊顯示快捷方式。

8、彈出菜單

彈出菜單提供對與當前上下文相關的操作的快速訪問。以下是一些有用的彈出菜單及其快捷方式：

Alt+Insert打開用于根據上下文生成樣板代碼的生成彈出窗口。

Ctrl+Alt+Shift+T打開帶有上下文可用重構列表的Refactor This彈出窗口。

Alt+Insert在項目工具窗口中打開新建彈出窗口，用于將新文件和目錄添加到項目中。

Alt+`打開VCS Operations彈出窗口，其中包含適用于您的版本控制系統的上下文可用操作。

您可以使用您經常使用的快速操作列表創建自定義彈出菜單。

9、主窗口

主窗口允許您處理單個 WebStorm 項目。您可以在多個窗口中打開多個項目。默認情況下，窗口標題顯示項目名稱和當前打開文件的名稱。如果有多個模塊，它還會顯示相關模塊的名稱。

要顯示項目和當前文件的完整路徑，請在Appearance & Behavior |上選擇Always show full paths in window header IDE設置的外觀Ctrl+Alt+S頁面。

慧都2022年終狂歡火熱進行中，知名軟控件產品享超低折扣，滿額豪禮贈，復購雙重大禮！了歡迎咨詢，了解更多活動詳情。

Jetbrains技術交流群（QQ）：786598704 歡迎進群交流討論

慧都年終狂歡季，全場產品，限時特惠，立即了解！