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

本文給大家講解WebStorm的界面展示，歡迎下載最新版產(chǎn)品體驗(yàn)！

WebStorm v2022.2正式版下載

1、用戶界面

當(dāng)您在 WebStorm 中打開一個(gè)項(xiàng)目時(shí)，默認(rèn)的用戶界面如下所示：

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

2、編輯

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

3、操作指示

快捷鍵：Alt+Enter

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

4、導(dǎo)航欄

快捷鍵：Alt+Home

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

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

5、狀態(tài)欄

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

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

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

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

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

6、工具窗口

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

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

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

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

7、上下文菜單

您可以右鍵單擊界面的各種元素以查看當(dāng)前上下文中可用的操作。例如，在項(xiàng)目工具窗口中右鍵單擊一個(gè)文件以執(zhí)行與該文件相關(guān)的操作，或在編輯器中右鍵單擊以查看應(yīng)用于當(dāng)前代碼片段的操作。

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

8、彈出菜單

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

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

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

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

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

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

9、主窗口

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

要顯示項(xiàng)目和當(dāng)前文件的完整路徑，請?jiān)贏ppearance & Behavior |上選擇Always show full paths in window header IDE設(shè)置的外觀Ctrl+Alt+S頁面。

慧都2022年終狂歡火熱進(jìn)行中，知名軟控件產(chǎn)品享超低折扣，滿額豪禮贈(zèng)，復(fù)購雙重大禮！了歡迎咨詢，了解更多活動(dòng)詳情。

Jetbrains技術(shù)交流群（QQ）：786598704 歡迎進(jìn)群交流討論

慧都年終狂歡季，全場產(chǎn)品，限時(shí)特惠，立即了解！