軟件介紹
WebStorm2021免費版是一款免費的web前端開發(fā)東西，具有清新簡練的界面和強壯的功用，包含智能編碼填充、調(diào)試追尋與測驗、無縫整合東西、VCS和施行等功用。它能夠極大地簡化雜亂的作業(yè)流程，進步用戶的作業(yè)效率。這是一款專為前端工程師規(guī)劃的Web前端修改器，由于它包含許多令前端工程師眼前一亮的功用，如圖片寬高提示、標簽重構(gòu)、文件重命名、CSS重構(gòu)、文件重命名、對業(yè)界最新技能的支撐、自定義代碼格局化規(guī)矩、可查找的設置項、文件結(jié)構(gòu)剖析等等，功用十分強壯全面。
WebStorm2021免費版不只保留了本來的中心功用，還新增了十分多有用和強壯的功用，例如智能化代碼輸入、主動檢測過錯等，更適合web前端開發(fā)新手運用，并能夠為WEB開發(fā)項目供給更好的開發(fā)支撐。
WebStorm 2021裝置教程
1、在本站下載裝置包并解壓，可得到源程序，雙擊開端運轉(zhuǎn)裝置
2、挑選軟件裝置方位，點擊Browser可自行替換裝置途徑
3、挑選附加使命，自行挑選需求的進行勾選，這兒小編勾選的是x64
4、挑選開端菜單文件夾，默許即可
5、正在裝置中，速度仍是十分快的
6、裝置成功，點擊Finish退出軟件裝置導游
7、該軟件運轉(zhuǎn)后默許為英文，直接快捷鍵“Ctrl+ALT+S”翻開“Settings -> Plugins”進行設置
8、在查找框內(nèi)輸入“Chinese”，找到中文言語包點擊Install裝置
9、裝置成功后需求重啟軟件，點擊Restart IDE，然后彈出提示點擊Restart即可
10、裝置完結(jié)，軟件現(xiàn)已能夠免費運用了
IDE查看形式
WebStorm為特定的運用形式供給了特別的查看形式。例如，假設您需求專心于代碼或向觀眾展現(xiàn)代碼。
在“全屏”形式下，WebStorm會擴展主窗口以占有整個屏幕。在macOS上，一切操作系統(tǒng)控件都是躲藏的，可是假設將鼠標指針懸停在屏幕頂部，則能夠拜訪主菜單。
在無攪擾形式下，修改器占有源代碼居中的整個主窗口。UI的一切其他元素都被躲藏（東西窗口，東西欄和修改器選項卡），以協(xié)助您專心于當時文件的源代碼。您依然能夠運用快捷方式翻開東西窗口，導航和履行其他操作。
在Zen形式下，WebStorm結(jié)合了全屏形式和無攪擾形式，因而主窗口會擴展，只剩下帶有源代碼的修改器，您能夠?qū)Ｐ挠诰幊獭?/p>
在“演示”形式下，WebStorm擴展了修改器以占有整個屏幕，并增加了字體大小，以使觀眾更簡略看到自己在做什么。UI的其他元素是躲藏的，可是假設將鼠標指針懸停在屏幕頂部，則能夠運用相應的快捷方式或運用主菜單來顯現(xiàn)它們。
切換觀看形式
轉(zhuǎn)到視圖| 外觀，然后挑選進入<查看形式> 或退出<查看形式>。
經(jīng)過主菜單切換查看形式
運用快速切換器：
轉(zhuǎn)到視圖| 快速切換計劃（或按Ctrl+`）。
在“開關(guān)”彈出窗口中，挑選“查看形式”，然后挑選“ 進入<查看形式>” 或“退出<查看形式>”。
運用查找操作：按Ctrl+Shift+A，然后開端鍵入查看形式的稱號。然后從列表中挑選進入<觀看形式>或退出<觀看形式>并按 Enter。
運用“查找動作”退出Zen觀看形式
如裝備鍵盤快捷鍵中所述，將可將查看形式切換為首選按鍵組合的動作映射。
WebStorm 2021新功用
1、新的歡迎屏幕
咱們現(xiàn)已更新了歡迎屏幕！您不只能夠從中翻開和創(chuàng)立項目，還能夠調(diào)整最常用的設置，例如IDE主題和字體。
2、標簽的改善作業(yè)
咱們運用標簽愈加便利?，F(xiàn)在，您能夠經(jīng)過拖放選項卡或運用新的“ 在右側(cè)拆分中翻開”操作來拆分修改器 。此外，現(xiàn)在，固定的選項卡都帶有特別圖標符號，并顯現(xiàn)在選項卡欄的最初，因而您能夠更快地找到它們。
3、運用WebStorm翻開的文件
現(xiàn)在，使WebStorm默許翻開特定文件類型十分簡略。轉(zhuǎn)到 首選項/設置| 修改| 文件類型，然后單擊將 文件類型與WebStorm相關(guān)。
4、支撐Tailwind CSS
WebStorm現(xiàn)在能夠協(xié)助您更高效地運用Tailwind CSS！它將主動完結(jié)Tailwind類，在鼠標懸停時向您顯現(xiàn)生成的CSS預覽，并支撐您運用tailwind.config.js文件進行的自定義。
5、依據(jù)用處創(chuàng)立React組件
您的代碼中有未解析的React組件嗎？將刺進符號置于其上，按 Alt+Enter，然后從列表中挑選Create class / function component -WebStorm將為您創(chuàng)立相關(guān)的代碼結(jié)構(gòu)。
6、Markdown修改和預覽改善
Mermaid.js支撐，從頭格局化.md文件的功用以及預覽窗格和修改器的主動翻滾–這些和其他更改將明顯改善WebStorm中Markdown文件的運用體會。
7、全面支撐pnpm
WebStorm現(xiàn)在徹底支撐pnpm軟件包管理器以及npm和yarn。在曩昔的一年中，咱們一直在逐漸施行對pnpm支撐的改善。咱們現(xiàn)已完結(jié)了畫蛇添足的作業(yè)。
8、集成的TypeScript和問題東西窗口
咱們現(xiàn)已將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ā)和結(jié)對編程的新東西。此東西使您能夠與其別人同享項目，以便能夠?qū)崟r一同處理它們。要測驗Code With Me，請從“首選項/設置” | “設置”中裝置相應的插件。插件。
12、內(nèi)置的WebStorm根底訓練課程
為了協(xié)助您了解WebStorm的要害功用，咱們開發(fā)了一個交互式訓練課程。本課程能夠協(xié)助您學習完結(jié)一些常見使命，例如重構(gòu)代碼或閱讀項目。您能夠在“歡迎”屏幕上的“學習WebStorm”選項卡下找到它，也能夠轉(zhuǎn)到“協(xié)助” |“發(fā)現(xiàn)”。 從主菜單中挑選IDE Features Trainer。
13、HTTP客戶端中的cURL轉(zhuǎn)化
現(xiàn)在，您能夠經(jīng)過按下HTTP懇求修改器并挑選“轉(zhuǎn)化為cURL并仿制到剪貼板”選項，將HTTP懇求導出到cURL。 Alt+Enter
14、更好的拼寫和語法查看
現(xiàn)在，您能夠更快地處理語法和拼寫問題-將鼠標懸停在問題上，將彈出一個帶有闡明和主張修正程序的彈出窗口。咱們還增加了對更多言語的支撐，并進步了語法查看的質(zhì)量。
15、更有用的導航欄
運用導航欄（可快速代替項目視圖），您能夠輕松閱讀項意圖結(jié)構(gòu)并翻開特定文件。咱們還能夠跳轉(zhuǎn)到JavaScript和TypeScript文件中的特定代碼元素。
16、快速文件預覽
最終，您能夠經(jīng)過在“ 項目”視圖中挑選文件來在修改器中預覽文件！要啟用此功用，請在“項目” 視圖中單擊齒輪圖標，然后挑選“啟用預覽選項卡”和“單擊翻開文件”。
17、到處查找功用更強壯
在Shift+Shift彈呈現(xiàn)在能夠讓你做更多。首要，您能夠運用它進行根本數(shù)學運算-成果將當即顯現(xiàn)在彈出窗口中。它還將答應您查找Git數(shù)據(jù)，包含有關(guān)分支和提交的詳細信息。除此之外，一切發(fā)現(xiàn)現(xiàn)在都根據(jù)與查找查詢的相關(guān)性而不是其類型進行分組。
軟件特征
1、代碼導航和用法查找
函數(shù)、變量或標簽的導航都可用一個熱鍵運用。
2、JavaScript單元測驗
假設你是一個JavaScript的開發(fā)者，你應該知道關(guān)于你的程序來說，代碼的質(zhì)量和正確性是十分重要的。那么，一致性測驗和回歸性測驗這種功用會使你輕松許多。
3、代碼檢測和快速修正
為確保更優(yōu)的代碼質(zhì)量，能快速地捕捉到JavaScript中的常見過錯并供給快速的修正計劃。
4、批量代碼剖析
無需經(jīng)過點擊一切文件或布置到服務器。整個源代碼樹的發(fā)動代碼剖析，能夠在一個單一的視圖中看到一切的成果。
5、支撐HTML5
用創(chuàng)立一個新的HTML文檔,以便于在代碼中運用HTML5。假設咱們想要運用一個canvas標簽。不但要當鍵 入”
是否想讓你的頁面中呈現(xiàn)一個盛行的款式？右鍵單擊并挑選顯是使用款式標簽。此指令將翻開的標簽使用到經(jīng)過CSS款式的樹視圖里的款式。
常用快捷鍵
1、Ctrl + Shift + n：翻開工程中的文件，意圖是翻開當時工程下恣意目錄的文件。
2、Ctrl + j：輸出模板
3、Ctrl + b：跳到變量申明處
4、Ctrl + Alt + T：環(huán)繞包裹代碼(包含zencoding的Wrap with Abbreviation)
5、Ctrl + []：匹配 {}[]
6、Ctrl + F12：能夠顯現(xiàn)當時文件的結(jié)構(gòu)
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：顯現(xiàn)當時CSS挑選器或許JS函數(shù)的詳細信息
17、Ctrl + ‘-/+‘：能夠折疊項目中的任何代碼塊，它不是選中折疊，而是主動識別折疊。
18、Ctrl + ‘.‘：折疊選中的代碼的代碼。