2021年度最后一次重大更新 WebStorm 2021.3 來了！此更新充滿了期待已久的增強(qiáng)功能，包括對遠(yuǎn)程開發(fā)的支持、改進(jìn)的 HTML 完成、重新設(shè)計的 Deno 集成等。

下載WebStorm 2021.3

新功能和改進(jìn)分為以下幾類：

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

JavaScript 和打字稿

改進(jìn)了對 monorepos 的支持

此版本對使用 monorepos 進(jìn)行了許多改進(jìn)。最顯著的變化是自動添加的導(dǎo)入現(xiàn)在尊重項目結(jié)構(gòu)，將項目中的每個文件夾與package.json視為一個單獨(dú)的包。

更快地索引 JavaScript 文件

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

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

支持導(dǎo)入語句中的 URL

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

對 ES2022 私有類成員的重構(gòu)支持

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

組織代碼的新意圖

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

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

要嘗試這種意圖，請將插入符號放在要更改的元素上，然后按?? / Alt+Enter并根據(jù)需要選擇將逗號分隔的元素放在一行上或?qū)⒍禾柗指舻脑胤旁诙嘈猩稀τ?XML、HTML 和 JSX，您會看到此操作的措辭略有不同 –將屬性放在單獨(dú)的行上或?qū)傩苑旁谝恍猩稀?

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

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

此版本的另一項改進(jìn)涉及.js和.d.ts文件。我們改進(jìn)了它們之間的映射并添加了裝訂線圖標(biāo)以實現(xiàn)更好的導(dǎo)航。

框架和技術(shù)

更新依賴項的新檢查

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

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

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

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

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

重新設(shè)計的 Deno 集成

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

Angular 13 支持

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

改進(jìn)的 HTML 完成

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

此外，字符實體引用的代碼完成現(xiàn)在應(yīng)該可以更好地工作。

Vue 和 React 屬性的類型檢查

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

這也適用于 React 屬性。

HTTP 客戶端的新功能

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

遠(yuǎn)程開發(fā)

遠(yuǎn)程運(yùn)行 WebStorm

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

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

使用遠(yuǎn)程 Node.js 進(jìn)行開發(fā)

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

Node.js 對 ESLint 的遠(yuǎn)程解釋器支持從 v2021.2 開始作為一項實驗性功能可用。從現(xiàn)在開始，它將默認(rèn)處于活動狀態(tài)。

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

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

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

我們還將 Node.js 遠(yuǎn)程解釋器支持?jǐn)U展到 Mocha、Jest、npm、pnpm 和 yarn 腳本。您可以在下面找到每種受支持技術(shù)的說明：

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

SSH 連接的代理支持

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

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

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

碼頭工人

更簡單的連接過程

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

新的清理行動

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

從 Minikube 連接到 Docker

現(xiàn)在可以輕松地從 Minikube 連接到 Docker 守護(hù)程序。轉(zhuǎn)到首選項/設(shè)置 | 構(gòu)建、執(zhí)行、部署并選擇Minikube單選按鈕。在旁邊的字段中，IDE 將自動顯示您可以連接到的檢測到的 Minikube 的 docker-daemon 環(huán)境。

支持 Compose V2

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

要激活此選項，請轉(zhuǎn)至首選項/設(shè)置 | 構(gòu)建、執(zhí)行、部署 | 碼頭工人 | 工具并勾選使用 Compose V2復(fù)選框。

圖像層

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

將容器另存為圖像

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

Podman 支持

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

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

用戶體驗

能夠拆分運(yùn)行工具窗口

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

新書簽工具窗口

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

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

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

Show Usages 的源代碼預(yù)覽

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

在Search Everywhere 中基于 ML 搜索操作

在搜索操作時，WebStorm 中的Search Everywhere現(xiàn)在默認(rèn)由機(jī)器學(xué)習(xí)提供支持。我們訓(xùn)練了一個基于機(jī)器學(xué)習(xí)的公式，它考慮到：

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

我們希望您發(fā)現(xiàn)基于 ML 的模型可以提高您的搜索質(zhì)量并返回根據(jù)您的特定需求量身定制的結(jié)果。

終端的改進(jìn)

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

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

評估來自調(diào)試器的表達(dá)式

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

內(nèi)置故障排除工具

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

輔助功能更新

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

我們還修復(fù)了調(diào)用Go To Declaration 或 Usages彈出窗口的問題。

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

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

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

版本控制

重新組織的 VCS 設(shè)置

為了幫助您更快地配置版本控制系統(tǒng)，我們使 VCS 設(shè)置更易于發(fā)現(xiàn)且結(jié)構(gòu)更清晰。以下是您可以在首選項/設(shè)置 | 中找到的一些更改。版本控制。

該版本控制節(jié)點現(xiàn)在列出了所有可用的設(shè)置。您可以通過單擊來導(dǎo)航到設(shè)置。

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

我們還為Directory mappings添加了一個單獨(dú)的節(jié)點，現(xiàn)在默認(rèn)開啟后臺操作。該背景節(jié)點不再存在。

新的Push All up to Here行動

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

遠(yuǎn)程分支的檢出和重新定位到 Current

在結(jié)賬和上衍合當(dāng)前操作，可以檢查出選定的分支和重訂其對目前已簽出一個分支的頂部。以前，此操作僅適用于本地分支機(jī)構(gòu)。從 v2021.3 開始，您也可以將此操作應(yīng)用于遠(yuǎn)程分支。

新建更改工具窗口

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

對齊更改突出顯示

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

標(biāo)簽：