webstorm 2021.1 版本使用體驗

前言

前些天webstorm推送了2021年的第一個版本更新，此次的版本更新加了一些新功能，接下來就跟你們分享下此次的新版本都有哪些新特性，歡迎各位感興趣的開發者閱讀本文。css

新特性一覽

在新的版本中才使用機器學習算法優化了代碼補全，添加了html預覽功能，添加了編輯器字體粗細選擇等功能。html

ML輔助代碼補全

在JavaScript和TypeScript文件中的補全建議如今經過機器學習算法對其進行了排序，經常使用的api將排在最前面。vue

咱們經過一段代碼來演示下，以下圖所示：web

符號名稱補全建議

當咱們在文件頂層聲明變量以及函數和類名時，補全建議時將當前文件名，效果圖以下所示：算法

改進JSDoc 語法高亮顯示

爲了使 JSDoc 註釋更易讀，新版本中添加了一些新選項，用於調整 JSDoc 標記值和類型的配色方案。在 Preferences / Settings | Editor | Color Scheme | JavaScript / TypeScript 中進行設置。編程

內置遠程協做開發服務

新版本中內置了Code With Me ，這是一款用於遠程協做開發和結對編程的新服務。可使用它進行實時合做編碼，並以 IDE 與其餘人交流，如圖所示，點擊工具欄的圖標便可進入。windows

詳細使用方法請移步：IDE遠程協做api

支持Vue中的css塊

在新版中支持了 .vue 文件中使用的 CSS 模塊。 IDE 將正確解析 $style 屬性，爲其提供代碼補全、導航和基本的重構功能，以下圖所示：瀏覽器

改進了對 Stylelint 的支持

點擊幾下便可使用 Stylelint 修復 CSS 代碼。將鼠標懸停在文件中的問題上或將文本光標放在其上，而後按 ⌥⏎，選擇 Stylelint: Fix current file。markdown

能夠在 Preferences / Settings | Languages & Frameworks | Style Sheets | Stylelint 的相應字段下指定其配置文件的路徑。

內置 HTML 預覽

新版本中能夠直接在 WebStorm 中預覽靜態 HTML 文件。對 HTML 文件或連接的 CSS 和 JavaScript 文件所作的變動將被保存，預覽將自動從新加載，用個gif圖來演示下，以下所示：

CSS 的選擇器特異性

使用樣式表時，如今能夠查看選擇器的特異性 - 只需將鼠標懸停在要查看的選擇器上便可。或者，將焦點放在選擇器上，按 F1 在文檔彈出窗口中查看這些信息。

可調整字體粗細

新版本中能夠選擇不一樣的編輯器字體，包括淺色、常規和粗體。在 Preferences / Settings | Editor | Fonts 下調整這些新選項。

最大化分割視圖中的選項卡

在分割視圖中打開了多個選項卡時，雙擊要處理的選項卡，使其編輯器窗口最大化。再次雙擊便可將選項卡恢復到原始大小，咱們經過一個gif圖來演示下：

更實用的快速文檔

MDN 文檔現與 WebStorm 捆綁。這將有助於防止 MDN 網站的鏈接問題，並使編輯器內文檔顯示得更快。如今它也提供了更多信息，例如，您將看到有關 JavaScript API 的支持瀏覽器版本的詳細信息。

改進了 Pull Request 的使用

如今能夠直接在 Pull Requests 工具窗口中單擊 + 圖標建立新的 PR，以下所示：

更多改進請移步：Pull Requests的更多加強

獲取更新

講了那麼多新特性，接下來就教你們如何從舊版本升級到新版本。

windows端菜單欄依次點擊: Help -> Check for updates以下圖所示

mac端，依次點擊webstorm -> check for updates，以下圖所示

隨後會出現提醒下載的窗口，按照操做更新便可。

若是你是第一次使用WebStorm，可點擊下方連接去官網下載安裝便可，官網地址： webstorm。

更多新版本更新內容請移步：webstorm 2021.1 whatsnew

不足自處

新版本更新後，一直免費的主題插件：Material Theme UI 開始收費了😭，15美刀/年。

版本升級後，這個插件強制更新了，沒法回退，若是使用免費版本的話，文件目錄樹看起來會很小，極不舒服。

不知道你們有沒有白嫖的方法，我如今是30天試用🤣

寫在最後

文中使用的部分圖片源自webstorm官網，如若侵權，請評論區留言，做者當即刪除相關圖片。
文中若有錯誤，歡迎在評論區指正，若是這篇文章幫到了你，歡迎點贊和關注😊
本文首發於掘金，未經許可禁止轉載💌