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

WebStorm v2023.2 中的主要新功能和改進(jìn)包括：

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

JavaScript、TypeScript、CSS

改進(jìn)了 JavaScript 和 TypeScript 的錯(cuò)誤格式

在 WebStorm 2023.2 中，一直在尋求改進(jìn)呈現(xiàn)類型錯(cuò)誤的方式。此版本包括了第一個(gè)實(shí)現(xiàn)，它支持 TypeScript、Vue 和 Svelte 語言服務(wù)器。錯(cuò)誤和警告現(xiàn)在的格式更具可讀性并且更易于診斷問題。

圖片

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

圖片

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

圖片

添加實(shí)時(shí)模板以及使用快速修復(fù)或意圖時(shí)導(dǎo)入

現(xiàn)在，當(dāng)意圖或快速修復(fù)導(dǎo)致文件中未導(dǎo)出未解析的元素時(shí)，WebStorm 會(huì)自動(dòng)將該元素的導(dǎo)入添加到文件中。

圖片

WebStorm 2023.2 還包括使用實(shí)時(shí)模板時(shí)自動(dòng)導(dǎo)入元素的選項(xiàng)?，F(xiàn)在，當(dāng)添加會(huì)導(dǎo)致無法解析元素的實(shí)時(shí)模板時(shí)，WebStorm 會(huì)自動(dòng)將該元素的導(dǎo)入添加到文件中?？梢栽?nbsp;Settings | Editor | Live Templates 下啟用此功能，，并在選項(xiàng)中選擇添加明確導(dǎo)入。當(dāng)元素只有一個(gè)明確的導(dǎo)入時(shí)，此功能將起作用。如果存在兩個(gè)或多個(gè)可能的元素，則不會(huì)自動(dòng)添加導(dǎo)入。

圖片

CSS 嵌套支持

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

圖片

將顏色轉(zhuǎn)換為 LCH 和 OKLCH

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

圖片

JavaScript 的 JSON 補(bǔ)全功能

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

圖片

啟用/禁用字符串文字自動(dòng)插值的選項(xiàng)

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

圖片

支持構(gòu)建程序中定義的別名

已經(jīng)使用 Typescript 實(shí)現(xiàn)了對(duì)框架的支持，其中路徑別名是在構(gòu)建工具的配置文件中定義的，而不是在 tsconfig.json 中定義的。WebStorm 將考慮這些路徑別名，并在 TypeScript 框架中提供自動(dòng)導(dǎo)入，其中組件語法是 HTML 的超集，即 Vue、Svelte 和 Astro。

框架和技術(shù)

Vue：語言服務(wù)器支持

該版本實(shí)現(xiàn)了對(duì) Vue 語言服務(wù)器的支持，以幫助支持 TypeScript 5.0 中的更改。

圖片

默認(rèn)情況下，對(duì)于 TypeScript 版本 5.0 及更高版本，將使用 Vue Language Server。而對(duì)于早期的 TypeScript 版本，則將使用 TypeScript 服務(wù)的封裝?？梢栽?nbsp;Settings | Languages & Frameworks | TypeScript | Vue 中設(shè)置 Vue 服務(wù)在所有 TypeScript 版本上使用 Vue Language Server 集成。

圖片

Vue：依賴注入支持

WebStorm 2023.2 提供了對(duì)依賴注入的支持。WebStorm 現(xiàn)在提供 inject 字段的補(bǔ)全，解析注入的屬性，并顯示有關(guān)注入屬性類型的正確信息。

Vue: defineModel 支持

WebStorm 2023.2 添加了對(duì)新的 DefineModel 宏的支持，這簡(jiǎn)化了雙向綁定的工作。該宏自動(dòng)注冊(cè)一個(gè) prop，并返回一個(gè)可以直接變異的 ref。

圖片

Next.js 中對(duì) App Router 的更好支持

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

圖片

React hooks 的新實(shí)時(shí)模板

該版本為 React hook 添加了一組新的實(shí)時(shí)模板?？梢栽赟ettings | Editor | Live Templates > React hooks下找到添加的實(shí)時(shí)模板。

圖片

Svelte 改進(jìn)

該版本集成了 Svelte 語言服務(wù)器。此更新將 Svelte-check 報(bào)告的所有錯(cuò)誤直接帶到了 IDE，例如，包括標(biāo)記內(nèi)的 null 檢查、prop 類型檢查等。

圖片

運(yùn)行工具窗口中 Jest 測(cè)試的監(jiān)視模式

WebStorm 2023.2 在工具窗口中重新引入了用于 Jest 測(cè)試的“監(jiān)視更改”圖標(biāo)?，F(xiàn)在，當(dāng)運(yùn)行 Jest 測(cè)試時(shí)，將在工具欄中看到一個(gè)新的切換按鈕，它可以讓開發(fā)中輕松啟用觀看模式。這將不需要在運(yùn)行配置中手動(dòng)設(shè)置 --watch/--watchAll Jest 選項(xiàng)。

圖片

改進(jìn)了對(duì) SolidJS 和 Preact 的支持

WebStorm 2023.2 包含大量修復(fù)，以改進(jìn)對(duì) Preact 和 Solid.js 的支持。

使用 Preact 和 SolidJS 時(shí)，會(huì)發(fā)現(xiàn)對(duì) Emmet 更好的支持。WebStorm 現(xiàn)在可以更好地理解 Preact、SolidJS 和其他基于 JSX 的框架，其中類屬性在相應(yīng)的 d.ts 文件中定義。WebStorm 現(xiàn)在不再檢測(cè)特定框架，而是使用 JSX.IntrinsicElements 中的類型和配置信息來提供 Emmet 的正確展開。

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

圖片

Angular 改進(jìn)

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

在此版本中，還修復(fù)了一些與 Jest 和 Angular 相關(guān)的問題。其中包括修復(fù)導(dǎo)致某些 Jest 測(cè)試無法在 Angular 項(xiàng)目目錄中運(yùn)行的問題，以及修復(fù)在運(yùn)行目錄中的所有測(cè)試時(shí)正確檢測(cè)子項(xiàng)目的問題。

Astro 更新

在此版本中對(duì) Astro 支持進(jìn)行了多項(xiàng)改進(jìn)?，F(xiàn)在 PostCSS 默認(rèn)工作在 Astro 組件的<style>標(biāo)簽中。此外，現(xiàn)在可以在 <style> 標(biāo)簽中使用 Sass、Less 和 Stylus 等 CSS 預(yù)處理器。

圖片

新 UI

新 UI：測(cè)試版結(jié)束 去年，為 WebStorm 和其他 JetBrains IDE 引入了一個(gè)新的、更簡(jiǎn)約的 UI。根據(jù)反饋進(jìn)一步完善了新的 UI，現(xiàn)在準(zhǔn)備將其推出 Beta 版?？梢允褂?IDE 右上角的 IDE 和項(xiàng)目設(shè)置齒輪啟用新 UI。

圖片

新 UI：改進(jìn)了主工具欄自定義

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

圖片

新 UI：彩色項(xiàng)目標(biāo)題

WebStorm 2023.2 引入了彩色項(xiàng)目標(biāo)題，以簡(jiǎn)化多個(gè)打開項(xiàng)目之間的導(dǎo)航?，F(xiàn)在，可以為每個(gè)項(xiàng)目分配唯一的顏色和圖標(biāo)，從而更輕松地在工作區(qū)中區(qū)分它們。

默認(rèn)情況下，標(biāo)題帶有預(yù)定義的顏色，但可以自定義它們。要為項(xiàng)目設(shè)置新顏色，請(qǐng)右鍵單擊標(biāo)題并訪問上下文菜單。選擇“Change Project Color”選項(xiàng)，然后選擇想要的顏色。要禁用此功能，在菜單中取消選擇“Show Project Gradient”選項(xiàng)。

圖片

新 UI：重新設(shè)計(jì)的漢堡菜單

改進(jìn)了新 UI 中漢堡菜單的行為，該菜單位于 Windows 和 Linux 的主工具欄中。當(dāng)單擊菜單圖標(biāo)時(shí)，元素現(xiàn)在水平顯示在工具欄上。

圖片

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

當(dāng)使用新 UI 在全屏模式下在 macOS 上工作時(shí)，窗口控件現(xiàn)在顯示在主工具欄上，而不是像以前那樣顯示在浮動(dòng)欄上。

圖片

新 UI：在“run”小部件中固定運(yùn)行配置

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

圖片

新 UI：刪除了 Linux 上的標(biāo)題欄

為了方便 Linux 用戶，新 UI 中刪除了操作系統(tǒng)的標(biāo)頭，從而使界面更加清晰。默認(rèn)情況下，現(xiàn)在將看到自定義 IDE 的標(biāo)題，它提供了一系列額外的自定義選項(xiàng)來定制工作區(qū)。

圖片

集成開發(fā)工具

GitLab 集成

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

圖片

提交特定代碼行選項(xiàng)

WebStorm 2023.2 引入了一項(xiàng)備受期待的功能，可以選擇性地提交代碼塊的特定部分。要執(zhí)行部分提交，請(qǐng)選擇塊中的行并調(diào)用 Include Selected Lines into Commit。該塊將被分成單獨(dú)的行，并突出顯示所選的行?？梢允褂脧?fù)選框或上下文菜單在選擇中添加或排除行。

圖片

Docker 改進(jìn)

Docker 鏡像層內(nèi)的文件預(yù)覽

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

圖片

將 Docker 容器設(shè)置為作為運(yùn)行配置的啟動(dòng)前任務(wù)運(yùn)行

現(xiàn)在，可以通過將其指定為“Before Launch”任務(wù)，設(shè)置 Docker 運(yùn)行配置在另一個(gè)配置之前運(yùn)行。IDE 將等待當(dāng)前正在運(yùn)行的容器變?yōu)榻】禒顟B(tài)，然后啟動(dòng)下一個(gè)運(yùn)行配置。要設(shè)置隊(duì)列，請(qǐng)首先創(chuàng)建所需的 Docker 運(yùn)行配置，然后通過“Modify options | Add before launch task | Run”將其添加到容器中。

圖片

HTTP 客戶端的新功能

現(xiàn)在可以通過導(dǎo)入的模塊共享 HTTP 客戶端請(qǐng)求處理程序的通用 JavaScript 代碼。

圖片

WebStorm 2023.2 現(xiàn)在可以在 HTTP 客戶端的請(qǐng)求結(jié)果中顯示 PDF 和 HTML 文件的預(yù)覽。

圖片

現(xiàn)在可以使用 WebStorm 中的 HTTP 客戶端 CLI 與 GraphQL API 交互并與服務(wù)建立 WebSocket 連接，例如用于測(cè)試或自動(dòng)化腳本。

圖片

Qodana 集成

Qdana 代碼質(zhì)量平臺(tái)是 JetBrains 產(chǎn)品系列的最新成員，剛剛發(fā)布了預(yù)覽版。Qodana 2023.2 版本與基于 JetBrains IntelliJ 的 IDE（包括 WebStorm）進(jìn)行了全面集成。

Qodana 是一個(gè)靜態(tài)分析引擎，可以將 JetBrains IDE 的檢查引入任何 CI 管道、自動(dòng)執(zhí)行代碼審查、為開發(fā)團(tuán)隊(duì)創(chuàng)建共享檢查配置文件，并構(gòu)建服務(wù)器端質(zhì)量關(guān)卡。該平臺(tái)可以分析用 60 多種語言編寫的代碼，包括 Java、JavaScript、PHP、C# 等。

圖片

這種集成帶來了兩個(gè)重要的好處。首先是配置的簡(jiǎn)便性。只需點(diǎn)擊幾下即可觸發(fā)分析，查看整個(gè)項(xiàng)目的問題列表，然后在首選的 CI/CD 系統(tǒng)中配置 Qodana 以建立質(zhì)量門并運(yùn)行服務(wù)器端檢查。第二個(gè)好處是對(duì)齊。在 CI/CD 中配置 Qodana 后，將能夠立即查看服務(wù)器端分析的結(jié)果，而無需離開 IDE。

AI 助手預(yù)覽

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

圖片

該服務(wù)支持 OpenAI，還托管 JetBrains 創(chuàng)建的幾個(gè)較小的模型。計(jì)劃將來將其擴(kuò)展到更多提供商，讓開發(fā)者能夠獲得最佳的選項(xiàng)和模型。

用戶體驗(yàn)

Search Everywhere 中的文本搜索

Search Everywhere（雙 ? / 雙 Shift）功能主要用于搜索文件、類、方法、操作和設(shè)置，現(xiàn)在包括類似于在文件中查找的文本搜索功能。通過此增強(qiáng)功能，當(dāng)給定查詢的其他搜索結(jié)果很少或沒有可用時(shí)，會(huì)顯示文本搜索結(jié)果，該功能默認(rèn)啟用。

圖片

項(xiàng)目視圖文件按修改時(shí)間排序

WebStorm 2023.2 帶來了期待已久的選項(xiàng)，可以根據(jù)修改時(shí)間在項(xiàng)目視圖中排列文件。每當(dāng)保存項(xiàng)目中的更改時(shí)，此新功能都會(huì)自動(dòng)對(duì)文件重新排序。要啟用此功能，請(qǐng)?jiān)陧?xiàng)目視圖中打開 kebab 菜單（三個(gè)點(diǎn)），然后選擇 Tree Appearance | Sort by Modification Time。

圖片

設(shè)置中推薦的插件

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

圖片

在項(xiàng)目目錄之間單擊導(dǎo)航

在“項(xiàng)目”視圖中，新的“_Open Directories with Single Click_”選項(xiàng)使擴(kuò)展和折疊項(xiàng)目文件夾變得更快、響應(yīng)更靈敏。單擊三點(diǎn)圖標(biāo)后，可以從下拉菜單中使用該選項(xiàng)。

圖片

檢查描述中的語法高亮

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

圖片

插件開發(fā)

對(duì)插件開發(fā)人員的 LSP 支持

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

當(dāng)前的功能包括錯(cuò)誤/警告高亮顯示、快速修復(fù)、代碼補(bǔ)全和導(dǎo)航到聲明等功能。更多功能即將推出。

圖片

其他更新

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