前端開發(fā)利器 WebStorm 2023.1 版本正式發(fā)布！

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

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

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

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

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

框架和技術(shù)

Astro 支持

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

Vue 模板中對(duì) TypeScript 的支持

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

Vue 中的自定義組件事件補(bǔ)全

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

復(fù)制粘貼時(shí)添加組件 import

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

React 屬性的形參信息

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

針對(duì) Angular 的新功能

在 Angular 模板中，WebStorm 會(huì)在代碼補(bǔ)全時(shí)自動(dòng)將全局和導(dǎo)出符號(hào)的 import 添加到組件中。IDE 還支持 Angular 15 NgoptimizedImage 指令，提供了建議對(duì) img 使用 ngSrc 而不是 src 的檢查。

在文件夾中運(yùn)行 Jest 測試

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

JavaScript 和 TypeScript

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

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

針對(duì)自動(dòng)導(dǎo)入的改進(jìn)導(dǎo)入庫優(yōu)先級(jí)順序

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

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

對(duì) TypeScript 功能的支持

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

處理文件引用的通用方式

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

HTML和 CSS

Tailwind CSS 配置

配置 HTML 代碼補(bǔ)全的選項(xiàng)

Markdown 改進(jìn)

在 PostCSS 中選擇行注釋樣式的選項(xiàng)

全新 UI

改進(jìn)的新 UI（測試版）

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

工具窗口的垂直拆分

WebStorm 2023.1 支持分割和排列工具窗口，從而同時(shí)顯示兩個(gè)工具窗口。將工具窗口圖標(biāo)從邊欄拖動(dòng)到分隔符下方。或者可以右鍵點(diǎn)擊圖標(biāo)，使用 Move to（移至）操作為工具窗口分配新位置。

緊湊模式

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

macOS 上的項(xiàng)目標(biāo)簽頁

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

重新設(shè)計(jì)了 Run（運(yùn)行）微件

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

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

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

用戶體驗(yàn)

全 IDE 縮放

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

記住每個(gè)工具窗口的大小

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

機(jī)器學(xué)習(xí)驅(qū)動(dòng)的類搜索

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

還原舊的復(fù)制剪切粘貼行為的選項(xiàng)

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

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

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

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

WebStorm 2023.1 包含一個(gè)新通知，會(huì)在啟用 Microsoft Defender 實(shí)時(shí)保護(hù)時(shí)觸發(fā)。WebStorm 會(huì)建議將特定文件夾添加到 Defender 的排除項(xiàng)列表中，因?yàn)檫@些防病毒檢查會(huì)顯著降低 IDE 的速度。

版本控制

針對(duì) GitHub 改進(jìn)了代碼審查工作流

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