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

下載WebStorm 2020.3

新功能和改進屬于以下類別：

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

外觀

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

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

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

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

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

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

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

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

使用標簽的改進

使用WebStorm 2020.3，我們使使用選項卡更加方便。

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

我們還實施了一個新的“Open in Right Split”行動。此操作將幫助您打開新文件，而不會丟失當前正在使用的文件。

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

使WebStorm默認打開特定文件

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

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

自定義多文件模板

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

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

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

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

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

框架和技術(shù)

Tailwind CSS支持

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

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

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

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

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

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

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

Vue.js的增強功能

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

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

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

Markdown編輯和預覽增強

使用WebStorm 2020.3，我們大大改善了使用.md文件的體驗。

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

每當您切換到自定義UI主題時，WebStorm都會自動更改預覽窗格的顏色。

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

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

全面支持pnpm

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

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

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

JavaScript和TypeScript

集成的TypeScript和問題工具窗口

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

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

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

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

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

改進的調(diào)試體驗

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

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

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

盡管您仍然可以通過這種方式添加Watches，但是在v2020.3中，我們通過添加嵌入式監(jiān)控解決了上述問題。現(xiàn)在，您可以將watch表達式綁定到代碼中與其相關(guān)的位置。為此，請在同一彈出窗口中單擊“Add as Inline Watch”。或者，您可以使用上下文菜單中的“Add Inline Watch”操作。

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

更好的字符串完成建議

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

工具類

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

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

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

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

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

改進了拼寫和語法檢查

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

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

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

您現(xiàn)在可以將HTTP請求導出到cURL。為此，請在HTTP請求編輯器中按Alt + Enter，然后選擇“Convert to cURL and copy to clipboard”。

WebStorm 2020.3還對LightEdit模式進行了一些改進，并能夠與其他人共享運行配置模板。

版本控制

支持Git暫存區(qū)

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

在此更新中，我們引入了對Git臨時區(qū)域的支持。要啟用它，請在“Preferences/Settings | Version Control | Git”中選中“Enable staging area”復選框。完成后，將禁用對更改列表的支持。

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

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

當您單擊Commit時，所有暫存的文件都將被提交。

改進分支機構(gòu)的工作

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

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

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

重新排列的VCS菜單

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

導航

快速文件預覽

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

更有用的導航欄

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

Search Everwhere功能更強大

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

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

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

今天的內(nèi)容就到這里，如果你想了解更多功能以及文章教程，點擊免費獲取！歡迎下載Webstorm體驗最新功能并在下方評論區(qū)分享您對該產(chǎn)品的想法。您的反饋意見可幫助我們在以后的文章教程中找到正確的方向，慧都作為JetBrains的正版代理商現(xiàn)WebStorm正版授權(quán)最低僅售529！