WebStorm2021是一款非常優(yōu)秀的web前端開發(fā)工具，軟件擁有清爽簡(jiǎn)潔的界面，功能十分強(qiáng)大，擁有智能編碼填充、調(diào)試追蹤與測(cè)試、無縫整合工具、VCS和實(shí)施等功能，可以極大的簡(jiǎn)化復(fù)雜的工作流程，大大提升用戶的工作效率，是一款非常適合編程人員來使用的Web前端編輯器。毫不夸張的說是這款軟件就是專門為前端而生的，因?yàn)檐浖杏性S許多多可以令前端工程師眼前一亮的地方，比如圖片寬高提示、標(biāo)簽重構(gòu)、文件重命名、 CSS 重構(gòu)、文件重命名、對(duì)業(yè)界最新技術(shù)的支持、可自定義代碼格式化規(guī)則、設(shè)置項(xiàng)是可搜索的、文件結(jié)構(gòu)分析等等功能，十分強(qiáng)大全面。同時(shí)WebStorm2021相比之前的版本，保留了原來的核心功能，并且新增了非常多實(shí)用和強(qiáng)大的功能，比如說能夠智能化地完成代碼輸入，自動(dòng)檢測(cè)錯(cuò)誤，更利于web前端開發(fā)新人使用，能夠?yàn)閃EB開發(fā)項(xiàng)目提供更好的開發(fā)支持。
下載地址：https://www.downkuai.com/soft/130555.html

軟件特色

1、代碼導(dǎo)航和用法搜索
函數(shù)、變量或標(biāo)簽的導(dǎo)航都可用一個(gè)熱鍵使用。
2、JavaScript單元測(cè)試
如果你是一個(gè)JavaScript的開發(fā)者，你應(yīng)該知道對(duì)于你的程序來說，代碼的質(zhì)量和正確性是非常重要的。那么，一致性測(cè)試和回歸性測(cè)試這種功能會(huì)使你輕松很多。
3、代碼檢測(cè)和快速修復(fù)
為保證更優(yōu)的代碼質(zhì)量，能快速地捕捉到JavaScript中的常見錯(cuò)誤并提供快速的修復(fù)方案。
4、批量代碼分析
無需通過點(diǎn)擊所有文件或部署到服務(wù)器。整個(gè)源代碼樹的啟動(dòng)代碼分析，可以在一個(gè)單一的視圖中看到所有的結(jié)果。
5、支持HTML5
用創(chuàng)建一個(gè)新的HTML文檔,以便于在代碼中使用HTML5。假如我們想要使用一個(gè)canvas標(biāo)簽。不但要當(dāng)鍵 入”<ca”時(shí)ide會(huì)知曉你的意圖并添加canvas標(biāo)簽，而且在按下space鍵后它會(huì)提示html5屬性已被ide支持。 ?6、顯示應(yīng)用樣式
是否想讓你的頁面中出現(xiàn)一個(gè)流行的樣式？右鍵單擊并選擇顯是應(yīng)用樣式標(biāo)簽。此命令將打開的標(biāo)簽應(yīng)用到通過CSS樣式的樹視圖里的樣式。

WebStorm 2021破解安裝教程

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

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

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

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

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

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

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、安裝破解完成，軟件已經(jīng)可以免費(fèi)使用了

功能介紹

1、智能代碼輔助功能
JetBrains WebStorm 2021為您提供JavaScript和編譯為JavaScript語言、 Node.js、HTML和CSS的智能代碼輔助。 享受代碼補(bǔ)全、強(qiáng)大的 導(dǎo)航功能、動(dòng)態(tài)錯(cuò)誤檢測(cè)以及所有這些 語言的重構(gòu)。
2、調(diào)試、跟蹤和測(cè)試
提供強(qiáng)大的內(nèi)置工具進(jìn)行調(diào)試、測(cè)試和跟蹤 您的客戶端和Node.js應(yīng)用程序。 只需很少配置和精心 集成到IDE中，使這些任務(wù)變得更加輕松。
3、無縫工具集成
集成流行的命令行工具，用于Web開發(fā)， 使您無需使用命令行即可獲得高效、簡(jiǎn)化的開發(fā) 體驗(yàn)。
4、IDE功能
建立在開源IntelliJ平臺(tái)之上，過去15年以來，JetBrains一直在不斷發(fā)展和完善這個(gè)平臺(tái)。 這個(gè)平臺(tái)可以針對(duì)您的開發(fā)工作流進(jìn)行微調(diào)并且能夠提供高度可定制的體驗(yàn)。
5、現(xiàn)代框架
為 Angular、 React、Vue.js 和 Meteor 提供先進(jìn)的代碼輔助。 享受對(duì)以React Native、PhoneGap、Cordova和 Ionic進(jìn)行移動(dòng)開發(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入門套件從歡迎屏幕啟動(dòng)新項(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中以簡(jiǎn)單一致的UI來運(yùn)行Grunt、Gulp或 npm任務(wù)。 所有任務(wù)都列舉在一個(gè)特殊工具 窗口中，所以只需雙擊任務(wù)名稱即可啟動(dòng)它。
13、代碼質(zhì)量工具
除了軟件自有的幾百種檢查外，它還可以根據(jù)代碼運(yùn)行ESLint、 JSCS、TSLint、Stylelint、 JSHint或JSLint，并直接在編輯器中 高亮顯示任何動(dòng)態(tài)問題。
更改UI主題
在設(shè)置/首選項(xiàng)對(duì)話框中 Ctrl+Alt+S，選擇外觀和行為| 外觀。
或者，按Ctrl+`并從“切換”列表中選擇“主題” 。
從“主題”列表中選擇UI主題：
IntelliJ Light：基于IntelliJ的IDE的傳統(tǒng)光源主題
macOS Light或Windows 10 Light：捆綁的插件提供了特定于OS的light主題
Darcula：默認(rèn)深色主題
高對(duì)比度：專為有色覺缺陷的用戶設(shè)計(jì)的主題
選擇與操作系統(tǒng)同步以使WebStorm檢測(cè)當(dāng)前系統(tǒng)設(shè)置，并相應(yīng)地使用默認(rèn)的深色或淺色主題。

IDE查看模式

WebStorm為特定的使用模式提供了特殊的查看模式。例如，如果您需要專注于代碼或向觀眾展示代碼。
在“全屏”模式下，WebStorm會(huì)擴(kuò)展主窗口以占據(jù)整個(gè)屏幕。在macOS上，所有操作系統(tǒng)控件都是隱藏的，但是如果將鼠標(biāo)指針懸停在屏幕頂部，則可以訪問主菜單。
在無干擾模式下，編輯器占據(jù)源代碼居中的整個(gè)主窗口。UI的所有其他元素都被隱藏（工具窗口，工具欄和編輯器選項(xiàng)卡），以幫助您專注于當(dāng)前文件的源代碼。您仍然可以使用快捷方式打開工具窗口，導(dǎo)航和執(zhí)行其他操作。
在Zen模式下，WebStorm結(jié)合了全屏模式和無干擾模式，因此主窗口會(huì)擴(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。
使用“查找動(dòng)作”退出Zen觀看模式
如配置鍵盤快捷鍵中所述，將可將查看模式切換為首選按鍵組合的動(dòng)作映射。

WebStorm 2021新功能

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

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

3、使用WebStorm打開的文件
現(xiàn)在，使WebStorm默認(rèn)打開特定文件類型非常簡(jiǎn)單。轉(zhuǎn)到 首選項(xiàng)/設(shè)置| 編輯| 文件類型，然后單擊將 文件類型與WebStorm關(guān)聯(lián)。
4、支持Tailwind CSS
WebStorm現(xiàn)在可以幫助您更高效地使用Tailwind CSS！它將自動(dòng)完成Tailwind類，在鼠標(biāo)懸停時(shí)向您顯示生成的CSS預(yù)覽，并支持您使用tailwind.config.js文件進(jìn)行的自定義。

5、根據(jù)用途創(chuàng)建React組件
您的代碼中有未解析的React組件嗎？將插入符號(hào)置于其上，按 Alt+Enter，然后從列表中選擇Create class / function component -WebStorm將為您創(chuàng)建相關(guān)的代碼構(gòu)造。
6、Markdown編輯和預(yù)覽改進(jìn)
Mermaid.js支持，重新格式化.md文件的功能以及預(yù)覽窗格和編輯器的自動(dòng)滾動(dòng)–這些和其他更改將顯著改善WebStorm中Markdown文件的使用體驗(yàn)。

7、全面支持pnpm
WebStorm現(xiàn)在完全支持pnpm軟件包管理器以及npm和yarn。在過去的一年中，我們一直在逐步實(shí)施對(duì)pnpm支持的改進(jìn)。我們已經(jīng)完成了畫龍點(diǎn)睛的工作。
8、集成的TypeScript和問題工具窗口
我們已經(jīng)將TypeScript語言服務(wù)集成到“問題”工具窗口中，并刪除了TypeScript工具窗口。我們進(jìn)行了此更改，以便更輕松地 從一個(gè)位置查看代碼中的問題。我們還將之前在TypeScript工具窗口中可用的動(dòng)作移至狀態(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é)對(duì)編程的新工具。此工具使您可以與其他人共享項(xiàng)目，以便可以實(shí)時(shí)一起處理它們。要嘗試Code With Me，請(qǐng)從“首選項(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請(qǐng)求編輯器并選擇“轉(zhuǎn)換為cURL并復(fù)制到剪貼板”選項(xiàng)，將HTTP請(qǐng)求導(dǎo)出到cURL。 Alt+Enter
14、更好的拼寫和語法檢查
現(xiàn)在，您可以更快地解決語法和拼寫問題-將鼠標(biāo)懸停在問題上，將彈出一個(gè)帶有說明和建議修復(fù)程序的彈出窗口。我們還增加了對(duì)更多語言的支持，并提高了語法檢查的質(zhì)量。
15、更有用的導(dǎo)航欄
使用導(dǎo)航欄（可快速替代項(xiàng)目視圖），您可以輕松瀏覽項(xiàng)目的結(jié)構(gòu)并打開特定文件。我們還可以跳轉(zhuǎn)到JavaScript和TypeScript文件中的特定代碼元素。
16、快速文件預(yù)覽
最后，您可以通過在“ 項(xiàng)目”視圖中選擇文件來在編輯器中預(yù)覽文件！要啟用此功能，請(qǐng)?jiān)凇绊?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：行移動(dòng)
11、Shift + Alt + up：塊移動(dòng)(if(){},while(){}語句塊的移動(dòng))
12、Ctrl + d：行復(fù)制
13、Ctrl + Shift + ]/[：選中塊代碼
14、Ctrl + /：?jiǎn)涡凶⑨?br>15、Ctrl + Shift + /：塊注釋
16、Ctrl + Shift + i：顯示當(dāng)前CSS選擇器或者JS函數(shù)的詳細(xì)信息
17、Ctrl + '-/+'：可以折疊項(xiàng)目中的任何代碼塊，它不是選中折疊，而是自動(dòng)識(shí)別折疊。
18、Ctrl + '.'：折疊選中的代碼的代碼。