2021年度最后一次重大更新 WebStorm 2021.3 來了！此更新充滿了期待已久的增強功能，包括對遠程開發的支持、改進的 HTML 完成、重新設計的 Deno 集成等。

下載WebStorm 2021.3

新功能和改進分為以下幾類：

• JavaScript 和 TypeScript：改進了 monorepos 的使用、更快的 JavaScript 文件索引時間、下載遠程 ES6 模塊的快速修復、支持 ES2022 私有類成員等。
• 框架和技術：更輕松地管理項目依賴項、重新設計的 Deno 插件、對 Angular 13 的支持、更好的 HTML 完成等等。
• 遠程開發：用于遠程開發的 JetBrains 網關、Node.js 遠程解釋器更新以及對 SSH 連接的代理支持。
• Docker：改進的連接過程、新的清理操作、Minikube 集成、對 Compose V2 的支持等。
• 用戶體驗：能夠拆分運行工具窗口、新的書簽工具窗口、基于 ML 的Search Everywhere操作搜索等。
• 版本控制：重新組織了 VCS 設置、改進了推送提交的工作流程、新的更改工具窗口等。

JavaScript 和打字稿

改進了對 monorepos 的支持

此版本對使用 monorepos 進行了許多改進。最顯著的變化是自動添加的導入現在尊重項目結構，將項目中的每個文件夾與package.json視為一個單獨的包。

更快地索引 JavaScript 文件

我們了解 WebStorm 的性能有時可能不是最佳的，因此我們一直在努力改進它。通常，與性能相關的變化是微妙的，除非您使用計時器或 CPU 分析器，否則您可能不會注意到它們。在此版本中，我們設法取得了更顯著的結果，將 JavaScript 文件的索引時間減少了 20%。

我們希望這項改進能幫助您在打開新項目或進行大規模 Git 更新時更快地工作。請注意，如果您的項目主要由 TypeScript 或其他類型的文件組成，則更改將不太明顯。

支持導入語句中的 URL

從 v2021.3 開始，您可以使用 ES6 文件中導入路徑上的快速修復下載遠程 ES6 模塊。模塊及其所有依賴項將被下載并鏈接為項目庫。該功能的工作方式應與在瀏覽器中的工作方式相同。要試一試，請將插入符號放在導入路徑上，然后按?? / Alt+Enter并選擇Download module。

對 ES2022 私有類成員的重構支持

早在 2018 年，WebStorm 就添加了對私有字段的支持。 然而，由于這種支持是基于 TC39 的舊提案，它已經偏離了標準。為了符合標準，我們從頭開始重新設計了現有的支持——WebStorm 2021.3 將支持 ES2022 私有類成員。當您為字段、訪問器或方法使用私有名稱（以#開頭的元素）時，一切都應該按預期工作。例如，以下是重命名重構在 v2021.3 中的工作方式。

組織代碼的新意圖

在 WebStorm 2021.3 中組織代碼有兩個新意圖。

您現在可以快速地將逗號分隔的元素放在一行或多行上。新意圖適用于數組和對象文字、參數和參數列表、XML、HTML 和 JSX 屬性以及其他類似元素。

要嘗試這種意圖，請將插入符號放在要更改的元素上，然后按?? / Alt+Enter并根據需要選擇將逗號分隔的元素放在一行上或將逗號分隔的元素放在多行上。對于 XML、HTML 和 JSX，您會看到此操作的措辭略有不同 –將屬性放在單獨的行上或將屬性放在一行上。

添加的第二個意圖與 JSDoc 注釋有關。WebStorm 現在可以幫助您一鍵用 JSDoc 注釋替換單行和多行注釋。像往常一樣，您可以使用?? / Alt+Enter訪問可用的上下文操作。

.js 和 .d.ts 文件之間更好的映射

此版本的另一項改進涉及.js和.d.ts文件。我們改進了它們之間的映射并添加了裝訂線圖標以實現更好的導航。

框架和技術

更新依賴項的新檢查

多年來，我們添加了一些功能來幫助您從package.json文件中添加和更新包，以及幫助您獲取有關這些包的相關信息。在此版本中，我們進行了一些更改，以便更輕松地管理項目依賴項。

您現在可以直接從編輯器將 npm 包更新到最新版本。打開package.json文件，將插入符號放在要更新的包版本上，然后按?? / Alt+Enter并選擇Update 'package name' to the latest version。當您將鼠標懸停在軟件包版本上時，還會顯示快速修復。

默認情況下，新檢查僅提供快速修復，不會以任何方式突出顯示過時的包。如果您希望警告更加突出，您可以在Preferences / Settings | 中更改檢查嚴重性級別。編輯| 檢查- 在那里查找更新 package.json 依賴項。

以前，WebStorm 允許您通過Preferences / Settings | 中的相應部分來管理您的包。語言和框架 | Node.js 和 NPM。由于只有少數用戶以這種方式管理他們的包，我們決定刪除此部分并引入一種更直接的方式來處理任務——上述新檢查。

最后，我們將Preferences / Settings 中的Node.js 和 NPM部分重命名為Node.js以避免任何混淆。和以前一樣，您可以使用它來選擇 Node 解釋器和您選擇的包管理器：npm、pnpm 或 Yarn。

重新設計的 Deno 集成

去年，我們在 WebStorm 中引入了對 Deno 的支持。它依賴于 WebStorm 與 TypeScript 服務的集成以及typescript-deno 插件。這種實現有幾個缺點，最近它的工作不可靠。因此，我們已經完全重新設計并遷移到 Deno LSP。

Angular 13 支持

我們在此版本中解決的最緊迫的問題之一是對 Angular 13 的支持。由于 Angular 包格式的更改，它被破壞了。WebStorm 2021.3 考慮了這些變化并支持新版本的 Angular。

改進的 HTML 完成

我們改進了代碼完成在 HTML 中的工作方式。現在，只要您在編輯器中鍵入標簽名稱或縮寫，或調用代碼完成，WebStorm 都會立即向您顯示相關建議。以前，如果您先輸入<，它只會顯示它們。我們意識到這對于不習慣輸入<和> 的人和不熟悉 Emmet 的人來說不是很舒服。

此外，字符實體引用的代碼完成現在應該可以更好地工作。

Vue 和 React 屬性的類型檢查

在 2021.2 和 2021.3 版本之間，我們發布了一系列期待已久的 Vue 修復，包括對腳本設置的支持。在此版本中，我們添加了另一項有用的改進——WebStorm 2021.3 支持在 Vue 模板中進行 TypeScript 類型檢查。當綁定到屬性的表達式中使用了不正確的類型時，IDE 會通知您。

這也適用于 React 屬性。

HTTP 客戶端的新功能

在此版本中，我們顯著改進了 WebStorm 的內置 HTTP 客戶端。我們添加了許多新功能，包括對二進制響應的支持、到自定義文件或目錄的輸出重定向、對文本和 JSON 流的支持以及對 HTTP 請求標識符的支持。

遠程開發

遠程運行 WebStorm

作為此版本最大和期待最久的更新之一 - WebStorm 現在支持遠程開發工作流！您可以連接到運行著 IDE 后端的遠程機器，并像在本地機器上一樣處理位于那里的項目。我們希望這可以幫助您保持更高的工作效率和靈活性，同時讓您可以在任何地方安全地工作。

通過我們的新應用程序 JetBrains Gateway 提供對遠程開發工作流的支持。它充當所有遠程后端的入口點，不需要您在本地計算機上安裝 IDE。您可以從我們的網站獲取最新版本的 JetBrains Gateway 。執行此操作后，您將看到以下內容：

使用遠程 Node.js 進行開發

對于此版本，我們進行了一些重大改進，以支持將 Node.js 安裝在 Docker 中，然后由 WebStorm 與 JavaScript 工具的集成使用的工作流。現在，您的 IDE 將允許您將 Node.js 遠程解釋器與 ESLint、Mocha、Jest、npm、pnpm 和 yarn 結合使用。

Node.js 對 ESLint 的遠程解釋器支持從 v2021.2 開始作為一項實驗性功能可用。從現在開始，它將默認處于活動狀態。

要試用新功能，請先添加一個遠程 Node.js 解釋器。這可以通過轉到首選項/設置 |來完成。語言和框架 | Node.js，打開Node interpreter字段下的下拉列表，然后單擊Add。然后選擇Add Remote...并在出現的對話框中指定現有 Docker 映像之一。

然后返回到您的首選項/設置并確保包管理器字段具有到 Docker 映像中包管理器的安裝文件夾的正確路徑。

然后您可以返回編輯器并使用 Node.js 和 Docker 中的包管理器在您的項目中安裝依賴項。此時，您應該可以像在本地使用 Node.js 一樣開始正常工作。例如，如果您想使用 ESLint lint 一個 JavaScript 文件，請在編輯器中打開該文件。錯誤應自動突出顯示。

我們還將 Node.js 遠程解釋器支持擴展到 Mocha、Jest、npm、pnpm 和 yarn 腳本。您可以在下面找到每種受支持技術的說明：

• ESLint
• 摩卡和笑話
• npm、pnpm 和紗線

SSH 連接的代理支持

您現在可以在Preferences / Settings | 中為您的SSH 配置指定 HTTP 或 SOCKS 代理服務器。工具 | SSH 配置。

在新的HTTP/SOCKS 代理部分下，您可以選擇代理類型、輸入主機名和端口，并在必要時使用登錄名和密碼應用身份驗證。

還可以將您的 SSH 代理設置與全局 IDE 設置同步。為此，請選中使用全局 IDE 代理設置復選框。

碼頭工人

更簡單的連接過程

連接到 Docker 變得更快了！您只需雙擊所需的節點或使用新的快捷方式：macOS 上的??或Windows 和 Linux 上的Ctrl+Enter。在啟動容器的動作也可以用這個快捷鍵調用。

新的清理行動

新的清理操作就像prune終端命令一樣工作。當您右鍵單擊Networks、Volumes、Containers或Images節點時，您可以選擇Clean up，IDE 將刪除未使用的對象。您也可以將此操作應用于 Docker 根節點，以一鍵修剪所有不需要的對象。

從 Minikube 連接到 Docker

現在可以輕松地從 Minikube 連接到 Docker 守護程序。轉到首選項/設置 | 構建、執行、部署并選擇Minikube單選按鈕。在旁邊的字段中，IDE 將自動顯示您可以連接到的檢測到的 Minikube 的 docker-daemon 環境。

支持 Compose V2

WebStorm 支持Compose V2，它允許您將 Docker Compose 命令作為docker compose 運行，而不是docker-compose（帶破折號）。

要激活此選項，請轉至首選項/設置 | 構建、執行、部署 | 碼頭工人 | 工具并勾選使用 Compose V2復選框。

圖像層

圖像層允許您跟蹤應用于圖像的所有命令。要訪問它們，請選擇一個圖像并轉到“圖層”選項卡。從那里，當您選擇一個命令時，您可以單擊屏幕右側的“分析圖像以獲取更多信息”鏈接，以獲取有關應用于每個圖層的更改的更多詳細信息。

將容器另存為圖像

如果您有想要稍后使用的預配置容器，可以將其另存為映像。轉到服務工具窗口，右鍵單擊容器，然后選擇圖像 | 另存為新圖像。

Podman 支持

WebStorm 現在支持Podman作為管理 Pod、容器和圖像的替代方法。在IDE中使用Podman之前，請先配置一個連接。

在您的操作系統上安裝和配置 Podman 后，您可以通過Preferences / Settings |連接到它。構建、執行、部署 | Docker通過選擇TCP 套接字單選按鈕并填寫必填字段。

用戶體驗

能夠拆分運行工具窗口

有多個配置正在運行并希望同時查看它們的結果？您現在可以拆分運行工具窗口！為此，請將所需的選項卡拖動到突出顯示的區域并將其放在那里。要取消拆分工具窗口，您可以向后拖動選項卡或右鍵單擊頂部窗格并從上下文菜單中選擇取消拆分。

新書簽工具窗口

在 WebStorm 中，我們有兩個非常相似的實例——收藏夾和書簽。差異有時會令人困惑，因此我們決定只使用一個 - Bookmarks。我們重新設計了此功能的工作流程，并為其創建了一個新的工具窗口。

 從現在開始，您在 macOS 上使用F3快捷方式或在 Windows/Linux 上使用F11標記為重要的任何文件、文件夾和類都將位于新的書簽工具窗口下。

添加書簽時，WebStorm 會將其放在以您的項目命名的節點中。默認情況下，IDE 會自動創建此節點并在其中存儲所有優先級項目。任何新書簽都將出現在此節點內的列表頂部。但是，您可以通過將它們拖到新列表（您可以隨意命名）來手動組織它們。

Show Usages 的源代碼預覽

該展會用法功能已收到此版本中一個小而方便的改進。當您使用??F7 / Ctrl+Alt+F7或通過按? / Ctrl并單擊定義查看符號的用法時，您現在可以通過單擊方形圖標來打開找到的用法的源代碼預覽。

在Search Everywhere 中基于 ML 搜索操作

在搜索操作時，WebStorm 中的Search Everywhere現在默認由機器學習提供支持。我們訓練了一個基于機器學習的公式，它考慮到：

• 特定用戶的操作使用歷史記錄。
• 整個用戶群的操作使用頻率。
• 搜索查詢的長度、操作的名稱等。

我們希望您發現基于 ML 的模型可以提高您的搜索質量并返回根據您的特定需求量身定制的結果。

終端的改進

WebStorm 的終端現在支持Windows 上的新ConPTY API。使用它作為終端的后端有助于解決用戶在基于winpty的舊實現中遇到的幾個問題。此外，現在支持 24 位顏色。

此外，新添加的預先輸入支持可預測文本修改并立即以淺灰色顯示它們。無論您是在本地還是遠程機器上工作，此功能都允許您以同樣快的速度在終端中輸入。

評估來自調試器的表達式

在此版本中，我們改進了評估表達式功能的可發現性。以前，許多用戶求助于使用手表而不是評估對話框。
現在，可以直接在調試工具窗口中訪問“評估表達式”字段，從而使評估表達式的最便捷方式更加明顯。

內置故障排除工具

WebStorm 2021.3 帶來了一種新的、更快的方法來診斷和修復阻止 IDE 正常工作的問題。如果您在使用 WebStorm 時遇到問題，請從文件菜單調用新的修復 IDE...操作。它將指導您通過一系列步驟來解決一些最常見的問題。

輔助功能更新

我們已經解決了一些可訪問性問題，以使在屏幕閱讀器模式下工作更加舒適。我們已經禁用了過去出現在鼠標懸停時出現的工具窗口小部件彈出窗口和快速文檔彈出窗口。

我們還修復了調用Go To Declaration 或 Usages彈出窗口的問題。

macOS 上的輔助功能支持也得到了改進。我們已經解決了畫外音焦點的幾個問題，并使使用屏幕閱讀器創建項目成為可能。為了最大限度地減少編碼時的干擾，我們減少了播放聲音的幫助工具提示的數量。

能夠更改所有選項卡的字體大小

您知道可以使用鼠標滾輪更改編輯器字體大小嗎？以前，此功能僅適用于當前文件。現在您可以使其適用于所有打開的文件。轉到首選項/設置 | 編輯| General，在 中勾選 Change font size with Command / Ctrl + Mouse Wheel in，然后選擇All editors選項。

版本控制

重新組織的 VCS 設置

為了幫助您更快地配置版本控制系統，我們使 VCS 設置更易于發現且結構更清晰。以下是您可以在首選項/設置 | 中找到的一些更改。版本控制。

該版本控制節點現在列出了所有可用的設置。您可以通過單擊來導航到設置。

我們改進了Git節點內部的布局。我們將所有設置分為幾個部分，這些部分說明了最重要的過程：Commit、Push和Update。此外，這些部分中的參數現在組織得更合乎邏輯。

我們還為Directory mappings添加了一個單獨的節點，現在默認開啟后臺操作。該背景節點不再存在。

新的Push All up to Here行動

有時，您可能有幾個提交已準備好發送，而其他提交仍在進行中。在這種情況下，您可能只想推送您確定的那些。在此版本中，WebStorm 將允許您將提交推送到您在Git工具窗口的日志選項卡中選擇的提交。為此，選擇必要的提交，右鍵單擊它以打開上下文菜單，然后選擇一個新的Push All up to Here操作。

遠程分支的檢出和重新定位到 Current

在結賬和上衍合當前操作，可以檢查出選定的分支和重訂其對目前已簽出一個分支的頂部。以前，此操作僅適用于本地分支機構。從 v2021.3 開始，您也可以將此操作應用于遠程分支。

新建更改工具窗口

以前，WebStorm 會在單獨的對話框中向您展示提交之間的差異。從此版本開始，IDE 將在新的“更改”工具窗口中顯示此信息。要打開新工具窗口，請在版本控制系統的日志選項卡中右鍵單擊修訂并從上下文菜單中選擇與本地比較。

對齊更改突出顯示

我們已將新的對齊更改突出顯示選項添加到可在齒輪圖標下找到的差異屏幕設置。此功能使 Diff 更易于閱讀，尤其是在有復雜修改時，因為它將未更改的行對齊，以便它們彼此相鄰顯示。這有助于您更清楚地看到已添加或刪除的代碼。

標簽：