JetBrains WebStorm用于現(xiàn)代JavaScript開發(fā)的智能IDE，完全可以通過Node.js進行復雜的客戶端開發(fā)和服務器端開發(fā)，JetBrains WebStorm是一款專業(yè)的智能Web前端開發(fā)神器，能夠完美適應各種復雜客戶端。軟件提供了許多與編寫代碼、運行、調(diào)試和分析應用程序不直接相關的功能，并且具有代碼完成，強大的導航，代碼重構和即時錯誤檢測功能的文本編輯器，用戶操作更加簡單。

較之之前的版本，今天小編所提供的是WebStorm 2021新版本，不僅擁有更精致的外觀，增加Tailwind CSS支持，改進的調(diào)試體驗，Git登臺支持，新的導航功能等，這些可以幫助您執(zhí)行其他任務，而無需從IDE切換上下文，例如在系統(tǒng)外殼中運行命令，使用第三方工具管理任務等。該軟件操作簡單，為用戶提供了所有JS常用的函數(shù)和代碼，我們可以在這里快速進行智能代碼補全、代碼格式化、代碼重構、代碼折疊、代碼調(diào)試等等，有效提高工作的效率，簡單來說就是在保留原版本的基礎上，增加了更加實用的功能

軟件特色

1、代碼導航和用法搜索

函數(shù)、變量或標簽的導航都可用一個熱鍵使用。

2、JavaScript單元測試

如果你是一個JavaScript的開發(fā)者，你應該知道對于你的程序來說，代碼的質(zhì)量和正確性是非常重要的。那么，一致性測試和回歸性測試這種功能會使你輕松很多。

3、代碼檢測和快速修復

為保證更優(yōu)的代碼質(zhì)量，能快速地捕捉到JavaScript中的常見錯誤并提供快速的修復方案。

4、批量代碼分析

無需通過點擊所有文件或部署到服務器。整個源代碼樹的啟動代碼分析，可以在一個單一的視圖中看到所有的結果。

5、支持HTML5

用創(chuàng)建一個新的HTML文檔,以便于在代碼中使用HTML5。假如我們想要使用一個canvas標簽。不但要當鍵 入”<ca”時IDE會知曉你的意圖并添加canvas標簽，而且在按下Space鍵后它會提示HTML5屬性已被IDE支持。

6、顯示應用樣式

是否想讓你的頁面中出現(xiàn)一個流行的樣式？右鍵單擊并選擇顯是應用樣式標簽。此命令將打開的標簽應用到通過CSS樣式的樹視圖里的樣式。

安裝教程

1、在本站下載安裝包并解壓，可得到源程序，雙擊開始運行安裝

2、選擇軟件安裝位置，點擊Browser可自行更換安裝路徑

3、選擇附加任務，自行選擇需要的進行勾選，這里小編勾選的是x64

4、選擇開始菜單文件夾，默認即可

5、正在安裝中，速度還是非?？斓?/p>

6、安裝成功，點擊Finish退出軟件安裝向?qū)?/p>

7、該軟件運行后默認為英文，直接快捷鍵“Ctrl+ALT+S”打開“Settings -> Plugins”進行設置

8、在搜索框內(nèi)輸入“Chinese”，找到中文語言包點擊Install安裝

9、安裝成功后需要重啟軟件，點擊Restart IDE，然后彈出提示點擊Restart即可

10、安裝完成

功能介紹

1、智能代碼輔助功能

JetBrains WebStorm 2021為您提供JavaScript和編譯為JavaScript語言、 Node.js、HTML和CSS的智能代碼輔助。 享受代碼補全、強大的 導航功能、動態(tài)錯誤檢測以及所有這些 語言的重構。

2、調(diào)試、跟蹤和測試

提供強大的內(nèi)置工具進行調(diào)試、測試和跟蹤 您的客戶端和Node.js應用程序。 只需很少配置和精心 集成到IDE中，使這些任務變得更加輕松。

3、無縫工具集成

集成流行的命令行工具，用于Web開發(fā)， 使您無需使用命令行即可獲得高效、簡化的開發(fā) 體驗。

4、IDE功能

建立在開源IntelliJ平臺之上，過去15年以來，JetBrains一直在不斷發(fā)展和完善這個平臺。 這個平臺可以針對您的開發(fā)工作流進行微調(diào)并且能夠提供高度可定制的體驗。

5、現(xiàn)代框架

為 Angular、 React、Vue.js 和 Meteor 提供先進的代碼輔助。 享受對以React Native、PhoneGap、Cordova和 Ionic進行移動開發(fā)和以Node.js進行服務器端開發(fā)的支持。 一個 IDE 一應俱全！

6、智能編輯器

該IDE分析您的項目，從而為所有支持的語言 提供最佳代碼補全結果。 幾百種內(nèi)置檢查，可以在您輸入時 報告任何可能的問題，并提供快速修復選項。

7、導航和搜索

可以幫助您在處理大型項目時提高編碼效率，并節(jié)省時間。 只需點擊一次或搜索用法，即可跳到方法、函數(shù)或變量定義。

8、項目模板

使用常用項目模板，比如：Express 或Web入門套件從歡迎屏幕啟動新項目，并且 因為與Yeoman集成，所以可以訪問更多項目生成器。

9、VCS

以統(tǒng)一的UI處理多種流行的版本控制系統(tǒng)， 確保在git、GitHub、SVN、Mercurial和Perforce之間提供一致的用戶體驗。

10、本地歷史

無論您是否使用VCS，本地歷史都真的可以 保護代碼。 您可以隨時 檢查特定文件或目錄的歷史記錄，并回滾到 以前的任何版本。

11、定制

軟件定制化程度非常高。 將其調(diào)整為完全適合您的編程風格，從快捷鍵、字體和視覺主題到工具窗口和編輯器布局。

12、生成工具

享受直接在IDE中以簡單一致的UI來運行Grunt、Gulp或 npm任務。 所有任務都列舉在一個特殊工具 窗口中，所以只需雙擊任務名稱即可啟動它。

13、代碼質(zhì)量工具

除了軟件自有的幾百種檢查外，它還可以根據(jù)代碼運行ESLint、 JSCS、TSLint、Stylelint、 JSHint或JSLint，并直接在編輯器中 高亮顯示任何動態(tài)問題。

更改UI主題

在設置/首選項對話框中 Ctrl+Alt+S，選擇外觀和行為| 外觀。

或者，按Ctrl+`并從“切換”列表中選擇“主題” 。

從“主題”列表中選擇UI主題：

IntelliJ Light：基于IntelliJ的IDE的傳統(tǒng)光源主題

macOS Light或Windows 10 Light：捆綁的插件提供了特定于OS的light主題

Darcula：默認深色主題

高對比度：專為有色覺缺陷的用戶設計的主題

選擇與操作系統(tǒng)同步以使WebStorm檢測當前系統(tǒng)設置，并相應地使用默認的深色或淺色主題。

IDE查看模式

WebStorm為特定的使用模式提供了特殊的查看模式。例如，如果您需要專注于代碼或向觀眾展示代碼。

在“全屏”模式下，WebStorm會擴展主窗口以占據(jù)整個屏幕。在macOS上，所有操作系統(tǒng)控件都是隱藏的，但是如果將鼠標指針懸停在屏幕頂部，則可以訪問主菜單。

在無干擾模式下，編輯器占據(jù)源代碼居中的整個主窗口。UI的所有其他元素都被隱藏（工具窗口，工具欄和編輯器選項卡），以幫助您專注于當前文件的源代碼。您仍然可以使用快捷方式打開工具窗口，導航和執(zhí)行其他操作。

在Zen模式下，WebStorm結合了全屏模式和無干擾模式，因此主窗口會擴展，只剩下帶有源代碼的編輯器，您可以專注于編程。

在“演示”模式下，WebStorm擴展了編輯器以占據(jù)整個屏幕，并增加了字體大小，以使觀眾更容易看到自己在做什么。UI的其他元素是隱藏的，但是如果將鼠標指針懸停在屏幕頂部，則可以使用相應的快捷方式或使用主菜單來顯示它們。

切換觀看模式

轉到視圖| 外觀，然后選擇進入<查看模式> 或退出<查看模式>。

通過主菜單切換查看模式

使用快速切換器：

轉到視圖| 快速切換方案（或按Ctrl+`）。

在“開關”彈出窗口中，選擇“查看模式”，然后選擇“ 進入<查看模式>” 或“退出<查看模式>”。

使用查找操作：按Ctrl+Shift+A，然后開始鍵入查看模式的名稱。然后從列表中選擇進入<觀看模式>或退出<觀看模式>并按 Enter。

使用“查找動作”退出Zen觀看模式

如配置鍵盤快捷鍵中所述，將可將查看模式切換為首選按鍵組合的動作映射。

新功能

1、新的歡迎屏幕

我們已經(jīng)更新了歡迎屏幕！您不僅可以從中打開和創(chuàng)建項目，還可以調(diào)整最常用的設置，例如IDE主題和字體。

2、標簽的改進工作

我們使用標簽更加方便?，F(xiàn)在，您可以通過拖放選項卡或使用新的“ 在右側拆分中打開”操作來拆分編輯器 。此外，現(xiàn)在，固定的選項卡都帶有特殊圖標標記，并顯示在選項卡欄的開頭，因此您可以更快地找到它們。

3、使用WebStorm打開的文件

現(xiàn)在，使WebStorm默認打開特定文件類型非常簡單。轉到 首選項/設置| 編輯| 文件類型，然后單擊將 文件類型與WebStorm關聯(lián)。

4、支持Tailwind CSS

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

5、根據(jù)用途創(chuàng)建React組件

您的代碼中有未解析的React組件嗎？將插入符號置于其上，按 Alt+Enter，然后從列表中選擇Create class / function component -WebStorm將為您創(chuàng)建相關的代碼構造。

6、Markdown編輯和預覽改進

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

7、全面支持pnpm

WebStorm現(xiàn)在完全支持pnpm軟件包管理器以及npm和yarn。在過去的一年中，我們一直在逐步實施對pnpm支持的改進。我們已經(jīng)完成了畫龍點睛的工作。

8、集成的TypeScript和問題工具窗口

我們已經(jīng)將TypeScript語言服務集成到“問題”工具窗口中，并刪除了TypeScript工具窗口。我們進行了此更改，以便更輕松地 從一個位置查看代碼中的問題。我們還將之前在TypeScript工具窗口中可用的動作移至狀態(tài)欄上的專用小部件。

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

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

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

調(diào)試時使用交互式提示和嵌入式監(jiān)視！現(xiàn)在，您可以單擊提示以查看屬于變量的所有字段。此外，您可以直接從提示中更改變量值并添加監(jiān)視表達式。

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

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

12、內(nèi)置的WebStorm基礎培訓課程

為了幫助您熟悉WebStorm的關鍵功能，我們開發(fā)了一個交互式培訓課程。本課程可以幫助您學習完成一些常見任務，例如重構代碼或瀏覽項目。您可以在“歡迎”屏幕上的“學習WebStorm”選項卡下找到它，也可以轉到“幫助” |“發(fā)現(xiàn)”。 從主菜單中選擇IDE Features Trainer。

13、HTTP客戶端中的cURL轉換

現(xiàn)在，您可以通過按下HTTP請求編輯器并選擇“轉換為cURL并復制到剪貼板”選項，將HTTP請求導出到cURL。 Alt+Enter

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

現(xiàn)在，您可以更快地解決語法和拼寫問題-將鼠標懸停在問題上，將彈出一個帶有說明和建議修復程序的彈出窗口。我們還增加了對更多語言的支持，并提高了語法檢查的質(zhì)量。

15、更有用的導航欄

使用導航欄（可快速替代項目視圖），您可以輕松瀏覽項目的結構并打開特定文件。我們還可以跳轉到JavaScript和TypeScript文件中的特定代碼元素。

16、快速文件預覽

最后，您可以通過在“ 項目”視圖中選擇文件來在編輯器中預覽文件！要啟用此功能，請在“項目” 視圖中單擊齒輪圖標，然后選擇“啟用預覽選項卡”和“單擊打開文件”。

17、隨處搜索功能更強大

在Shift+Shift彈出現(xiàn)在可以讓你做更多。首先，您可以使用它進行基本數(shù)學運算-結果將立即顯示在彈出窗口中。它還將允許您查找Git數(shù)據(jù)，包括有關分支和提交的詳細信息。除此之外，所有發(fā)現(xiàn)現(xiàn)在都基于與搜索查詢的相關性而不是其類型進行分組。

常用快捷鍵

1、Ctrl + Shift + n：打開工程中的文件，目的是打開當前工程下任意目錄的文件。

2、Ctrl + j：輸出模板

3、Ctrl + b：跳到變量申明處

4、Ctrl + Alt + T：圍繞包裹代碼(包括zencoding的Wrap with Abbreviation)

5、Ctrl + []：匹配 {}[]

6、Ctrl + F12：可以顯示當前文件的結構

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

8、Alt + left/right：標簽切換

9、Ctrl + r：替換

10、Ctrl + Shift + up：行移動

11、Shift + Alt + up：塊移動(if(){},while(){}語句塊的移動)

12、Ctrl + d：行復制

13、Ctrl + Shift + ]/[：選中塊代碼

14、Ctrl + /：單行注釋

15、Ctrl + Shift + /：塊注釋

16、Ctrl + Shift + i：顯示當前CSS選擇器或者JS函數(shù)的詳細信息

17、Ctrl + '-/+'：可以折疊項目中的任何代碼塊，它不是選中折疊，而是自動識別折疊。

18、Ctrl + '.'：折疊選中的代碼的代碼。