本文主要介紹WebStorm用戶界面：

• 編輯
• 行動指標和行動清單
• 導航欄
• 狀態欄
• 工具窗口
• 上下文菜單
• 彈出菜單
• 主窗口

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

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

編輯

重點：Escape

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

行動指標和行動清單

打開動作列表：Alt+Enter

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

導航欄

重點：Alt+Home

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

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

如果啟用了VCS 集成，導航欄中的項目會根據VCS 文件狀態顏色突出顯示。

使用導航欄右側的按鈕來運行和調試您的應用程序，并執行基本的版本控制操作（如果配置了版本控制集成）。它還包含運行任何東西 運行任何東西按鈕（按Ctrl兩次）和到處搜索 到處搜索按鈕（按Shift兩次）的按鈕。

默認情況下，帶有用于打開和保存文件、撤消和重做操作的按鈕的主工具欄是隱藏的。要顯示它，請選擇查看 | 外觀 | 工具欄。

狀態欄

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

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

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

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

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

工具窗口

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

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

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

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

上下文菜單

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

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

彈出菜單

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

• Alt+Insert：打開Generate彈出窗口以根據上下文生成樣板代碼。
• Ctrl+Alt+Shift+T：打開Refactor This彈出窗口，其中包含上下文可用的重構列表。
• Alt+Insert：在項目工具窗口中打開新建彈出窗口，用于將新文件和目錄添加到項目中。
• Alt+`打開VCS 操作彈出窗口，其中包含適用于您的版本控制系統的上下文可用操作。

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

主窗口

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

要顯示項目和當前文件的完整路徑，請在外觀和行為 |上選擇始終在窗口標題中顯示完整路徑，IDE設置的外觀Ctrl+Alt+S頁面。

以上就是有關WebStorm用戶界面的相關介紹，更多關于WebStorm教程的內容可進入官網查看。

正值“315”消費者權益日，慧都為正版護航，聯合Jetbrains廠商推出滿減優惠，旗下產品最高減1200，歡迎大家進入活動詳情頁了解詳情。

WebStorm| 下載試用

WebStorm是一個針對JavaScript和相關技術的集成開發環境。像其他JetBrains  IDE一樣，它使你的開發體驗更加愉快，使日常工作自動化，并幫助你輕松處理復雜的任務。