WebStorm 2020.2版本是WebStorm今年的第二個(gè)重大更新，現(xiàn)已發(fā)布！它將Prettier作為默認(rèn)格式化程序選項(xiàng)，能夠更好的支持Vue類，JavaScript，以及對(duì)GitHub pull請(qǐng)求的全面支持等等。

下載WebStorm2020.2最新試用版

如果您只有幾分鐘時(shí)間來探索WebStorm 2020.2的新增功能，請(qǐng)觀看此視頻。如果您想更深入地學(xué)習(xí)，請(qǐng)繼續(xù)閱讀！

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

• 框架和技術(shù)：使用Prettier作為默認(rèn)格式化程序的選項(xiàng)，對(duì)Vue.js進(jìn)行了各種改進(jìn)，并支持WSL 2中安裝的Git。
• JavaScript和TypeScript：新的智能意圖，呈現(xiàn)的JSDoc注釋，ML輔助的代碼完成和調(diào)試器增強(qiáng)。
• HTML和樣式表>：更好地支持Sass的模塊系統(tǒng)，WebP支持以及querySelector方法中CSS選擇器的代碼完成。
• 版本控制：對(duì)GitHub拉取請(qǐng)求的更高級(jí)支持，針對(duì)多個(gè)Git操作的重新設(shè)計(jì)的對(duì)話框，以及用于壓縮日志中提交的新操作。
• 代碼編輯：用于發(fā)現(xiàn)代碼中問題的新工具，以及用于在每一行的末尾添加插入符號(hào)的操作。

框架與技術(shù)

我們將盡可能地繼續(xù)使開發(fā)者在WebStorm中使用Prettier時(shí)更加容易。這次，我們將Prettier設(shè)置為默認(rèn)格式器，而不是內(nèi)置的格式器。現(xiàn)在，您所需要做的就是在“ Preferences / Settings” |“ Settings”中選擇“ Preferences/Settings | Languages & Frameworks | JavaScript | Prettier

選中“ code reformat”選項(xiàng)，只要您使用默認(rèn)格式設(shè)置操作，就會(huì)調(diào)用Prettier 。默認(rèn)情況下，WebStorm會(huì)將格式應(yīng)用于all。在項(xiàng)目中編輯的js，.ts，.jsx和.tsx文件，就像在保存時(shí)運(yùn)行Prettier時(shí)一樣。要將格式應(yīng)用于其他文件類型，或?qū)⒏袷较拗茷閮H位于特定目錄中的文件，可以使用glob模式自定義默認(rèn)配置。

如果要在所有新項(xiàng)目中將Prettier用作默認(rèn)格式化程序，請(qǐng)轉(zhuǎn)至File | New Projects Settings | Preferences/從主菜單中選擇Settings for New Projects，然后在其中選擇“On Code Reformat ”選項(xiàng)，并在需要時(shí)更新文件類型的默認(rèn)列表。

如果您對(duì)舊的處理方式感到滿意–既使用內(nèi)置格式化程序又使用“Reformat with Prettier”操作，該怎么辦？或者，如果您已經(jīng)習(xí)慣了將自定義快捷方式分配給“ Reformat with Prettier”操作，該怎么辦？您當(dāng)然可以繼續(xù)使用它。但是，您可能想嘗試一下新功能，看看它是否對(duì)您更好。

對(duì)Vue.js的最佳支持

WebStorm 2020.2還添加了對(duì)Nuxt.js的支持，Vue代碼樣式設(shè)置的專用部分以及其他一些改進(jìn)。讓我們看看添加了什么。

對(duì)Nuxt.js的支持

首先，如果您使用的是從2.9.0開始的Nuxt版本，并且沒有安裝@ nuxt / types軟件包，則WebStorm會(huì)警告您，并建議將其安裝為dev依賴項(xiàng)。如果要在IDE中更好地完成代碼，請(qǐng)建議您這樣做。

現(xiàn)在，使用nuxt.config.js文件時(shí)，您將獲得正確的代碼完成建議。懸停時(shí)，您還將看到“ Documentation”彈出窗口，顯示該文件中使用的Nuxt選項(xiàng)的類型信息。

同時(shí)，也支持特定的Nuxt的Webpack設(shè)置。從Nuxt.js 2.12.0開始，WebStorm將自動(dòng)找到webpack配置文件，并使用其中的模塊解析規(guī)則來提供編碼幫助。

IDE還可以識(shí)別對(duì)Vuex存儲(chǔ)的引用，并且可以正確解析并自動(dòng)完成它們。

最后，Vue模板中引用的 static目錄中的所有內(nèi)容也將得到正確解析。

Vue特定的代碼樣式設(shè)置

WebStorm 2020.2隨附一個(gè)專用部分，用于配置Vue文件的格式設(shè)置選項(xiàng)。新部分位于“ Preferences/Settings | Editor | Code Style | Vue。

使用Vue特定的代碼樣式設(shè)置，您應(yīng)該選擇那些能快速選擇縮進(jìn)頂級(jí)標(biāo)簽的內(nèi)容。您還可以決定整個(gè)Vue文件的縮進(jìn)應(yīng)該相同，還是取決于語言設(shè)置（例如特定于HTML）。默認(rèn)情況下，僅<template>縮進(jìn)內(nèi)容，并且縮進(jìn)對(duì)于整個(gè)文件是統(tǒng)一的。

您還可以更改在Vue代碼中格式化插值的方式。要配置任何其他代碼樣式選項(xiàng)，請(qǐng)?jiān)?em>“Preferences/Settings | Editor | Code Style中轉(zhuǎn)到該語言的專用部分。

Vue的其他改進(jìn)

除了這兩項(xiàng)主要增強(qiáng)功能之外，您還會(huì)發(fā)現(xiàn)更多其他功能，例如：

• 改進(jìn)了TypeScript語言服務(wù)與.vue文件一起使用的方式。現(xiàn)在，它們像.ts或.tsx文件一樣。在其他Vue或TypeScript文件中導(dǎo)入Vue文件變得更加容易。
• WebStorm現(xiàn)在支持Vuelidate，這是Vue.js的基于模塊的驗(yàn)證。
• Vuex存儲(chǔ)中的所有映射符號(hào)都已正確解析至函數(shù)/屬性中.，顯示了正確數(shù)量的參數(shù)和正確類型。
• 如果您Vue.extend()在使用單文件組件時(shí)嘗試創(chuàng)建一個(gè)組件，則現(xiàn)在將看到所有數(shù)據(jù)屬性均已按預(yù)期解析。
• 我們已經(jīng)做了一個(gè)小的改進(jìn)，以完成對(duì)實(shí)例的屬現(xiàn)在支持- $data，$props和$options。

接下來的文章我們將繼續(xù)詳細(xì)說明webstorm2020.2版本的新增和改進(jìn)功能；