WebStorm發(fā)布2021.3更新了哪些新功能

這篇文章主要講解了“WebStorm發(fā)布2021.3更新了哪些新功能”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“WebStorm發(fā)布2021.3更新了哪些新功能”吧！

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

• JavaScript 和 TypeScript：改進(jìn)了 monorepos 的使用、更快的 JavaScript 文件索引時(shí)間、下載遠(yuǎn)程 ES6 模塊的快速修復(fù)、支持 ES2022 私有類成員等。

• 框架和技術(shù)：更輕松地管理項(xiàng)目依賴項(xiàng)、重新設(shè)計(jì)的 Deno 插件、對(duì) Angular 13 的支持、更好的 HTML 完成等等。

• 遠(yuǎn)程開發(fā)：用于遠(yuǎn)程開發(fā)的 JetBrains 網(wǎng)關(guān)、Node.js 遠(yuǎn)程解釋器更新以及對(duì) SSH 連接的代理支持。

• Docker：改進(jìn)的連接過(guò)程、新的清理操作、Minikube 集成、對(duì) Compose V2 的支持等。

• 用戶體驗(yàn)：能夠拆分運(yùn)行工具窗口、新的書簽工具窗口、基于 ML 的Search Everywhere操作搜索等。

• 版本控制：重新組織了 VCS 設(shè)置、改進(jìn)了推送提交的工作流程、新的更改工具窗口等。

JavaScript 和打字稿

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

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

更快地索引 JavaScript 文件

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

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

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

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

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

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

組織代碼的新意圖

在 WebStorm 2021.3 中組織代碼有兩個(gè)新意圖。

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

要嘗試這種意圖，請(qǐng)將插入符號(hào)放在要更改的元素上，然后按?? / Alt+Enter并根據(jù)需要選擇將逗號(hào)分隔的元素放在一行上或?qū)⒍禾?hào)分隔的元素放在多行上。對(duì)于 XML、HTML 和 JSX，您會(huì)看到此操作的措辭略有不同 –將屬性放在單獨(dú)的行上或?qū)傩苑旁谝恍猩稀?/p>

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

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

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

框架和技術(shù)

更新依賴項(xiàng)的新檢查

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

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

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

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

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

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

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

Angular 13 支持

我們?cè)诖税姹局薪鉀Q的最緊迫的問題之一是對(duì) Angular 13 的支持。由于 Angular 包格式的更改，它被破壞了。WebStorm 2021.3 考慮了這些變化并支持新版本的 Angular。

改進(jìn)的 HTML 完成

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

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

Vue 和 React 屬性的類型檢查

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

這也適用于 React 屬性。

HTTP 客戶端的新功能

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

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

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

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

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

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

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

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

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

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

然后您可以返回編輯器并使用 Node.js 和 Docker 中的包管理器在您的項(xiàng)目中安裝依賴項(xiàng)。此時(shí)，您應(yīng)該可以像在本地使用 Node.js 一樣開始正常工作。例如，如果您想使用 ESLint lint 一個(gè) JavaScript 文件，請(qǐng)?jiān)诰庉嬈髦写蜷_該文件。錯(cuò)誤應(yīng)自動(dòng)突出顯示。

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

• ESLint

• 摩卡和笑話

• npm、pnpm 和紗線

SSH 連接的代理支持

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

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

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

碼頭工人

更簡(jiǎn)單的連接過(guò)程

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

新的清理行動(dòng)

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

從 Minikube 連接到 Docker

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

支持 Compose V2

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

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

圖像層

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

將容器另存為圖像

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

Podman 支持

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

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

用戶體驗(yàn)

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

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

新書簽工具窗口

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

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

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

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

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

在Search Everywhere 中基于 ML 搜索操作

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

• 特定用戶的操作使用歷史記錄。

• 整個(gè)用戶群的操作使用頻率。

• 搜索查詢的長(zhǎng)度、操作的名稱等。

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

終端的改進(jìn)

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

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

評(píng)估來(lái)自調(diào)試器的表達(dá)式

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

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

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

輔助功能更新

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

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

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

能夠更改所有選項(xiàng)卡的字體大小

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

版本控制

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

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

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

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

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

新的Push All up to Here行動(dòng)

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

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

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

新建更改工具窗口

以前，WebStorm 會(huì)在單獨(dú)的對(duì)話框中向您展示提交之間的差異。從此版本開始，IDE 將在新的“更改”工具窗口中顯示此信息。要打開新工具窗口，請(qǐng)?jiān)诎姹究刂葡到y(tǒng)的日志選項(xiàng)卡中右鍵單擊修訂并從上下文菜單中選擇與本地比較。

對(duì)齊更改突出顯示

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

感謝各位的閱讀，以上就是“WebStorm發(fā)布2021.3更新了哪些新功能”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)WebStorm發(fā)布2021.3更新了哪些新功能這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！