WebStorm2022官方版 v2022.3.4

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

JetBrains WebStorm2022新特性

一、框架和技術(shù)

1、更新了項(xiàng)目模板

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

2、Vitest 支持

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

3、Vue 更新

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

4、Vue 的新代碼段

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

5、Angular 模板中的類(lèi)型縮小

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

6、關(guān)于 Svelte 支持的更新

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

7、對(duì)新 CSS 功能的支持

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

二、JavaScript 和 TypeScript

1、針對(duì) JavaScript 和 TypeScript 的 Code Vision

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

2、更出色的 monorepos 和 TypeScript 體驗(yàn)

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

3、字母排序意圖

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

三、用戶(hù)體驗(yàn)

1、通過(guò)設(shè)置使用新 UI 測(cè)試版

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

2、將工具窗口?？康礁?dòng)編輯器標(biāo)簽頁(yè)的選項(xiàng)

為了讓您可以更輕松地安排工作空間并在多個(gè)顯示器上與 WebStorm 交互，我們實(shí)現(xiàn)了將工具窗口拖出主窗口并將其?？康礁?dòng)編輯器標(biāo)簽頁(yè)的選項(xiàng)。

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

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

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

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

5、改進(jìn)了 Tips of the Day（每日小技巧）

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

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

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

7、針對(duì)書(shū)簽的 UI 改進(jìn)

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

四、編輯器

1、改進(jìn)了復(fù)制剪切粘貼行為

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

2、意圖操作預(yù)覽

我們添加了新功能來(lái)預(yù)覽和解釋?xiě)?yīng)用所選操作會(huì)發(fā)生什么。 打開(kāi)可用意圖操作列表并將鼠標(biāo)懸停在不同選項(xiàng)上時(shí)會(huì)顯示預(yù)覽。 在意圖操作列表打開(kāi)時(shí)，您可以按 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 將高亮顯示被認(rèn)為易受攻擊的軟件包，并在可用時(shí)建議修正。

4、針對(duì) YAML 的編輯改進(jìn)

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

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

1、針對(duì) Docker 的改進(jìn)

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

2、為 GitHub 和 Space 重新設(shè)計(jì)了 Review list（審查列表）

我們重做了 Review list（審查列表）UI，幫助減少認(rèn)知負(fù)擔(dān)并清晰提供有關(guān)請(qǐng)求的最重要信息。 其中，我們還確保在所有受支持的審查平臺(tái)上保持一致的外觀。

3、處理 WSL2 中的項(xiàng)目的新方式

WebStorm 2022.3 帶來(lái)了處理在 WSL2 文件系統(tǒng)中運(yùn)行的項(xiàng)目的替代方式。 您可以直接在 WSL2 中啟動(dòng) IDE 后端，而不是在 Windows 上運(yùn)行完整的 IDE。 然后，您可以像在 WebStorm 中使用遠(yuǎn)程開(kāi)發(fā)時(shí)連接到遠(yuǎn)程機(jī)器一樣連接到它。

4、針對(duì) HTTP 客戶(hù)端的新功能

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

5、針對(duì) HTTP 客戶(hù)端的代碼樣式改進(jìn)

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

webstorm2022官方版怎么設(shè)置中文？

1、在本站解壓得到WebStorm2022中文版安裝包，安裝運(yùn)行后默認(rèn)為英文，選擇"Plugins"，直接快捷鍵“Ctrl+ALT+S”打開(kāi)“Settings -> Plugins”進(jìn)行設(shè)置；

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

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

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

webstorm2022怎么插入圖片？

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

2、HTML 圖像是通過(guò) <img> 標(biāo)簽進(jìn)行定義的。因此，你在要使用這張圖片的時(shí)候，只需要輸入以下代碼即可

軟件亮點(diǎn)

一、JavaScript和TypeScript

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

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

二、構(gòu)架

1、對(duì)Angular應(yīng)用程序的新檢查

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

2、Angular項(xiàng)目中的導(dǎo)航更容易

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

3、改進(jìn)了對(duì)Vue應(yīng)用程序中TypeScript的支持

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

4、React鉤子的提取方法

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

5、改進(jìn)了道具的完成

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

三、HTML和樣式表

1、更新文檔

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

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

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

3、對(duì)CSS模塊的Camel案例支持

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

4、提取CSS變量

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

四、測(cè)試

1、突出顯示測(cè)試中的失敗行

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

2、使用Cucumber和TypeScript進(jìn)行測(cè)試

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

五、工具

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

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

2、完成npm腳本

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

3、改進(jìn)了對(duì)短絨的支持

webstorm現(xiàn)在可以 在一個(gè)項(xiàng)目中為ESLint和TSLint運(yùn)行多個(gè)進(jìn)程，以確保它們?cè)趩蝹€(gè)項(xiàng)目和具有多個(gè)linter配置的項(xiàng)目中正常工作。

4、支持Docker Compose

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

5、依賴(lài)項(xiàng)的版本范圍工具提示

在的package.json，按命令/ Ctrl鍵和版本懸停的依賴(lài)關(guān)系，看看運(yùn)行的時(shí)候可以安裝什么版本范圍 npm install或yarn install。

六、IDE

1、新的UI主題

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

2、最近的位置彈出

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

3、將項(xiàng)目另存為模板

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

4、所選文件類(lèi)型的軟包裝

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

更新日志

v2022.3.4版本

新 UI 預(yù)覽、Vitest 支持、適用于 Vite 和 Next.js 的項(xiàng)目模板、針對(duì) JavaScript 和 TypeScript 的 Code Vision、適用于 Angular 模板的類(lèi)型縮小支持以及 Vue 更新。