WebStorm2021是一款專業的HTML編輯工具，使用該軟件可以幫助用戶更加方便快捷地開發各種web前端，支持使用html語言等程序員們熟知的開發語言。新版對Javascript，TypeScript和CSS支持更好，改進了Vue.js的體驗，并為Jest集成增加了新功能。

新增功能

【外觀】

1、新的歡迎屏幕

我們更新了歡迎屏幕！ 您不僅可以從歡迎屏幕中打開和創建項目，還可以調整最常用的設置，如 IDE 主題和字體。

2、IDE 主題已與操作系統設置同步

現在，您可以將 WebStorm 主題與 macOS 和 Windows 設置同步。 您只需轉到 Preferences / Settings | Appearance & Behavior | Appearance | Theme，然后選擇 Sync with OS 選項。 點擊 Sync with OS 旁邊的齒輪圖標來選擇您的首選主題。 我們也計劃為 Linux 用戶實現此功能。

3、改進了選項卡的使用

在 v2020.3 中，我們讓您能夠更方便地使用選項卡。 現在，您可以通過拖放選項卡或使用新的 Open in Right Split 操作來拆分編輯器。 此外，固定的選項卡現在以特殊圖標標記，并顯示在選項卡欄的開頭，以便您更快地找到它們。

4、閱讀器模式

WebStorm 具有一種新模式，可讓您的庫和只讀文件可讀性更強。 進入此模式可呈現注釋、啟用字體連字等等。

5、多文件模板

我們已經實現了添加自定義文件模板的功能，這些模板可一次創建多個文件。 例如，當您需要添加 .js 文件和測試文件時，這會非常方便。

6、使用 WebStorm 打開文件

現在，使用 WebStorm 在默認情況下打開特定文件類型非常簡單。 轉到 Preferences / Settings | Editor | File Types 并點擊 Associate File Types with WebStorm 按鈕。

【框架與技術】

1、支持 Tailwind CSS

WebStorm 現在可以幫助您更高效地使用 Tailwind CSS！ 它將自動補全 Tailwind 類，在鼠標懸停時為您顯示所生成 CSS 的預覽，并支持您使用 tailwind.config.js 文件進行自定義。

2、根據用例創建 React 組件

您的代碼中有未解析的 React 組件嗎？ 將脫字符號放到其中，按 Alt+Enter，然后從列表中選擇 Create class / function component - WebStorm 將為您創建相關的代碼結構。

3、Markdown 編輯和預覽改進

Mermaid.js 支持、重新格式化 .md 文件的功能以及與編輯器一起自動滾動預覽窗格的功能 - 這些和其他變更將顯著改善您在 WebStorm 中使用 Markdown 文件的體驗。

4、對復雜 webpack 設置的基本支持

我們已經開始添加對多個 webpack 配置的支持。 轉到 Preferences / Settings | Languages & Frameworks | Javascript | Webpack 選擇手動或自動檢測配置文件。

5、Vue.js 的增強

我們已經修復了與 Vue 3 相關的諸多問題。 例如，WebStorm 現在支持腳本設置語法。 我們還使 IDE 在 Vue 項目中正確應用了 ESLint 代碼樣式規則，并改進了與 TypeScript 語言服務的集成。

6、全面支持 pnpm

現在，WebStorm 全面支持 pnpm 程序包管理器以及 npm 和 yarn。 在過去的一年里，我們一直在逐步實現對 pnpm 支持的改進。 在 v2020.3 中，我們已經完成了收尾工作。

【Javascript 和 TypeScript】

1、集成了 TypeScript 和 Problems 工具窗口

我們已將 TypeScript 語言服務集成到 Problems 工具窗口中，并移除了 TypeScript 工具窗口。 進行此變更后，用戶可以更輕松地在一個位置檢查代碼中的問題。 我們還將先前在 TypeScript 工具窗口中可用的操作移動到狀態欄上的專用微件中。

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

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

3、改進了調試體驗

調試時使用交互式提示和內聯監視！ 現在，您可以點擊提示以查看屬于變量的所有字段。 此外，您還可以直接從提示更改變量值并添加監視表達式。

【工具】

1、支持我們的協作開發工具

WebStorm 2020.3 支持 Code With Me （EAP），這是一款用于協作開發和結對編程的新工具。 利用此工具，您可以與他人共享項目，這樣便可實時協同處理。 要試用 Code With Me，請從 Preferences / Settings | Plugins 安裝相應的插件。

2、關于 WebStorm 基礎知識的內置培訓課程

為了幫助您熟悉 WebStorm 的關鍵功能，我們開發了一門交互式培訓課程。 這門課程可以幫助您學習完成一些常見任務，例如重構代碼或在項目中導航。 您可以在 Welcome 屏幕上的 Learn WebStorm 選項卡下，也可以從主菜單中轉到 Help | IDE Features Trainer 來找到此課程。

3、HTTP 客戶端的 cURL 轉換

現在，您可以通過在 HTTP 請求編輯器中按 Alt+Enter 并選擇 Convert to cURL and copy to clipboard 選項，將 HTTP 請求導出到 cURL。

4、更好的拼寫和語法檢查

現在，您可以更快地解決語法和拼寫問題 - 將鼠標懸停在問題上，隨后會出現一個包含說明和建議修復方法的彈出窗口。 我們還添加了對更多語言的支持，并改進了語法檢查的質量。

【版本控制】

1、支持 Git 暫存區域

現在，您可以直接從 WebStorm 暫存文件！ 為此，請轉到 Preferences / Settings | Version Control | Git，然后選擇 Enable staging area 選項。 您可以從 Commit 工具窗口，從間距以及使用 Show Diff 功能暫存變更。

2、重新排列了 VCS 菜單

現在，主菜單下的 VCS 組根據您正在使用的版本控制系統命名。 我們還重新排列了主菜單中 Git 下的項目，以便您更輕松地訪問最常用的操作。

3、改進了分支的使用

現在，WebStorm 會自動更正新分支名稱中未被接受的符號 此外，它還會顯示當前可用于所選分支的所有操作，就像對待其他分支一樣。

漢化說明

目前官方已經自帶中文，默認情況下中文是不開啟的，根據 官方的說明，所有的 i18n 包都是以插件的形式集成到軟件中的。需要你自己去集成漢化插件。關于集成漢化插件的步驟是打開 Settings -》 Plugins ，在界面框中輸入“Chinese”回車搜索，可見會出現一個中文插件，點擊“Install”安裝插件，然后重啟即可！

再次打開軟件，jetbrains webstorm 漢化成功安裝。