WebStorm 2020.3是本年度的最后一次重大更新！此更新包含許多期待已久的增強(qiáng)功能，包括對(duì)Tailwind CSS的支持，將IDE主題與操作系統(tǒng)設(shè)置同步的功能以及Git暫存。

下載WebStorm 2020.3

新功能和改進(jìn)屬于以下類別：

• 外觀：一個(gè)新的“Welcome”界面，可以將IDE主題與您的OS設(shè)置同步，改進(jìn)了使用選項(xiàng)卡的功能，默認(rèn)情況下可以使用WebStorm打開文件的選項(xiàng)，等等。
• 框架和技術(shù)：Tailwind CSS支持，根據(jù)使用情況創(chuàng)建React組件的能力，Vue.js的增強(qiáng)，對(duì)pnpm的全面支持等等。
• JavaScript和TypeScript：集成的TypeScript和problem工具窗口，使用CSS和HTML更好地格式化復(fù)雜的模板文字，改進(jìn)的調(diào)試體驗(yàn)，以及更好的字符串完成建議。
• 工具：支持我們的協(xié)作開發(fā)工具，有關(guān)WebStorm基礎(chǔ)知識(shí)的培訓(xùn)課程，更好的拼寫和語法檢查以及HTTP客戶端中的cURL轉(zhuǎn)換。
• 版本控制：Git暫存支持，重新排列的VCS菜單以及對(duì)使用分支的改進(jìn)。
• 導(dǎo)航：快速文件預(yù)覽，更有用的導(dǎo)航欄和更強(qiáng)大的“Search EverWhere”。

外觀

重做的歡迎屏幕和更快的初始設(shè)置

將繼續(xù)改善WebStorm的外觀。首先，更新了“welcome”界面。進(jìn)行此更改的主要目的是簡化IDE的初始設(shè)置，并使管理某些關(guān)鍵設(shè)置更加容易。讓我們看看有什么變化。

首次啟動(dòng)WebStorm時(shí)，將不再看到配置向?qū)?僅顯示“隱私策略”和“許可證”對(duì)話框。打開項(xiàng)目后，它們將立即顯示在右側(cè)，并且在右上角顯示“New Project, Open, Get from VCS”按鈕。

在“welocom”屏幕的左側(cè)，您會(huì)找到“Customize”和“Plugins”選項(xiàng)卡。使用“Customize”選項(xiàng)卡可以調(diào)整最常用的設(shè)置，例如IDE主題和字體。“Plugins”選項(xiàng)卡提供對(duì)可用插件列表的快速訪問，并允許您安裝它們。

最后，還有“ Learn WebStorm”選項(xiàng)卡。從此選項(xiàng)卡，您可以跳至我們的聯(lián)機(jī)幫助以及其他一些資源，例如WebStorm教育視頻和鍵盤映射參考卡。它還提供訪問交互式培訓(xùn)課程的權(quán)限。

IDE主題已與操作系統(tǒng)設(shè)置同步

涉及外觀的另一項(xiàng)改進(jìn)是能夠?qū)DE主題與操作系統(tǒng)設(shè)置同步。目前，此改進(jìn)僅適用于macOS和Windows用戶，但我們計(jì)劃稍后再將其實(shí)現(xiàn)。

要嘗試新功能，請(qǐng)轉(zhuǎn)到“Preferences/Settings | Appearance & Behavior | Appearance”，然后在其中選擇Sync with OS。單擊“Theme”下拉菜單旁邊的齒輪圖標(biāo)，以選擇首選的淺色和深色主題。

使用標(biāo)簽的改進(jìn)

使用WebStorm 2020.3，我們使使用選項(xiàng)卡更加方便。

首先，您可以通過將選項(xiàng)卡拖動(dòng)到所需位置并將其拖放到此處來拆分編輯器。選項(xiàng)卡的上下文菜單中的拆分操作仍然可用。

我們還實(shí)施了一個(gè)新的“Open in Right Split”行動(dòng)。此操作將幫助您打開新文件，而不會(huì)丟失當(dāng)前正在使用的文件。

最后，固定的選項(xiàng)卡現(xiàn)在帶有特殊圖標(biāo)標(biāo)記，并顯示在選項(xiàng)卡欄的開頭，因此您可以更快地找到它們。另外，如果您傾向于打開很多標(biāo)簽，則現(xiàn)在可以將所有固定的標(biāo)簽保留在單獨(dú)的行中。為此，請(qǐng)轉(zhuǎn)到“Preferences/Settings | Editor | General | Editor Tabs，然后勾選Show pinned tabs in a separate row。

使WebStorm默認(rèn)打開特定文件

現(xiàn)在，使WebStorm成為特定文件類型的默認(rèn)應(yīng)用程序非常簡單。轉(zhuǎn)到Preferences/Settings | Editor | File Types，然后單擊將Associate File Types with WebStorm。然后選擇要使用WebStorm打開的文件擴(kuò)展名，然后單擊“ OK”。

根據(jù)您的操作系統(tǒng)，可能需要重新啟動(dòng)計(jì)算機(jī)才能應(yīng)用更改。升級(jí)到較新版本的IDE時(shí)，所選文件擴(kuò)展名關(guān)聯(lián)將保持不變。

自定義多文件模板

我們已經(jīng)實(shí)現(xiàn)了添加自定義文件模板的功能，該模板可以一次創(chuàng)建多個(gè)文件。例如，當(dāng)您需要為其添加.js文件和測試文件時(shí)，這可能很方便。

要嘗試此新功能，請(qǐng)轉(zhuǎn)至“ Preferences/Settings | Editor | File and Code Templates”，單擊“+”創(chuàng)建一個(gè)新模板，然后單擊“+”旁邊的Create Child Template File圖標(biāo)。您會(huì)看到一個(gè)新節(jié)點(diǎn)出現(xiàn)在父文件下。

在“File name”字段中，您可以使用支持的語法指定用于生成文件名的模式及其路徑。

保存新模板后，您可以照常開始使用它。

其他值得注意的WebStorm外觀和感覺的改進(jìn)包括一個(gè)新的Reader模式，一個(gè)可供選擇的macOS鍵圖，項(xiàng)目視圖的 "全部展開 "按鈕，以及一個(gè)新的轉(zhuǎn)置字符的操作（按Shift+Shift和尋找轉(zhuǎn)置來嘗試）。

框架和技術(shù)

Tailwind CSS支持

對(duì)Tailwind CSS的支持是最期待已久的改進(jìn)之一，它終于登陸WebStorm！讓我們看看這如何幫助您更有效地使用這個(gè)流行的框架。

首先，您現(xiàn)在可以期望WebStorm在您的HTML文件中以及該@apply指令之后自動(dòng)完成Tailwind類。您還將看到偽類變體的完成建議。

如果將鼠標(biāo)懸停在HTML和CSS文件中的類上，則IDE將向您顯示結(jié)果CSS的預(yù)覽。在“Documentation”彈出窗口（F1 / Ctrl + Q）的幫助下自動(dòng)完成代碼時(shí)，您也可以看到此預(yù)覽。

除此之外，WebStorm現(xiàn)在支持您使用tailwind.config.js文件進(jìn)行的自定義。IDE將分析這些文件，并根據(jù)您的自定義提供完成功能。例如，如果使用新顏色定義自定義主題，則在完成彈出窗口中將看到帶有自定義顏色名稱的新生成的類。

到此為止，有關(guān)Tailwind CSS支持的全部內(nèi)容。

根據(jù)用法創(chuàng)建一個(gè)React組件

你可能知道，WebStorm會(huì)不斷檢查引用的變量和字段是否有效。當(dāng)它們無效時(shí)，IDE可以建議為你創(chuàng)建相關(guān)的代碼結(jié)構(gòu)。現(xiàn)在，它也可以為React組件做這件事。在一個(gè)未解決的組件處放置護(hù)理符，按Alt+Enter鍵，然后選擇相應(yīng)的檢查。

Vue.js的增強(qiáng)功能

對(duì)于此版本，我們沒有計(jì)劃對(duì)Vue支持進(jìn)行任何大的更新，但仍有一些東西可以幫助您更好地使用Vue。

首先，我們解決了與Vue 3相關(guān)的許多問題。例如，WebStorm現(xiàn)在支持新引入的< script setup >語法。

 除此之外，我們還使IDE在Vue項(xiàng)目中正確地應(yīng)用了ESLint代碼樣式規(guī)則，并且改進(jìn)了與TypeScript語言服務(wù)的集成。

Markdown編輯和預(yù)覽增強(qiáng)

使用WebStorm 2020.3，我們大大改善了使用.md文件的體驗(yàn)。

現(xiàn)在，您可以重新格式化.md文件的內(nèi)容，以符合流行的Markdown樣式指南。要做到這一點(diǎn)，按??L/Ctrl + Alt + L。您可以在“ Preferences/Settings | Editor | Code Style | Markdown”中修改相關(guān)的代碼樣式設(shè)置。

每當(dāng)您切換到自定義UI主題時(shí)，WebStorm都會(huì)自動(dòng)更改預(yù)覽窗格的顏色。

我們還添加了對(duì)Mermaid.js（一種流行的圖表繪制工具）的支持。您可以在“Preferences/Settings | Languages & Frameworks | Markdown”中將其打開。

最后，如果單擊預(yù)覽窗格右上角的“Auto-Scroll Preview”按鈕，則該窗格將同步以與編輯器一起滾動(dòng)。

全面支持pnpm

WebStorm現(xiàn)在完全支持PNPM包管理器，以NPM和紗線一起。在過去的一年中，我們一直在逐步增加對(duì)pnpm支持的改進(jìn)。使用v2020.3，我們已經(jīng)完成了畫龍點(diǎn)睛的工作。

如果打開帶有pnpm-lock文件的項(xiàng)目并在計(jì)算機(jī)上安裝了pnpm，則WebStorm會(huì)自動(dòng)將此項(xiàng)目的程序包管理器更改為pnpm。另外，在“Preferences/Settings | Languages and Frameworks | Node.js and NPM”下的程序包管理器列表中現(xiàn)在有一個(gè)專用的pnpm選項(xiàng)。v2020.2中已經(jīng)引入了其他功能，例如運(yùn)行和調(diào)試腳本的功能或“run 'pnpm install'警告”。

這就是對(duì)框架和技術(shù)的最大改進(jìn)。還添加了對(duì)多個(gè)Webpack配置的基本支持，并使ESLint配置更加靈活。

JavaScript和TypeScript

集成的TypeScript和問題工具窗口

我們已經(jīng)將TypeScript語言服務(wù)集成到“Problem”工具窗口中，并刪除了專用的TypeScript工具窗口。我們進(jìn)行了此更改，以幫助您從一個(gè)地方查看代碼中的所有關(guān)鍵問題。現(xiàn)在，可以在“Problem”工具窗口的“Project Errors”選項(xiàng)卡下找到該服務(wù)報(bào)告的所有錯(cuò)誤。

要訪問以前在TypeScript工具窗口中可用的按鈕，可以在狀態(tài)欄上使用新的TypeScript小部件。從那里，您可以編譯代碼，重新啟動(dòng)語言服務(wù)，然后跳轉(zhuǎn)到TypeScript設(shè)置。

使用CSS和HTML更好地格式化模板文字

隨著樣式化組件和lit-html之類的庫變得越來越流行，現(xiàn)在JavaScript模板文字中編寫了很多CSS和HTML代碼。JavaScript代碼中的這些塊也可以使用JavaScript進(jìn)行表達(dá)式插值。

從v2020.3開始，WebStorm將為其中包含JavaScript的多行CSS和HTML塊正確支持JavaScript的代碼格式。當(dāng)您在這些更復(fù)雜的模板文字中添加代碼或重新格式化代碼時(shí)，IDE會(huì)正確縮進(jìn)。

改進(jìn)的調(diào)試體驗(yàn)

您可能已經(jīng)知道，在斷點(diǎn)處停止執(zhí)行時(shí)，WebStorm會(huì)在變量用法旁邊顯示提示您變量值。為了使這些提示更有用，我們引入了一些改進(jìn)。

首先，內(nèi)聯(lián)提示現(xiàn)在是交互式的。您可以單擊它們以查看屬于該變量的所有字段。您還可以通過單擊Set Value來更改下拉列表中的變量值。

另一個(gè)更新會(huì)影響watches。以前，您的watches保存在“Debug”工具窗口的“Variables”選項(xiàng)卡下。當(dāng)您單步執(zhí)行代碼并移至其他上下文時(shí)，手表可能會(huì)變成錯(cuò)誤。

盡管您仍然可以通過這種方式添加Watches，但是在v2020.3中，我們通過添加嵌入式監(jiān)控解決了上述問題。現(xiàn)在，您可以將watch表達(dá)式綁定到代碼中與其相關(guān)的位置。為此，請(qǐng)?jiān)谕粡棾龃翱谥袉螕簟?em>Add as Inline Watch”。或者，您可以使用上下文菜單中的“Add Inline Watch”操作。

最后，我們將Step Into和Smart Step Into執(zhí)行操作合并為一個(gè)操作。

更好的字符串完成建議

在JavaScript和TypeScript中使用字符串時(shí)，您會(huì)看到代碼完成方面的微小改進(jìn)。現(xiàn)在，IDE會(huì)建議項(xiàng)目中其他字符串中使用的內(nèi)容。使用字符串參數(shù)時(shí)，這可能很方便。

工具類

支持我們的協(xié)作開發(fā)工具

WebStorm 2020.3支持Code With Me（EAP），這是我們用于協(xié)作開發(fā)和結(jié)對(duì)編程的新工具。使用此工具，您可以與其他人共享項(xiàng)目，以便可以實(shí)時(shí)一起處理它們。要嘗試使用Code With Me，請(qǐng)從“Preferences / Settings | Plugins”中安裝相應(yīng)的插件。

內(nèi)置的WebStorm基礎(chǔ)培訓(xùn)課程

從現(xiàn)在開始，WebStorm將與學(xué)習(xí)插件捆綁在一起，并將包括一個(gè)交互式培訓(xùn)課程。本課程可以幫助您學(xué)習(xí)如何執(zhí)行各種常見任務(wù)，例如重構(gòu)代碼，瀏覽項(xiàng)目等等。您可以在“Welcom”屏幕上的“Learn WebStorm”選項(xiàng)卡下找到它，也可以轉(zhuǎn)到“Help | IDE Features Trainer”。從主菜單中選擇。

該課程分為幾個(gè)模塊，每個(gè)模塊都有許多課程，教您如何執(zhí)行特定任務(wù)。無需遍歷所有課程–您可以選擇只選擇最相關(guān)的課程。

改進(jìn)了拼寫和語法檢查

現(xiàn)在，您可以更快地解決語法和拼寫問題-將鼠標(biāo)懸停在問題上，將彈出一個(gè)帶有說明和建議修復(fù)程序的彈出窗口。要查看當(dāng)前上下文中可用操作的完整列表，請(qǐng)單擊更多操作或按Alt + Enter。

我們還更新了語法檢查引擎的新版本，以支持更多的語言和更高質(zhì)量的語法檢查。

HTTP客戶端中的cURL轉(zhuǎn)換

您現(xiàn)在可以將HTTP請(qǐng)求導(dǎo)出到cURL。為此，請(qǐng)?jiān)贖TTP請(qǐng)求編輯器中按Alt + Enter，然后選擇“Convert to cURL and copy to clipboard”。

WebStorm 2020.3還對(duì)LightEdit模式進(jìn)行了一些改進(jìn)，并能夠與其他人共享運(yùn)行配置模板。

版本控制

支持Git暫存區(qū)

注意：此功能僅適用于“提交工具”窗口。

在此更新中，我們引入了對(duì)Git臨時(shí)區(qū)域的支持。要啟用它，請(qǐng)?jiān)?em>“Preferences/Settings | Version Control | Git”中選中“Enable staging area”復(fù)選框。完成后，將禁用對(duì)更改列表的支持。

如果返回到提交UI，您將看到它包含已暫存和未暫存的文件。準(zhǔn)備暫存文件時(shí)，只需單擊文件旁邊的“+”圖標(biāo)。該文件將顯示在“Git”節(jié)點(diǎn)下。

您也可以直接從gutter或使用“Show Diff”功能進(jìn)行更改。

當(dāng)您單擊Commit時(shí)，所有暫存的文件都將被提交。

改進(jìn)分支機(jī)構(gòu)的工作

此EAP涉及分支機(jī)構(gòu)的多項(xiàng)增強(qiáng)功能。首先，IDE現(xiàn)在會(huì)自動(dòng)更正新分支名稱中不可接受的符號(hào)，從而幫助您創(chuàng)建符合可接受格式的分支。

其次，IDE現(xiàn)在將向您顯示當(dāng)前所選分支的所有可用操作，就像其他分支一樣。

最后，對(duì)于遠(yuǎn)程分支機(jī)構(gòu)，我們已經(jīng)改名為合并到當(dāng)前和再次基于當(dāng)前到選定的行動(dòng)作為拉進(jìn)當(dāng)前的使用合并和使用衍合拉入電流，分別。

重新排列的VCS菜單

該VCS在主菜單下組現(xiàn)在正在使用的版本控制系統(tǒng)而得名。我們進(jìn)行了此更改，因?yàn)橄馟it這樣的術(shù)語比VCS更常用，并且對(duì)于更多的人應(yīng)該更清楚。我們還重新排列了主菜單中Git下的項(xiàng)目，以使最常用的Git操作更易于訪問。

導(dǎo)航

快速文件預(yù)覽

現(xiàn)在，無論何時(shí)在“Project”視圖中選擇文件，都可以在編輯器中預(yù)覽文件！要啟用此功能，請(qǐng)?jiān)凇?em>Project”視圖中單擊齒輪圖標(biāo)，然后選擇“Enable Preview Tab”和“Open Files with Single Click”。如果您開始編輯以這種方式打開的文件，它將不再是預(yù)覽，而是一個(gè)普通文件。

更有用的導(dǎo)航欄

在導(dǎo)航欄，快速替代工程工具窗口，是最方便的導(dǎo)航功能之一的WebStorm可用。它使您可以瀏覽項(xiàng)目的結(jié)構(gòu)并打開特定的文件。從v2020.3開始，導(dǎo)航欄還將使您跳至JavaScript和TypeScript文件中的特定代碼元素。

Search Everwhere功能更強(qiáng)大

使用v2020.3，Shift + Shift彈出窗口將變得更加有用。首先，您現(xiàn)在可以從中進(jìn)行一些數(shù)學(xué)運(yùn)算，類似于在計(jì)算機(jī)上使用系統(tǒng)范圍內(nèi)的搜索進(jìn)行數(shù)學(xué)運(yùn)算的方式。結(jié)果將顯示在彈出窗口中。

彈出窗口還將允許您查找Git數(shù)據(jù)，包括有關(guān)分支和提交的信息。

除此之外，所有發(fā)現(xiàn)現(xiàn)在都基于與搜索查詢的相關(guān)性而不是其類型進(jìn)行分組。

今天的內(nèi)容就到這里，如果你想了解更多功能以及文章教程，點(diǎn)擊免費(fèi)獲取！歡迎下載Webstorm體驗(yàn)最新功能并在下方評(píng)論區(qū)分享您對(duì)該產(chǎn)品的想法。您的反饋意見可幫助我們?cè)谝院蟮奈恼陆坛讨姓业秸_的方向，慧都作為JetBrains的正版代理商現(xiàn)WebStorm正版授權(quán)最低僅售529！