前端開發利器 WebStorm 2023.1 版本正式發布！

作者：CUGGZ 2023-03-31 11:35:25

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

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

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

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

框架和技術

Astro 支持

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

Vue 模板中對 TypeScript 的支持

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

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

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

復制粘貼時添加組件 import

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

React 屬性的形參信息

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

針對 Angular 的新功能

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

在文件夾中運行 Jest 測試

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

JavaScript 和 TypeScript

字符串到模板文字的自動轉換

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

針對自動導入的改進導入庫優先級順序

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

統一了 TypeScript 與 JavaScript 之間的導入行為

對 TypeScript 功能的支持

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

處理文件引用的通用方式

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

HTML和 CSS

Tailwind CSS 配置

配置 HTML 代碼補全的選項

Markdown 改進

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

全新 UI

改進的新 UI（測試版）

去年為 WebStorm 和其他 JetBrains IDE 引入了更簡約的新 UI。可以前往 Preferences / Settings | Appearance & Behavior | New UI（偏好設置/設置 | 外觀與行為 | 新 UI）選擇。

工具窗口的垂直拆分

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

緊湊模式

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

macOS 上的項目標簽頁

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

重新設計了 Run（運行）微件

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

重新實現了熱門功能

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

用戶體驗

全 IDE 縮放

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

記住每個工具窗口的大小

為新項目配置保存時的操作的設置

機器學習驅動的類搜索

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

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

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

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

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