月 28 日，WebStorm v2023.1 版本正式發(fā)布，這是 WebStorm 2023 年的第一個主要版本！此版本包括許多新功能和對 IDE 的改進。

v2023.1 中的主要新功能和改進包括：

• 框架和技術(shù)：Astro 支持、Vue 改進、復制粘貼時添加的組件導入、React 屬性的形參信息、將全局符號和導出符號自動導入 Angular 模板、Svelte 錯誤修復等。
• JavaScript 和 TypeScript：將字符串自動轉(zhuǎn)換為模板文字，為自動導入更好地確定導入庫的優(yōu)先級，在 TypeScript 和 JavaScript 之間對齊導入行為等。
• HTML和 CSS：Tailwind CSS 配置、配置 HTML 代碼完成的選項、在 Markdown 文件中重新格式化表格的能力等。
• 全新 UI：工具窗口的垂直拆分、緊湊模式、macOS 上的項目選項卡、重新設(shè)計的 run 小部件等。
• 用戶體驗：完整的 IDE 縮放、每個工具窗口設(shè)置的新記住大小、為新項目配置保存操作的設(shè)置、在智能模式下掃描文件以建立索引等。
• 版本控制：改進了 GitHub 的代碼審查工作流程、Structure 工具窗口中的 VCS 狀態(tài)顏色提示、改進的 Branches 彈出窗口等。

框架和技術(shù)

Astro 支持

備受期待的 Astro 支持已登陸 WebStorm！從 Preferences / Settings | Plugins（偏好設(shè)置/設(shè)置 | 插件）安裝新的 Astro 插件即可獲取。插件提供基本功能，包括語法高亮顯示、帶自動導入的代碼補全、重構(gòu)、導航、正確的格式設(shè)置等。

Vue 模板中對 TypeScript 的支持

本版本在 Vue 模板中添加了對 TypeScript 支持。它會在將 script 標記中的 lang 特性設(shè)為 ts 時啟用。此前，無論 script 標記中的 lang 特性如何，使用的都是 JavaScript。WebStorm 現(xiàn)在將提供對內(nèi)聯(lián)轉(zhuǎn)換的支持、改進的類型縮小，并在 Vue 單文件組件模板的快速文檔中提供正確的推斷類型信息。

Vue 中的自定義組件事件補全

這個版本中還有一項 Vue 特定的改進值得關(guān)注。現(xiàn)在可以在 Vue 模板中獲得自定義組件事件的代碼補全。它在 JavaScript 和 TypeScript 中相同。

復制粘貼時添加組件 import

將代碼從一個文件復制粘貼到另一個文件時，WebStorm 會自動添加所有必需 import。此前純 JavaScript、TypeScript 語言和 React 模板是這種形式。在 WebStorm 2023.1 中，它現(xiàn)在也適用于 Vue、Svelte、Astro 和 Angular 模板。

React 屬性的形參信息

本版本添加了一種新方式來顯示組件屬性的預(yù)期類型。如果在將屬性傳遞給組件時按 ?P，將看到一個包含類型信息的彈出窗口。此前，這些信息只能通過懸停顯示，對于主要使用鍵盤的用戶來說很不方便。

針對 Angular 的新功能

在 Angular 模板中，WebStorm 會在代碼補全時自動將全局和導出符號的 import 添加到組件中。IDE 還支持 Angular 15 NgoptimizedImage 指令，提供了建議對 img 使用 ngSrc 而不是 src 的檢查。

在文件夾中運行 Jest 測試

現(xiàn)在可以通過右鍵點擊上下文菜單在特定文件夾中運行所有測試。這個功能此前適用于 Vitest，現(xiàn)在也已為 Jest 實現(xiàn)。

JavaScript 和 TypeScript

字符串到模板文字的自動轉(zhuǎn)換

現(xiàn)在，WebStorm 在輸入 ${ 時會自動將帶單引號或雙引號的字符串轉(zhuǎn)換為模板文字。這適用于原始字符串以及 JSX 屬性。

針對自動導入的改進導入庫優(yōu)先級順序

從具有相同導出元素名稱的不同庫添加自動導入時，IDE 的行為有所改進。自動導入現(xiàn)在根據(jù)項目中的現(xiàn)有導入添加。如果需要為來自另一個庫的元素添加 import，則必須手動添加 import 語句。WebStorm 將像先前版本一樣提供彈出窗口。

統(tǒng)一了 TypeScript 與 JavaScript 之間的導入行為

統(tǒng)一了 TypeScript 與 JavaScript 之間的導入行為。在 TypeScript 中，將在上下文操作中看到導入選項，就像在 JavaScript 中看到的一樣。按 ? ? 即可打開上下文操作。統(tǒng)一的設(shè)置位于 Preferences / Settings | Editor | General | Auto Import（偏好設(shè)置/設(shè)置 | 編輯器 | 常規(guī) | 自動導入）。

對 TypeScript 功能的支持

WebStorm 包括對新推出的 TypeScript 5.0 中主要功能的支持。它還提供了對多重配置繼承、類型形參的 const 修飾符和 allowImportingTsExtensions 標志的完全支持。

處理文件引用的通用方式

在 v2023.1 中改進了 WebStorm 處理 JavaScript、TypeScript、HTML、CSS 和各種框架中的引用的方式?，F(xiàn)在，引用的處理方式在項目間更加通用。例如，解析圖像、CSS 或 HTML 文件現(xiàn)在可以使用路徑別名。

HTML和 CSS

Tailwind CSS 配置

在這個版本中添加了對配置選項的支持，例如 classAttributes 選項下的自定義類名補全或 tailwindCSS.experimental.configFile 等實驗性選項?？梢栽?Preferences / Settings | Languages & Frameworks | Style Sheets | Tailwind CSS（偏好設(shè)置/設(shè)置 | 語言和框架 | 樣式表 | Tailwind CSS）下設(shè)置這些配置選項。

配置 HTML 代碼補全的選項

WebStorm 2021.3 為 HTML 引入了補全，會在輸入時顯示標記名稱或縮寫。在 HTML 中輸入純文本時，這種行為可能會分散注意力，因此添加了將其禁用的選項?？梢栽?Preferences / Settings | Editor | General | Code Completion（偏好設(shè)置/設(shè)置 | 編輯器 | 常規(guī) | 代碼補全）中找到新選項。

Markdown 改進

現(xiàn)在可以使用快速修復更正 Markdown 表的格式。此外，使用新增的 Fill Paragraph（填充段落）編輯器操作可以將長文本輕松分為幾個等寬的行。最后，在 Preferences / Settings | Editor | General | Smart Keys（偏好設(shè)置/設(shè)置 | 編輯器 | 常規(guī) | 智能按鍵）下引入了專屬 Markdown 設(shè)置選項頁面。

在 PostCSS 中選擇行注釋樣式的選項

Preferences / Settings | Editor | Code Style | Style Sheets | CSS | PostCSS（偏好設(shè)置/設(shè)置 | 編輯器 | 代碼樣式 | 樣式表 | CSS | PostCSS）中的新選項允許指定在 PostCSS 文件中使用的行注釋樣式?？梢允褂??/ 通過選擇的行注釋樣式注釋掉行。

全新 UI

改進的新 UI（測試版）

去年為 WebStorm 和其他 JetBrains IDE 引入了更簡約的新 UI?？梢郧巴?Preferences / Settings | Appearance & Behavior | New UI（偏好設(shè)置/設(shè)置 | 外觀與行為 | 新 UI）選擇。

工具窗口的垂直拆分

WebStorm 2023.1 支持分割和排列工具窗口，從而同時顯示兩個工具窗口。將工具窗口圖標從邊欄拖動到分隔符下方。或者可以右鍵點擊圖標，使用 Move to（移至）操作為工具窗口分配新位置。

緊湊模式

本版本引入了緊湊模式，使較小屏幕上的工作體驗更加舒適。它簡化了工具欄和工具窗口標題，縮小了間距、填充以及圖標和按鈕，提供更為統(tǒng)一的外觀。轉(zhuǎn)到主菜單中的 View | Appearance | Compact Mode（視圖 | 外觀 | 緊湊模式）即可打開新模式。

macOS 上的項目標簽頁

為 macOS 用戶實現(xiàn)了新 UI 中最熱門的功能請求之一——項目標簽頁。有多個打開的項目時，現(xiàn)在可以使用主工具欄下顯示的項目標簽頁切換。

重新設(shè)計了 Run（運行）微件

基于有關(guān) IDE 新 UI 的反饋，重新設(shè)計了主窗口標題中的 Run（運行）微件，使其更加自然悅目。

重新實現(xiàn)了熱門功能

在新 UI 中添加了一些用戶期待的熱門功能。例如，Show Hidden Tabs（顯示隱藏的標簽頁）選擇器和 Branches（分支）彈出窗口中的 Fetch（提取）操作均已回歸。另外，還通過隱藏主工具欄元素并在作用域中顯示文件的名稱改進了 Distraction Free（無干擾）和 Zen 模式。

用戶體驗

全 IDE 縮放

現(xiàn)在可以放大和縮小 WebStorm，同時增加或縮減所有 UI 元素的大小。從主菜單中，選擇 View | Appearance | Switch Zoom IDE（視圖 | 外觀 | 切換縮放 IDE）。還可以按 ?` 并通過 Zoom（縮放）調(diào)整 IDE 的縮放比例。

記住每個工具窗口的大小

本版本引入了一個新的布局選項，允許統(tǒng)一側(cè)面工具窗口的寬度或保留在自定義布局時調(diào)整其大小的能力。新的 Remember size for each tool window（記住每個工具窗口的大?。瓦x框位于 Preferences / Settings | Appearance & Behavior | Appearance | Tool Windows（偏好設(shè)置/設(shè)置 | 外觀與行為 | 外觀 | 工具窗口）中。

為新項目配置保存時的操作的設(shè)置

WebStorm 2023.1 添加了為新項目預(yù)定義 Actions on Save（保存時的操作）行為的選項。轉(zhuǎn)到 File | New Projects Setup | Preferences / Settings For New Projects | Tools | Actions on Save（文件 | 新項目設(shè)置 | 新項目偏好設(shè)置/新項目設(shè)置 | 工具 | 保存時的操作），選擇在未來項目中保存更改時要觸發(fā)的操作。

機器學習驅(qū)動的類搜索

為了提供更有意義和更準確的搜索結(jié)果，本版本將機器學習排名進一步集成到 Search Everywhere（隨處搜索）（Double ?）功能中。Classes（類）標簽頁中的排序算法現(xiàn)在也默認由機器學習驅(qū)動，與 Actions（操作）和 Files（文件）標簽頁中的結(jié)果相同。

還原舊的復制剪切粘貼行為的選項

本版本新增了一個選項，用于將復制-剪切-粘貼行為還原到早期版本的 WebStorm 中的行為。這允許將剪貼板內(nèi)容粘貼到文本光標處，而不是粘貼到前一行。這個選項位于 Preferences / Settings | Advanced Settings | Editor（偏好設(shè)置/設(shè)置 | 高級設(shè)置 | 編輯器）下的 When pasting a line copied with no selection（粘貼復制時未選擇內(nèi)容的行時）下拉菜單中。

智能模式下的正在掃描要建立索引的文件

通過在智能模式下執(zhí)行 Scanning files to index...（正在掃描要建立索引的文件）進程改進了 IDE 啟動體驗，這應(yīng)該會減少啟動時等待索引所造成的延遲。打開項目時，WebStorm 將使用項目在上一個會話中的現(xiàn)有緩存，并查找要建立索引的新文件。如果掃描時未發(fā)現(xiàn)更改，IDE 將準備就緒。

更改 Microsoft Defender 設(shè)置的建議

WebStorm 2023.1 包含一個新通知，會在啟用 Microsoft Defender 實時保護時觸發(fā)。WebStorm 會建議將特定文件夾添加到 Defender 的排除項列表中，因為這些防病毒檢查會顯著降低 IDE 的速度。

版本控制

針對 GitHub 改進了代碼審查工作流

為了簡化在 IDE 中審查代碼的過程，重做了 Pull Request（拉取請求）工具窗口。它現(xiàn)在為打開的每個拉取請求提供一個專用標簽頁。標簽頁會立即顯示已更改文件的列表，并且有一個專用按鈕可以根據(jù)拉取請求的當前狀態(tài)執(zhí)行最相關(guān)的操作。

創(chuàng)建新分支彈出窗口中的自動補全

在 WebStorm 2023.1 中，在 Create New Branch（創(chuàng)建新分支）彈出窗口中實現(xiàn)了自動補全。為新分支輸入名稱時，IDE 將根據(jù)現(xiàn)有本地分支的名稱建議相關(guān)前綴。

改進了分支彈出窗口

改進了 Branches（分支）彈出窗口的實用性。分支被分組并存儲在可擴展列表中，導航更加輕松。

結(jié)構(gòu)視圖中的 VCS 狀態(tài)顏色提示

在 Structure（結(jié)構(gòu)）工具窗口中添加了顏色提示，使文件更改更易于跟蹤。被修改對象的名稱現(xiàn)在為藍色，新添加對象的名稱在工具窗口中顯示為綠色。

后臺提交檢查

重做了 Git 和 Mercurial 提交檢查的行為，旨在加快整個提交過程。檢查將在提交之后且推送之前在后臺執(zhí)行。