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

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

軟件特色

1、代碼導(dǎo)航和用法搜索

函數(shù)、變量或標(biāo)簽的導(dǎo)航都可用一個(gè)熱鍵使用。

2、JavaScript單元測試

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

3、代碼檢測和快速修復(fù)

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

4、批量代碼分析

無需通過點(diǎn)擊所有文件或部署到服務(wù)器。整個(gè)源代碼樹的啟動代碼分析，可以在一個(gè)單一的視圖中看到所有的結(jié)果。

5、支持HTML5

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

6、顯示應(yīng)用樣式

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

安裝教程

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

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

3、選擇附加任務(wù)，自行選擇需要的進(jìn)行勾選，這里小編勾選的是x64

4、選擇開始菜單文件夾，默認(rèn)即可

5、正在安裝中，速度還是非常快的

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

7、該軟件運(yùn)行后默認(rèn)為英文，直接快捷鍵“Ctrl+ALT+S”打開“Settings -> Plugins”進(jìn)行設(shè)置

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

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

10、安裝完成

功能介紹

1、智能代碼輔助功能

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

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

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

3、無縫工具集成

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

4、IDE功能

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

5、現(xiàn)代框架

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

6、智能編輯器

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

7、導(dǎo)航和搜索

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

8、項(xiàng)目模板

使用常用項(xiàng)目模板，比如：Express 或Web入門套件從歡迎屏幕啟動新項(xiàng)目，并且 因?yàn)榕cYeoman集成，所以可以訪問更多項(xiàng)目生成器。

9、VCS

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

10、本地歷史

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

11、定制

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

12、生成工具

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

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

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

更改UI主題

在設(shè)置/首選項(xiàng)對話框中 Ctrl+Alt+S，選擇外觀和行為| 外觀。

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

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

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

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

Darcula：默認(rèn)深色主題

高對比度：專為有色覺缺陷的用戶設(shè)計(jì)的主題

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

IDE查看模式

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

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

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

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

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

切換觀看模式

轉(zhuǎn)到視圖| 外觀，然后選擇進(jìn)入<查看模式> 或退出<查看模式>。

通過主菜單切換查看模式

使用快速切換器：

轉(zhuǎn)到視圖| 快速切換方案（或按Ctrl+`）。

在“開關(guān)”彈出窗口中，選擇“查看模式”，然后選擇“ 進(jìn)入<查看模式>” 或“退出<查看模式>”。

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

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

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

新功能

1、新的歡迎屏幕

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

2、標(biāo)簽的改進(jìn)工作

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

3、使用WebStorm打開的文件

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

4、支持Tailwind CSS

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

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

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

6、Markdown編輯和預(yù)覽改進(jìn)

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

7、全面支持pnpm

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

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

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

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

WebStorm將正確支持包含JavaScript的多行CSS和HTML塊的代碼格式。當(dāng)您添加這些更復(fù)雜的模板文字或重新格式化代碼時(shí)，IDE將正確縮進(jìn)。

10、改進(jìn)的調(diào)試體驗(yàn)

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

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

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

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

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

13、HTTP客戶端中的cURL轉(zhuǎn)換

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

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

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

15、更有用的導(dǎo)航欄

使用導(dǎo)航欄（可快速替代項(xiàng)目視圖），您可以輕松瀏覽項(xiàng)目的結(jié)構(gòu)并打開特定文件。我們還可以跳轉(zhuǎn)到JavaScript和TypeScript文件中的特定代碼元素。

16、快速文件預(yù)覽

最后，您可以通過在“ 項(xiàng)目”視圖中選擇文件來在編輯器中預(yù)覽文件！要啟用此功能，請?jiān)?ldquo;項(xiàng)目” 視圖中單擊齒輪圖標(biāo)，然后選擇“啟用預(yù)覽選項(xiàng)卡”和“單擊打開文件”。

17、隨處搜索功能更強(qiáng)大

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

常用快捷鍵

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：行移動

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

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)目中的任何代碼塊，它不是選中折疊，而是自動識別折疊。

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