軟件介紹

WebStorm2021.3漢化特別版是一款由JetBrains官方所推出的多功能的JavaScript開發(fā)者工具，這款軟件集成了最強(qiáng)大的HTML5編輯器、最智能的JavaScript IDE調(diào)試器，相關(guān)用戶在這里可以輕輕松松進(jìn)行實(shí)時(shí)錯(cuò)誤檢測、自動(dòng)重構(gòu)、代碼驗(yàn)證、語法突出顯示等一系列操作，這樣就能夠很好的提升了相關(guān)用戶的代碼編寫質(zhì)量。

在最近WebStorm2021.3永久激活版正式推出了，與前幾個(gè)版本相比而言，這款軟件版本還是有了較為明顯的提升，比如：采用了更加簡潔清爽的操作界面、重新設(shè)計(jì)了Deno集成、改進(jìn)了HTML補(bǔ)全、支持SSH連接的代理，這樣一來就能夠使得該軟件變得更加簡單易用。

新功能

一、JavaScript和TypeScript

1、私有類成員的重構(gòu)支持

我們在 2018 年增加了對私有字段的支持。 然而，這種支持是以 TC39 的舊提案為基礎(chǔ)，現(xiàn)已偏離標(biāo)準(zhǔn)。 為了符合標(biāo)準(zhǔn)，我們從頭開始重新設(shè)計(jì)了既有支持。正確支持 ES2022 私有類成員。

2、對 import 語句中 URL 的支持

您現(xiàn)在可以使用 ES6 文件中導(dǎo)入路徑的快速修復(fù)下載遠(yuǎn)程 ES6 模塊。該模塊將連同其所有依賴項(xiàng)一起下載并鏈接為項(xiàng)目庫。要進(jìn)行嘗試，請將文本光標(biāo)放在導(dǎo)入路徑上，然后按 Alt+Enter 并選擇 Download module（下載模塊）。

3、.js 和 .d.ts 文件之間更好的映射

我們改進(jìn)了 .js 和 .d.ts 文件之間的映射，并添加了間距圖標(biāo)以實(shí)現(xiàn)更好的導(dǎo)航。要詳細(xì)了解這些變更，請閱讀此博文。

4、JavaScript 文件的更快索引

JavaScript 文件的索引時(shí)間減少了 20%。我們希望這可以幫助您在打開新項(xiàng)目或進(jìn)行大規(guī)模 Git 更新時(shí)更快地開始工作。 請注意，如果項(xiàng)目主要由 .ts 或其他類型的文件組成，則變化將不太明顯。

5、改進(jìn)了對單倉庫的支持

此版本對單倉庫的操作做出了許多改進(jìn)。最顯著的變化是自動(dòng)添加的導(dǎo)入現(xiàn)在會(huì)考慮項(xiàng)目結(jié)構(gòu)，將項(xiàng)目中每個(gè)帶有 package.json 的文件夾視為一個(gè)單獨(dú)的軟件包。

二、框架與技術(shù)

1.用于更新依賴項(xiàng)的新檢查

允許您直接從編輯器將 npm 軟件包更新到最新版本！ 打開 package.json 文件，將文本光標(biāo)放在要更新的軟件包版本上，按 Alt+Enter，然后選擇 Update ‘package name’ to the latest version（將“軟件包名稱”更新到最新版本）。將鼠標(biāo)懸停在軟件包版本上時(shí)，還會(huì)顯示快速修復(fù)。

2、重新設(shè)計(jì)了 Deno 集成

為了改善軟件中的Deno體驗(yàn)，我們已遷移到Deno LSP并修正了一系列已知問題。 查看此博文以詳細(xì)了解如何開始使用 Deno。

3、改進(jìn)了 HTML 補(bǔ)全

我們改進(jìn)了代碼補(bǔ)全在 HTML 中的工作方式。 每當(dāng)您在編輯器中輸入標(biāo)記名稱或縮寫或調(diào)用代碼補(bǔ)全，都會(huì)立即顯示相關(guān)建議。 先前，只有首先輸入了 < 才會(huì)顯示。 此外，字符實(shí)體引用的代碼補(bǔ)全現(xiàn)在也可以更好地工作。

4、Vue 和 React 的類型檢查

支持Vue模板中的類型檢查。 當(dāng)綁定到屬性的表達(dá)式中使用了不正確的類型時(shí)，IDE 會(huì)發(fā)出通知。 這也適用于 React 特性。

5、針對 HTTP 客戶端的新功能

在此版本中，我們大幅改進(jìn)了內(nèi)置 HTTP 客戶端。 我們添加了許多新功能，包括二進(jìn)制響應(yīng)支持、輸出重定向到自定義文件或目錄等等。

三、遠(yuǎn)程開發(fā)

1、遠(yuǎn)程運(yùn)行 WebStorm

支持測試版本的全新遠(yuǎn)程開發(fā)工作流。 您現(xiàn)在可以連接到正在運(yùn)行 IDE 后端的遠(yuǎn)程計(jì)算機(jī)，并像在本地計(jì)算機(jī)上一樣處理其中的項(xiàng)目。 這要?dú)w功于我們的新應(yīng)用程序 JetBrains Gateway。 要了解更多信息，請參閱這篇博文。

2、保存時(shí)的操作

使用遠(yuǎn)程 Node.js 進(jìn)行開發(fā)

在此版本中，我們進(jìn)行了多項(xiàng)重大改進(jìn)，支持將 Node.js 安裝在 Docker 中并隨后由 WebStorm 與 JavaScript 工具的集成使用這種工作流。 現(xiàn)在，IDE 允許您將 Node.js 遠(yuǎn)程解釋器與 ESLint、Jest、Mocha 和 npm 結(jié)合使用。 要了解更多信息，請參閱這篇博文。

3、SSH 連接的代理支持

您現(xiàn)在可以在 Preferences / Settings | Tools | SSH Configurations（偏好設(shè)置 / 設(shè)置 | 工具 | SSH 配置）中為 SSH 配置指定 HTTP 或 SOCKS 代理服務(wù)器。 在新的 HTTP/SOCKS Proxy（HTTP/SOCKS 代理）部分中，您可以選擇代理類型、輸入主機(jī)名和端口，并在必要時(shí)使用登錄名和密碼應(yīng)用身份驗(yàn)證。

四、用戶體驗(yàn)

1、拆分 Run（運(yùn)行）工具窗口

要在運(yùn)行多個(gè)配置時(shí)查看其結(jié)果？ 您現(xiàn)在可以拆分 Run（運(yùn)行）工具窗口！ 為此，請將所需選項(xiàng)卡拖放到高亮顯示的區(qū)域。 要取消拆分工具窗口，您可以拖回選項(xiàng)卡，或右鍵點(diǎn)擊頂部窗格并從上下文菜單中選擇 Unsplit（取消拆分）。

2、新的 Bookmarks（書簽）工具窗口

以前有兩個(gè)非常相似的實(shí)例 - Favorites（收藏夾）和 Bookmarks（書簽）。 由于兩者之間的區(qū)別有時(shí)會(huì)造成困惑，我們決定改為只使用 Bookmarks（書簽）。 我們重新設(shè)計(jì)了此功能的工作流，并為其創(chuàng)建了一個(gè)新的工具窗口。 從現(xiàn)在開始，您使用 F11 標(biāo)記為重要的文件、文件夾和類都將位于新的 Bookmarks（書簽）工具窗口下。

3、Show Usages（顯示用法）的源代碼預(yù)覽

使用 Ctrl+Alt+F7 或按 Ctrl 并點(diǎn)擊定義查看符號的用法時(shí)，現(xiàn)在可以通過點(diǎn)擊方形圖標(biāo)來打開找到的用法的源代碼預(yù)覽。

4、終端的改進(jìn)

軟件的內(nèi)置終端現(xiàn)在支持 Windows 上的新 ConPTY API。 這一變化幫助我們解決了幾個(gè)問題并增加了對 24 位顏色的支持。 此外，新添加的鍵盤緩沖支持可預(yù)測文本修改并立即以淺灰色顯示。 此功能將幫助您在本地和遠(yuǎn)程計(jì)算機(jī)上保持同樣的終端輸入速度。

5、無障礙功能更新

我們解決了一些無障礙功能問題，讓屏幕閱讀器更為舒適。 我們禁用了過去在鼠標(biāo)懸停時(shí)出現(xiàn)的工具窗口微件彈出窗口和快速文檔彈出窗口。 macOS 上的無障礙功能支持也得到了改進(jìn)。 我們解決了 VoiceOver 焦點(diǎn)的幾個(gè)問題，并支持從屏幕閱讀器創(chuàng)建項(xiàng)目。

6、更改所有選項(xiàng)卡的字體大小

您知道可以在編輯器中使用鼠標(biāo)滾輪更改字體大小嗎？ 以前，此功能僅適用于當(dāng)前文件。 現(xiàn)在，您可以將其應(yīng)用于所有打開的文件。 轉(zhuǎn)到 Preferences / Settings | Editor | General（偏好設(shè)置 / 設(shè)置 | 編輯器 | 常規(guī)），勾選 Change font size with Command / Ctrl + Mouse Wheel in（使用 Command / Ctrl + 鼠標(biāo)滾輪更改字體大�。�，然后選擇 All editors（所有編輯器）選項(xiàng)。

五、版本控制

1、重新組織了 VCS 設(shè)置

我們重新組織了 Preferences / Settings | Version Control（偏好設(shè)置 / 設(shè)置 | 版本控制）下的所有內(nèi)容，使關(guān)鍵配置選項(xiàng)更為醒目。 例如，Git 節(jié)點(diǎn)下的現(xiàn)在被劃分為幾個(gè)部分，對應(yīng)最重要的流程：Commit（提交）、Push（推送）和 Update（更新）。 此外，這些部分中的參數(shù)現(xiàn)在組織得更合乎邏輯。

2、新的 Push all up to Here（推送此前所有提交）操作

有時(shí)，您可能會(huì)已經(jīng)準(zhǔn)備好要發(fā)布一些提交，而其他的提交卻仍在進(jìn)行中。 在這種情況下，您可能需要僅推送您確定要發(fā)布的提交。 將使您可以推送您在 Git 工具窗口的 Log（日志）選項(xiàng)卡中所選及其之前的提交。 只需右鍵點(diǎn)擊所需提交，然后選擇 Push All up to Here（推送此前所有提交）即可。

3、遠(yuǎn)程分支的 Checkout and Rebase onto Current（簽出并變基到當(dāng)前分支）

使用 Checkout and Rebase onto Current（簽出并變基到當(dāng)前分支）操作，您可以簽出所選分支并將其變基到當(dāng)前簽出分支的頂部。 在此之前，此操作僅適用于本地分支。 在 v2021.3 中，您也可以將其用于遠(yuǎn)程分支。

4、新 Changes（變更）工具窗口

以前，會(huì)在單獨(dú)的對話框中顯示提交之間的差異。 從此版本開始，IDE 將在新的 Changes（變更）工具窗口中顯示此信息。 要打開新的工具窗口，在版本控制系統(tǒng)的 Log（日志）選項(xiàng)卡中右鍵點(diǎn)擊一個(gè)修訂，然后從上下文菜單中選擇 Compare with local（與本地版本比較）。

WebStorm2021.3特別安裝教程

1、下載解壓，得到原程序、特別補(bǔ)丁和漢化補(bǔ)丁。

2、雙擊“WebStorm-211.4961.31.exe”開始安裝軟件，點(diǎn)擊next。

3、設(shè)置安裝路徑，大家根據(jù)自己的情況安裝即可。

4、根據(jù)自己的需求來選擇勾選，點(diǎn)擊next。

5、點(diǎn)install開始安裝。

6、正在安裝，請耐心等待片刻。

7、安裝完成后即可運(yùn)行軟件。

8、由于是最新版本，所以用戶們需要注冊帳號登錄才能體驗(yàn)。

9、登錄成功后的界面，點(diǎn)擊 Start Trial 開始免費(fèi)試用。

10、開始試用后，會(huì)進(jìn)入待如下頁面，免費(fèi)試用的時(shí)間是1個(gè)月。

11、將 ide-eval-resetter.zip 插件拖動(dòng)至 主界面中，如下圖。

12、重啟完成并進(jìn)入主界面，點(diǎn)擊菜單【Help】->【Eval Reset】。

13、點(diǎn)擊菜單【Help】->【Eval Reset】后會(huì)彈出插件主界面 ，然后點(diǎn)擊Reset，進(jìn)行重啟。

14、重啟完成后，點(diǎn)擊菜單【Help】->【About】查看是否繼命成功。

15、不過這時(shí)還是全英文的，那么webstorm怎么換成中文呢？接著此時(shí)同時(shí)按下鍵盤的Ctrl+ALT+S 打開 Settings -> Plugins。

16、選擇“marketplace”接著在輸入框中輸入“Chinese”后即可找到漢化插件，點(diǎn)擊“install”進(jìn)行下載。

17、下載完成后點(diǎn)擊“restart ide”——“restart”。

18、然后重啟就是全中文的啦，至此，以上就是詳細(xì)的WebStorm2021.3永久激活版安裝步驟，希望對大家有所幫助。

WebStorm2021.3使用教程

如何啟動(dòng)vue項(xiàng)目

很多時(shí)候我們是這樣啟動(dòng)vue項(xiàng)目的。

其實(shí)用webstram有便捷的方式我們操作。

首先我們用webstarm打開一個(gè)項(xiàng)目文件。

找到webstrom界面的左下角的npm并點(diǎn)擊，可以看到一個(gè)工具框。

點(diǎn)擊start就可以啟動(dòng)項(xiàng)目了。

下面的框內(nèi)是啟動(dòng)的進(jìn)程。

點(diǎn)擊圖片所示的紅框按鈕可以重啟項(xiàng)目。

點(diǎn)擊圖片所示的紅框按鈕可以關(guān)閉項(xiàng)目。

還有一個(gè)常用的功能就是vue項(xiàng)目打包，點(diǎn)擊build即可。

常用快捷鍵

1、ctrl + shift + n: 打開工程中的文件，目的是打開當(dāng)前工程下任意目錄的文件

2、ctrl + j: 輸出模板

3、ctrl + b: 跳到變量申明處

4、ctrl + alt + T: 圍繞包裹代碼(包括zencoding的Wrap with Abbreviation)

5、ctrl + []: 匹配 {}[]

6、ctrl + F12: 可以顯示當(dāng)前文件的結(jié)構(gòu)

7、ctrl + x: 剪切(刪除)行，不選中，直接剪切整個(gè)行，如果選中部分內(nèi)容則剪切選中的內(nèi)容

8、alt + left/right:標(biāo)簽切換

9、ctrl + r: 替換

10、ctrl + shift + up: 行移動(dòng)

11、shift + alt + up: 塊移動(dòng)(if(){},while(){}語句塊的移動(dòng))

12、ctrl + d: 行復(fù)制

13、ctrl + shift + ]/[: 選中塊代碼

14、ctrl + / : 單行注釋

15、ctrl + shift + / : 塊注釋

16、ctrl + shift + i : 顯示當(dāng)前CSS選擇器或者JS函數(shù)的詳細(xì)信息

17、ctrl + '-/+': 可以折疊項(xiàng)目中的任何代碼塊，它不是選中折疊，而是自動(dòng)識(shí)別折疊

18、ctrl + '.': 折疊選中的代碼的代碼

19、shift + esc: 當(dāng)前激活的任意小窗口最小化，也可以是alt+數(shù)字鍵，數(shù)字在小窗口有顯示

20、alt + '7': 顯示當(dāng)前的函數(shù)結(jié)構(gòu)

21、如果是*.html頁面，則在文件名下的導(dǎo)航欄某DOM結(jié)構(gòu)上右鍵，可以全選當(dāng)前DOM結(jié)構(gòu)