WebStorm2022官方版 v2022.3.4

WebStorm2022官方版是由JetBrains公司開發(fā)的一款JavaScript開發(fā)工具，被廣大用戶稱為最好用的Web前端開發(fā)神器。軟件對JavaScript，TypeScript和CSS支持更好，改進了Vue.js的體驗，并為Jest集成增加了新功能。不僅如此，webstorm2022還集成了高級調(diào)試器，使的開發(fā)人員能夠快速的對程序進行調(diào)試和開發(fā)。同時，我們還可以使用JavaScript解構(gòu)，通過解構(gòu)，用戶能夠使用非常簡單的語法將數(shù)組和對象中的值解壓縮到變量中。WebStorm的新重構(gòu)和意圖可以幫助您輕松地將解構(gòu)引入 JavaScript或TypeScript代碼，使用起來非常的方便，有需要的朋友快來下載體驗吧?。?！

JetBrains WebStorm2022新特性

一、框架和技術

1、更新了項目模板

我們重做了 WebStorm 歡迎屏幕中的 New Project（新建項目）向?qū)А?在 v2022.2 中，我們移除了適用于 AngularJS、Cordova 和 Meteor 的項目模板。 在此版本中，我們添加了適用于 Vite 和 Next.js 的新項目模板，并更新了 Vue 模板，使其符合最新標準。

2、Vitest 支持

WebStorm now supports Vitest, a Vite-native unit test framework! 您可以用所有您期望的主要方式運行、重新運行和調(diào)試測試，包括通過裝訂區(qū)域圖標。 此外，監(jiān)視模式在所有測試場景下默認均已啟用。 在監(jiān)視模式下還支持快照測試和覆蓋率，從而在編碼時為您提供幾乎即時的覆蓋率反饋。

3、Vue 更新

WebStorm 現(xiàn)在可以處理未解析的導入，并為導入 Vue 組件提供建議。 我們也已支持 props 析構(gòu)語法，改進了針對 Vue 庫組件 props 的代碼補全和類型檢查行為，并修正了幾個 Nuxt 3 問題。

4、Vue 的新代碼段

此版本中，還有一項針對 Vue 的改進值得仔細研究 – 新代碼段，也就是 WebStorm 中的實時模板。 您可以使用它們更快添加常見構(gòu)造，例如 script setup 或 export default。 轉(zhuǎn)到 Preferences / Settings | Editor | Live Templates（偏好設置/設置 | 編輯器 | 實時模板），展開 Vue 部分即可瀏覽可用代碼段。

5、Angular 模板中的類型縮小

我們在 Angular 模板中添加了對類型縮小的支持，這將提供更精確的類型信息和更好的代碼補全建議。 此外，WebStorm 現(xiàn)在會從全局搜索中排除 .angular 緩存文件夾，幫助提供更好的搜索結(jié)果。

6、關于 Svelte 支持的更新

對 Svelte 支持（作為單獨插件提供）的改進現(xiàn)在將隨新 IDE 構(gòu)建一起推出，就像我們對 Angular 和 Vue 的支持一樣。 這將幫助我們避免不兼容版本范圍的問題并更快獲得反饋。

7、對新 CSS 功能的支持

WebStorm 2022.3 支持新的 CSS 功能，例如 @supports at 規(guī)則，它將語句塊與 @supports 條件相關聯(lián)。 視口單元、范圍媒體查詢、容器查詢、級聯(lián)層和顏色修改函數(shù)現(xiàn)在也已獲得支持。

二、JavaScript 和 TypeScript

1、針對 JavaScript 和 TypeScript 的 Code Vision

來自 Rider 和 IntelliJ IDEA 的 Code Vision 功能現(xiàn)已加入 WebStorm！ Code Vision 可以收集類型和類型成員的各種指標，并在聲明附近顯示此信息。 這將使代碼中各種類、方法、類型別名和接口的用法更易跟蹤。 轉(zhuǎn)到 Preferences / Settings | Editor | Inlay Hints（偏好設置/設置 | 編輯器 | 嵌入提示）配置 Code Vision。

2、更出色的 monorepos 和 TypeScript 體驗

我們?yōu)樵?WebStorm 中處理 monorepos 和 TypeScript 發(fā)布了多個修正。 導航、自動導入和重命名重構(gòu)功能都將更可靠地運行。 這適用于所有主流軟件包管理器，包括 npm、Yarn 和 pnpm。

3、字母排序意圖

WebStorm 2022.3 包含按字母順序?qū)?JavaScript 和 TypeScript 對象進行排序的新意圖。 運行此意圖時，它將按字母順序重新格式化對象內(nèi)所有屬性的代碼。 要使用此意圖，首先高亮顯示方法中的對象，按 Alt+Enter，然后選擇 Sort properties alphabetically（按字母順序?qū)傩耘判颍?

三、用戶體驗

1、通過設置使用新 UI 測試版

今年早些時候，我們宣布了 JetBrains IDE 中新 UI 的封閉預覽計劃。 對于這第一步，我們的目標是向有限數(shù)量的用戶提供重做的 IDE 外觀。 我們邀請您在 Preferences / Settings | Appearance & Behavior / New UI（偏好設置/設置 | 外觀與行為/新 UI）中切換到新 UI 并告訴我們您的想法。

2、將工具窗口?？康礁泳庉嬈鳂撕烅摰倪x項

為了讓您可以更輕松地安排工作空間并在多個顯示器上與 WebStorm 交互，我們實現(xiàn)了將工具窗口拖出主窗口并將其?？康礁泳庉嬈鳂撕烅摰倪x項。

3、改進了 Search Everywhere（隨處搜索）結(jié)果

Search Everywhere（隨處搜索）結(jié)果列表背后的算法經(jīng)過微調(diào)，行為更加可預測和準確。 IDE 將凍結(jié)出現(xiàn)的第一個搜索結(jié)果，并且不會在找到更多選項時對其重新排序。 此外，ML 排名現(xiàn)在對 Files（文件）標簽頁啟用，可以提高查找結(jié)果的準確性。

4、新的 Settings Sync（設置同步）解決方案

新的 Settings Sync（設置同步）插件現(xiàn)在可用于 WebStorm。 新的解決方案能夠同步來自平臺、捆綁插件和一些第三方插件的大部分可共享設置。 請注意，我們將停止支持舊的 IDE Settings Sync（IDE 設置同步）插件并取消捆綁 Settings Repository（設置倉庫）。 

5、改進了 Tips of the Day（每日小技巧）

WebStorm 的內(nèi)置學習工具 Tip of the Day（每日小技巧）得到微調(diào)。 我們添加了技巧評分功能，并重做了技巧顯示方式的算法。 這應該使它們與您的 IDE 體驗和您手頭的項目更加相關。

6、適用于 Windows 和 Linux ARM64 的安裝程序 測試版

現(xiàn)在，可以在帶有 ARM64 處理器的 Windows 和 Linux 機器上運行 WebStorm。 IDE 安裝程序處于測試版階段，網(wǎng)站和 JetBrains Toolbox App 均提供 Windows 版，但 Linux 版僅可從網(wǎng)站獲得。

7、針對書簽的 UI 改進

我們?yōu)?Bookmarks（書簽）功能實現(xiàn)了多項 UI 改進。 例如，右鍵點擊標簽頁并從上下文菜單中選擇 Bookmarks（書簽）即可從編輯器標簽頁為文件添加書簽。

四、編輯器

1、改進了復制剪切粘貼行為

我們重做了粘貼操作 (Ctrl+V) 的行為。 現(xiàn)在，如果在沒有選擇代碼的情況下復制 (Ctrl+C) 或剪切 (Ctrl+X) 一行，粘貼操作會將剪貼板的內(nèi)容添加到當前行上方，而不是像舊版本一樣添加到文本光標處。 您可以在 Preferences / Settings | Advanced Settings（偏好設置/設置 | 高級設置）中禁用此行為。

2、意圖操作預覽

我們添加了新功能來預覽和解釋應用所選操作會發(fā)生什么。 打開可用意圖操作列表并將鼠標懸停在不同選項上時會顯示預覽。 在意圖操作列表打開時，您可以按 Ctrl+Q 禁用此功能。

3、軟件包的漏洞檢查器

WebStorm 2022.3 will detect vulnerabilities in the packages used in your projects by checking the packages against the Checkmarx SCA Database and the National Vulnerability Database. IDE 將高亮顯示被認為易受攻擊的軟件包，并在可用時建議修正。

4、針對 YAML 的編輯改進

新增的快速修復可以通過 YAML 文件中的注釋禁止檢查，包括 docker-compose.yml、Kubernetes 文件和 OpenAPI 規(guī)范。 我們還引入了一個方便的選項，用于折疊組成 3 行或更多行的塊并以 # 開頭的多行注釋 – 使用注釋左側(cè)的加號和減號圖標。

五、集成式開發(fā)者工具

1、針對 Docker 的改進

WebStorm 現(xiàn)已支持連接到 WSL 中運行的 Docker。 此外，還有新增的 Pull Docker image（拉取 Docker 鏡像）意圖、對 .dockerignore 文件和 heredoc 語法的完全支持，以及使用 Docker 上下文設置 Docker 連接的功能。

2、為 GitHub 和 Space 重新設計了 Review list（審查列表）

我們重做了 Review list（審查列表）UI，幫助減少認知負擔并清晰提供有關請求的最重要信息。 其中，我們還確保在所有受支持的審查平臺上保持一致的外觀。

3、處理 WSL2 中的項目的新方式

WebStorm 2022.3 帶來了處理在 WSL2 文件系統(tǒng)中運行的項目的替代方式。 您可以直接在 WSL2 中啟動 IDE 后端，而不是在 Windows 上運行完整的 IDE。 然后，您可以像在 WebStorm 中使用遠程開發(fā)時連接到遠程機器一樣連接到它。

4、針對 HTTP 客戶端的新功能

HTTP 客戶端現(xiàn)在支持在請求之前執(zhí)行的腳本塊。 您可以在請求執(zhí)行之前生成一些數(shù)據(jù)，并使用變量將其放入最終請求。 WebStorm 現(xiàn)在還提供 сrypto API，使代碼能夠計算 HTTP 請求的 md5 或 sha1 哈希值。

5、針對 HTTP 客戶端的代碼樣式改進

HTTP 客戶端現(xiàn)在為具有長 URL 的請求提供了更好的格式設置選項。 您也可以使用 Put query parameters on separate lines（將查詢形參置于單獨的行中）意圖操作，將查詢拆分成不同行中的小片段。 轉(zhuǎn)到 Preferences / Settings | Editor | Code Style | HTTP Request | Wrapping and Braces（偏好設置/設置 | 編輯器 | 代碼樣式 | HTTP 請求 | 換行和大括號）即可控制有關 HTTP 請求格式設置的偏好設置。

webstorm2022官方版怎么設置中文？

1、在本站解壓得到WebStorm2022中文版安裝包，安裝運行后默認為英文，選擇"Plugins"，直接快捷鍵“Ctrl+ALT+S”打開“Settings -> Plugins”進行設置；

2、選擇“marketplace”接著在輸入框中輸入“Chinese”后即可找到中文語言包點擊Install安裝；

3、下載完成后點擊“restart ide”——“restart”，之后重啟軟件；

4、這樣就可以得到中文版的WebStorm2022了，已經(jīng)可以免費使用了。

webstorm2022怎么插入圖片？

1、我們可以點擊右鍵，然后出現(xiàn)Reveal In Finder 然后進到文件夾所在地方，把你要導入的文件往工程里一拽，即可。

2、HTML 圖像是通過 <img> 標簽進行定義的。因此，你在要使用這張圖片的時候，只需要輸入以下代碼即可

軟件亮點

一、JavaScript和TypeScript

1、使用Promise將函數(shù)轉(zhuǎn)換為async / await

您可以自動更改返回Promise的函數(shù)，.then()并 .catch()調(diào)用使用async / await語法的異步函數(shù)。只需在功能名稱上按Alt-Enter，然后選擇轉(zhuǎn)換為異步功能。這不僅可以在TypeScript文件中實現(xiàn)，還可以在JavaScript和Flow中實現(xiàn)。

二、構(gòu)架

1、對Angular應用程序的新檢查

對于Angular應用程序，webstorm 添加了17項新檢查，可幫助您在鍵入時檢測應用程序中的Angular特定錯誤，并建議快速修復。這些檢查在TypeScript和模板文件中都有效，并檢查綁定，指令，組件和許多其他內(nèi)容的使用。

2、Angular項目中的導航更容易

在Angular應用程序中，您現(xiàn)在可以使用相關符號...彈出窗口(Ctrl-Cmd-Up / Ctrl + Alt + Home)在不同的組件文件(如TypeScript，模板，樣式和測試文件)之間快速切換。在TypeScript文件中，彈出窗口還將列出導入此文件的所有符號。

3、改進了對Vue應用程序中TypeScript的支持

webstorm現(xiàn)在使用TypeScript語言服務以及對.vue文件中任何TypeScript代碼的自己的TypeScript支持。這意味著您現(xiàn)在可以獲得更準確的類型檢查和類型信息，您將能夠使用服務提供的快速修復程序，并在TypeScript工具窗口中查看當前文件中的所有TypeScript錯誤。

4、React鉤子的提取方法

該提取方法重構(gòu)現(xiàn)在與當?shù)氐墓δ芎褪褂媒鈽?gòu)的返回值，使得它非常適合提取自定義作出反應掛鉤。

5、改進了道具的完成

webstorm現(xiàn)在為使用擴展運算符合并的React props提供了更好的代碼完成。

三、HTML和樣式表

1、更新文檔

CSS屬性和HTML標記及屬性的文檔(F1)現(xiàn)在顯示有關MDN的瀏覽器支持的最新描述和信息，以及指向完整MDN文章的鏈接。

2、CSS的瀏覽器兼容性檢查

要檢查目標瀏覽器版本是否支持您使用的所有CSS屬性，可以在首選項中啟用新的 瀏覽器兼容性檢查。

3、對CSS模塊的Camel案例支持

如果在項目中使用CSS模塊，JavaScript文件中的類的代碼完成現(xiàn)在將建議帶有破折號的類名的駝峰版本。

4、提取CSS變量

使用新的Extract CSS變量重構(gòu)，您可以使用語法將當前.css文件中值的所有用法替換 為變量var(--var-name)。

四、測試

1、突出顯示測試中的失敗行

當您使用Jest，Karma，Mocha或Protractor運行測試并且某些測試失敗時，您現(xiàn)在可以在編輯器中看到問題發(fā)生的位置。IDE將使用堆棧跟蹤中的信息并突出顯示失敗的代碼。在懸停時，您將看到來自測試運行器的錯誤消息，您可以立即開始調(diào)試測試。

2、使用Cucumber和TypeScript進行測試

使用Cucumber和TypeScript?現(xiàn)在，您可以跳到從步驟.feature文件 到它們的定義中 的.ts文件中使用速戰(zhàn)速決(和產(chǎn)生缺定義Alt-Enter組合)。

五、工具

1、新的調(diào)試器控制臺

在JavaScript和Node.js調(diào)試工具窗口中使用新的，改進的交互式調(diào)試器控制臺！它現(xiàn)在使用樹視圖顯示對象，它支持使用CSS設置日志消息樣式并使用console.group()和對它們進行分組console.groupEnd()。您還可以過濾掉任何類型的日志消息

2、完成npm腳本

將新腳本添加到package.json文件時，WebStorm現(xiàn)在會為已安裝的軟件包提供的可用命令提供建議。鍵入后 node，IDE將建議文件夾和文件名。輸入后npm run，您將看到當前文件中定義的任務列表。

3、改進了對短絨的支持

webstorm現(xiàn)在可以 在一個項目中為ESLint和TSLint運行多個進程，以確保它們在單個項目和具有多個linter配置的項目中正常工作。

4、支持Docker Compose

如果使用Docker測試Node.js應用程序，現(xiàn)在可以使用Docker Compose文件中描述的配置從IDE 輕松運行和調(diào)試應用程序

5、依賴項的版本范圍工具提示

在的package.json，按命令/ Ctrl鍵和版本懸停的依賴關系，看看運行的時候可以安裝什么版本范圍 npm install或yarn install。

六、IDE

1、新的UI主題

您現(xiàn)在可以在WebStorm中使用新的豐富多彩的UI主題作為插件。選擇 深紫色，灰色和 青色光主題，或創(chuàng)建自己的主題。

2、最近的位置彈出

在最近的位置彈出(Cmd的移-E / 按Ctrl + Shift + E)是一種新的方式 瀏覽各地的項目。它顯示了最近在編輯器中打開的所有文件和代碼行的列表。您可以開始鍵入以過濾結(jié)果并跳轉(zhuǎn)到您需要的代碼。

3、將項目另存為模板

通過“ 工具”菜單中的新操作“另存為模板” ，您現(xiàn)在可以使用項目作為在IDE歡迎屏幕上創(chuàng)建新項目的基礎。

4、所選文件類型的軟包裝

您現(xiàn)在可以在編輯器中為特定文件類型啟用軟包裝。為此，請打開“首選項/設置”| 編輯| 常規(guī)并在軟包裝文件字段中指定文件類型。

更新日志

v2022.3.4版本

新 UI 預覽、Vitest 支持、適用于 Vite 和 Next.js 的項目模板、針對 JavaScript 和 TypeScript 的 Code Vision、適用于 Angular 模板的類型縮小支持以及 Vue 更新。