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

• 編輯
• 行動指標(biāo)和行動清單
• 導(dǎo)航欄
• 狀態(tài)欄
• 工具窗口
• 上下文菜單
• 彈出菜單
• 主窗口

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

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

編輯

重點：Escape

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

行動指標(biāo)和行動清單

打開動作列表：Alt+Enter

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

導(dǎo)航欄

重點：Alt+Home

顯示/隱藏：查看 | 外觀 | 導(dǎo)航欄

頂部的導(dǎo)航欄是項目視圖的快速替代方案，您可以在其中瀏覽項目結(jié)構(gòu)、打開特定文件并跳轉(zhuǎn)到當(dāng)前文件中的特定代碼元素。

如果啟用了VCS 集成，導(dǎo)航欄中的項目會根據(jù)VCS 文件狀態(tài)顏色突出顯示。

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

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

狀態(tài)欄

顯示/隱藏：查看 | 外觀 | 狀態(tài)欄

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

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

狀態(tài)欄還顯示后臺任務(wù)的進(jìn)度。您可以單擊后臺任務(wù)以顯示后臺任務(wù)管理器。

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

工具窗口

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

工具窗口提供了補充編輯代碼的功能。例如，項目工具窗口顯示項目的結(jié)構(gòu)，運行工具窗口顯示應(yīng)用程序運行時的輸出。

默認(rèn)情況下，工具窗口停靠在主窗口的側(cè)面和底部。您可以根據(jù)需要對它們進(jìn)行排列、取消停靠、調(diào)整大小、隱藏等等，右鍵單擊工具窗口顯示選項菜單按鈕的標(biāo)題或單擊標(biāo)題以查看其排列選項。

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

上下文菜單

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

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

彈出菜單

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

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

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

主窗口

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

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

以上就是有關(guān)WebStorm用戶界面的相關(guān)介紹，更多關(guān)于WebStorm教程的內(nèi)容可進(jìn)入官網(wǎng)查看。

正值“315”消費者權(quán)益日，慧都為正版護(hù)航，聯(lián)合Jetbrains廠商推出滿減優(yōu)惠，旗下產(chǎn)品最高減1200，歡迎大家進(jìn)入活動詳情頁了解詳情。

WebStorm| 下載試用

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