7 月 24 日，前端開發利器 WebStorm 正式發布了 2023 年的第二個主要版本：2023.3。這個版本包含許多新功能和 IDE 的改進，包括改進的 TypeScript 和 JavaScript 錯誤格式、Vue 語言服務器支持、Beta 版新 UI、HTTP 客戶端改進、對插件開發人員的 LSP 支持等。

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

• JavaScript、TypeScript 和 CSS：改進了 JavaScript 和 TypeScript 的錯誤格式、快速修復和實時模板的自動導入、CSS 嵌套支持、將顏色轉換為 lch 和 oklch 等。
• 框架和技術：Vue 語言服務器支持以及對提供/注入和定義模型的支持、對 Next.js 中 App Router 的更好支持、React hooks 的新實時模板、SolidJS 和 Preact 改進等。
• 新 UI：改進了主工具欄自定義、彩色項目標題、帶有淺色標題的淺色主題、重新設計的漢堡菜單等。
• 集成開發工具：AI Assistant 預覽、GitLab 集成、提交特定代碼行的選項、Docker 改進、HTTP 客戶端改進等。
• 用戶體驗：“Search Everywhere”中的文本搜索、“項目”視圖中按修改時間對文件進行排序、“設置”中的建議插件等等。
• 插件開發：為插件開發人員提供 LSP 支持。

JavaScript、TypeScript、CSS

改進了 JavaScript 和 TypeScript 的錯誤格式

在 WebStorm 2023.2 中，一直在尋求改進呈現類型錯誤的方式。此版本包括了第一個實現，它支持 TypeScript、Vue 和 Svelte 語言服務器。錯誤和警告現在的格式更具可讀性并且更易于診斷問題。

圖片

還可以通過在 Settings | Languages & Frameworks | TypeScript 中的 Options 選項中添加 --locale 和希望使用的語言的縮寫：

圖片

除此之外，還為一些最流行的 JavaScript 檢查添加了改進的錯誤格式。關鍵字和引用以與代碼中相同的方式突出顯示，類型以與 TypeScript 中相同的方式突出顯示，并帶有背景。

圖片

添加實時模板以及使用快速修復或意圖時導入

現在，當意圖或快速修復導致文件中未導出未解析的元素時，WebStorm 會自動將該元素的導入添加到文件中。

圖片

WebStorm 2023.2 還包括使用實時模板時自動導入元素的選項。現在，當添加會導致無法解析元素的實時模板時，WebStorm 會自動將該元素的導入添加到文件中。可以在 Settings | Editor | Live Templates 下啟用此功能，，并在選項中選擇添加明確導入。當元素只有一個明確的導入時，此功能將起作用。如果存在兩個或多個可能的元素，則不會自動添加導入。

圖片

CSS 嵌套支持

WebStorm 2023.2 版本新增了對 CSS 嵌套功能的支持。它提供了將一個樣式規則嵌套到另一個規則中的能力，其中子規則的選擇器是相對于父規則的選擇器的。添加了語法支持和檢查嵌套選擇器不以標識符或函數符號開頭的檢查。WebStorm 提供了兩個快速修復選項——在前綴中添加&和包裹在 :is() 中。

圖片

將顏色轉換為 LCH 和 OKLCH

在 WebStorm 2022. 3 中添加了對新的 CSS 顏色修改功能的支持。這為 WebStorm 用戶提供了許多顏色轉換操作。例如，可以將 RGB 更改為 HSL，反之亦然。在 WebStorm 2023.2 中擴展此支持，以包括 lch 和 oklch 與其他顏色函數的轉換。

圖片

JavaScript 的 JSON 補全功能

WebStorm 2023.2 為 JavaScript 代碼中的 JSON 對象鍵提供補全功能，例如使用 fetch() 調用或 axios 庫的代碼。

圖片

啟用/禁用字符串文字自動插值的選項

在 WebStorm 2023.2 中，可以在 Settings | Editor | General | Smart Keys | JavaScript 中配置是否自動進行字符串字面量的插值。通過啟用或禁用選項“Automatically replace string literal with template string on typing '${'”進行設置。

圖片

支持構建程序中定義的別名

已經使用 Typescript 實現了對框架的支持，其中路徑別名是在構建工具的配置文件中定義的，而不是在 tsconfig.json 中定義的。WebStorm 將考慮這些路徑別名，并在 TypeScript 框架中提供自動導入，其中組件語法是 HTML 的超集，即 Vue、Svelte 和 Astro。

框架和技術

Vue：語言服務器支持

該版本實現了對 Vue 語言服務器的支持，以幫助支持 TypeScript 5.0 中的更改。

圖片

默認情況下，對于 TypeScript 版本 5.0 及更高版本，將使用 Vue Language Server。而對于早期的 TypeScript 版本，則將使用 TypeScript 服務的封裝。可以在 Settings | Languages & Frameworks | TypeScript | Vue 中設置 Vue 服務在所有 TypeScript 版本上使用 Vue Language Server 集成。

圖片

Vue：依賴注入支持

WebStorm 2023.2 提供了對依賴注入的支持。WebStorm 現在提供 inject 字段的補全，解析注入的屬性，并顯示有關注入屬性類型的正確信息。

Vue: defineModel 支持

WebStorm 2023.2 添加了對新的 DefineModel 宏的支持，這簡化了雙向綁定的工作。該宏自動注冊一個 prop，并返回一個可以直接變異的 ref。

圖片

Next.js 中對 App Router 的更好支持

Next.js 13.1 現在包含一個專門用于新應用目錄的 TypeScript 語言服務插件。該插件提供了配置頁面和布局的建議，以及使用服務端和客戶端組件的有用提示。它還附帶自定義文檔，這意味著它向 TypeScript 語言服務的輸出添加了額外的信息。現在可以在 WebStorm 中查看此自定義文檔。

圖片

React hooks 的新實時模板

該版本為 React hook 添加了一組新的實時模板。可以在Settings | Editor | Live Templates > React hooks下找到添加的實時模板。

圖片

Svelte 改進

該版本集成了 Svelte 語言服務器。此更新將 Svelte-check 報告的所有錯誤直接帶到了 IDE，例如，包括標記內的 null 檢查、prop 類型檢查等。

圖片

運行工具窗口中 Jest 測試的監視模式

WebStorm 2023.2 在工具窗口中重新引入了用于 Jest 測試的“監視更改”圖標。現在，當運行 Jest 測試時，將在工具欄中看到一個新的切換按鈕，它可以讓開發中輕松啟用觀看模式。這將不需要在運行配置中手動設置 --watch/--watchAll Jest 選項。

圖片

改進了對 SolidJS 和 Preact 的支持

WebStorm 2023.2 包含大量修復，以改進對 Preact 和 Solid.js 的支持。

使用 Preact 和 SolidJS 時，會發現對 Emmet 更好的支持。WebStorm 現在可以更好地理解 Preact、SolidJS 和其他基于 JSX 的框架，其中類屬性在相應的 d.ts 文件中定義。WebStorm 現在不再檢測特定框架，而是使用 JSX.IntrinsicElements 中的類型和配置信息來提供 Emmet 的正確展開。

除此之外，還為 createSignal 函數的 getter 和 setter 引入了重命名重構。與 useState 已有的重構功能類似，這使開發者可以方便地重命名與 createSignal 函數關聯的 getter和 setter 函數，以便可以有效地更新這些函數的名稱，以更好地反映其用途或遵守編碼約定。

圖片

Angular 改進

現在，在 WebStorm 2023.2 中，當使用 strictTemplates 時，應該不會再有任何意外了。WebStorm 將精確解釋 ngTemplateContextGuard 方法并將類型評估傳播到模板變量。大量使用映射類型的庫（例如 NgRx）現在應該可以正常工作。結合之前添加的對嚴格 null 檢查和類型縮小的支持，希望它能讓 Angular 體驗變得更好！

在此版本中，還修復了一些與 Jest 和 Angular 相關的問題。其中包括修復導致某些 Jest 測試無法在 Angular 項目目錄中運行的問題，以及修復在運行目錄中的所有測試時正確檢測子項目的問題。

Astro 更新

在此版本中對 Astro 支持進行了多項改進。現在 PostCSS 默認工作在 Astro 組件的<style>標簽中。此外，現在可以在 <style> 標簽中使用 Sass、Less 和 Stylus 等 CSS 預處理器。

圖片

新 UI

新 UI：測試版結束 去年，為 WebStorm 和其他 JetBrains IDE 引入了一個新的、更簡約的 UI。根據反饋進一步完善了新的 UI，現在準備將其推出 Beta 版。可以使用 IDE 右上角的 IDE 和項目設置齒輪啟用新 UI。

圖片

新 UI：改進了主工具欄自定義

擴展了新 UI 主工具欄的自定義選項。現在可以使用下拉菜單快速將操作添加到工具欄。為此，右鍵單擊任何小部件，選擇“Add to Main Toolbar”，然后瀏覽可用的選項。

圖片

新 UI：彩色項目標題

WebStorm 2023.2 引入了彩色項目標題，以簡化多個打開項目之間的導航。現在，可以為每個項目分配唯一的顏色和圖標，從而更輕松地在工作區中區分它們。

默認情況下，標題帶有預定義的顏色，但可以自定義它們。要為項目設置新顏色，請右鍵單擊標題并訪問上下文菜單。選擇“Change Project Color”選項，然后選擇想要的顏色。要禁用此功能，在菜單中取消選擇“Show Project Gradient”選項。

圖片

新 UI：重新設計的漢堡菜單

改進了新 UI 中漢堡菜單的行為，該菜單位于 Windows 和 Linux 的主工具欄中。當單擊菜單圖標時，元素現在水平顯示在工具欄上。

圖片

新 UI：更新了 macOS 上的窗口控件

當使用新 UI 在全屏模式下在 macOS 上工作時，窗口控件現在顯示在主工具欄上，而不是像以前那樣顯示在浮動欄上。

圖片

新 UI：在“run”小部件中固定運行配置

為了更輕松地管理多個運行配置，實現了在“run”小部件中固定首選配置的選項。要將運行配置添加到固定部分，可以打開其名稱旁邊的 kebab 菜單（三個點），然后選擇固定。如果有多個固定配置，可以通過在列表中拖放它們來輕松重新排列它們。

圖片

新 UI：刪除了 Linux 上的標題欄

為了方便 Linux 用戶，新 UI 中刪除了操作系統的標頭，從而使界面更加清晰。默認情況下，現在將看到自定義 IDE 的標題，它提供了一系列額外的自定義選項來定制工作區。

圖片

集成開發工具

GitLab 集成

在 WebStorm 2023.2 中引入了與 GitLab 的初步集成。通過這種集成，可以直接從 IDE 中使用合并請求功能，從而簡化開發工作流程。

圖片

提交特定代碼行選項

WebStorm 2023.2 引入了一項備受期待的功能，可以選擇性地提交代碼塊的特定部分。要執行部分提交，請選擇塊中的行并調用 Include Selected Lines into Commit。該塊將被分成單獨的行，并突出顯示所選的行。可以使用復選框或上下文菜單在選擇中添加或排除行。

圖片

Docker 改進

Docker 鏡像層內的文件預覽

現在可以在“Services”視圖中輕松訪問和預覽 Docker 鏡像層的內容。從列表中選擇圖像，選擇顯示圖層，然后單擊分析圖像以獲取更多信息。然后，可以查看存儲在圖層中的文件列表，并通過右鍵單擊文件并調用“Open File”選項，輕松在編輯器中打開選定的文件。

圖片

將 Docker 容器設置為作為運行配置的啟動前任務運行

現在，可以通過將其指定為“Before Launch”任務，設置 Docker 運行配置在另一個配置之前運行。IDE 將等待當前正在運行的容器變為健康狀態，然后啟動下一個運行配置。要設置隊列，請首先創建所需的 Docker 運行配置，然后通過“Modify options | Add before launch task | Run”將其添加到容器中。

圖片

HTTP 客戶端的新功能

現在可以通過導入的模塊共享 HTTP 客戶端請求處理程序的通用 JavaScript 代碼。

圖片

WebStorm 2023.2 現在可以在 HTTP 客戶端的請求結果中顯示 PDF 和 HTML 文件的預覽。

圖片

現在可以使用 WebStorm 中的 HTTP 客戶端 CLI 與 GraphQL API 交互并與服務建立 WebSocket 連接，例如用于測試或自動化腳本。

圖片

Qodana 集成

Qdana 代碼質量平臺是 JetBrains 產品系列的最新成員，剛剛發布了預覽版。Qodana 2023.2 版本與基于 JetBrains IntelliJ 的 IDE（包括 WebStorm）進行了全面集成。

Qodana 是一個靜態分析引擎，可以將 JetBrains IDE 的檢查引入任何 CI 管道、自動執行代碼審查、為開發團隊創建共享檢查配置文件，并構建服務器端質量關卡。該平臺可以分析用 60 多種語言編寫的代碼，包括 Java、JavaScript、PHP、C# 等。

圖片

這種集成帶來了兩個重要的好處。首先是配置的簡便性。只需點擊幾下即可觸發分析，查看整個項目的問題列表，然后在首選的 CI/CD 系統中配置 Qodana 以建立質量門并運行服務器端檢查。第二個好處是對齊。在 CI/CD 中配置 Qodana 后，將能夠立即查看服務器端分析的結果，而無需離開 IDE。

AI 助手預覽

WebStorm 2023.2 包括對新的 JetBrains AI 服務的預覽訪問。目前，該服務僅通過 JetBrains Marketplace 上提供的插件向部分用戶提供。

圖片

該服務支持 OpenAI，還托管 JetBrains 創建的幾個較小的模型。計劃將來將其擴展到更多提供商，讓開發者能夠獲得最佳的選項和模型。

用戶體驗

Search Everywhere 中的文本搜索

Search Everywhere（雙 ? / 雙 Shift）功能主要用于搜索文件、類、方法、操作和設置，現在包括類似于在文件中查找的文本搜索功能。通過此增強功能，當給定查詢的其他搜索結果很少或沒有可用時，會顯示文本搜索結果，該功能默認啟用。

圖片

項目視圖文件按修改時間排序

WebStorm 2023.2 帶來了期待已久的選項，可以根據修改時間在項目視圖中排列文件。每當保存項目中的更改時，此新功能都會自動對文件重新排序。要啟用此功能，請在項目視圖中打開 kebab 菜單（三個點），然后選擇 Tree Appearance | Sort by Modification Time。

圖片

設置中推薦的插件

為了更輕松地為特定項目配置 WebStorm 并通過插件擴展其功能，我們更新了Settings | Plugins的 UI，現在包含一組根據項目具體情況推薦的插件。

圖片

在項目目錄之間單擊導航

在“項目”視圖中，新的“_Open Directories with Single Click_”選項使擴展和折疊項目文件夾變得更快、響應更靈敏。單擊三點圖標后，可以從下拉菜單中使用該選項。

圖片

檢查描述中的語法高亮

在Settings | Editor | Inspections中為代碼示例實現了語法高亮，這將幫助理解檢查及其目的。

圖片

插件開發

對插件開發人員的 LSP 支持

該版本推出了一個重大功能，即為插件開發人員引入了 LSP API。LSP API 主要面向希望在 IDE 中使用特定 LSP 服務器進行編碼輔助的插件開發人員。如果有自定義的編程語言或框架，可以通過編寫一個 LSP 服務器并創建相應的插件來使其在 IDE 中得到支持。

當前的功能包括錯誤/警告高亮顯示、快速修復、代碼補全和導航到聲明等功能。更多功能即將推出。

圖片

其他更新

• 添加了對使用 TC39 顯式資源管理提案中的聲明的語法支持。using 聲明是一種新的塊作用域變量形式，允許聲明一種可釋放的資源
• 將 WebStorm 依賴的 TypeScript 版本更新為 5.1.3
• 修復了應用重新格式化代碼時引入空行的幾個問題
• 修復了導致 Deno 調試器無法啟動的問題
• 修復了在使用 unplugin-auto-import 插件時，模板中的 ref 類型未知的問題
• 修復了 WebStorm 在 CSS 中無法報告“無法解析目錄”的問題