WebStorm(Web開發(fā)神器)

WebStorm是JetBrains旗下一款JavaScript開發(fā)工具，支持多種語言和主流框架，內(nèi)置數(shù)百種檢查，覆蓋所有支持的語言。軟件還提供了錯誤警告，并提供許多快速修復(fù)選項，幫助用戶對整個項目運(yùn)行代碼質(zhì)量分析，被譽(yù)為“Web前端開發(fā)神器”，非常適合編程人員來使用的Web前端編輯器。

WebStorm2021軟件特色

支持的語言和框架

提供JavaScript、ECMAScript 6、TypeScript、CoffeeScript、Dart和Flow代碼輔助功能。

幫助編寫HTML、CSS、Less、Sass和Stylus代碼。

支持Node.js和主流框架，如React、Angular、 Vue.js、Meteor等。

代碼補(bǔ)全

WebStorm分析項目，為應(yīng)用程序中定義的所有方法、 函數(shù)、模塊、變量和類提供最佳代碼補(bǔ)全。 代碼輔助是上下文感知的，也可以特定于框架。

多個插入符號和選擇

具備每個人喜歡的多個插入符號和選擇。 同時編輯文件中的多個地方，甚至具備適用于它們的代碼補(bǔ)全和動態(tài)模板。 通過Alt+點(diǎn)擊來選擇編輯的地方。 或者，選擇當(dāng)前單詞出現(xiàn)的地方并同時編輯它們。

導(dǎo)航

WebStorm強(qiáng)大的導(dǎo)航功能，在處理大型項目時， 提高代碼效率并節(jié)省時間。

對于代碼中的任何方法、函數(shù)或變量，只需Ctrl+點(diǎn)擊或搜索其用途， 即可跳到其定義。

通過雙擊 Shift ，即可進(jìn)行隨處搜索（Search Everywhere ），在整個項目中搜索符號、文件或類名。

結(jié)構(gòu)視圖可以在當(dāng)前打開的文件中輕松導(dǎo)航。

WebStorm2021軟件功能

一、JavaScript和TypeScript

1、使用JavaScript解構(gòu)：通過解構(gòu)，您可以使用非常簡潔的語法將數(shù)組和對象中的值解壓縮到變量中。WebStorm的新重構(gòu)和意圖(Alt-Enter)可以幫助您輕松地將解構(gòu)引入 JavaScript或TypeScript代碼。

2、使用Promise將函數(shù)轉(zhuǎn)換為async / await：您可以自動更改返回Promise的函數(shù)，.then()并 .catch()調(diào)用使用async / await語法的異步函數(shù)。只需在功能名稱上按Alt-Enter，然后選擇轉(zhuǎn)換為異步功能。這不僅可以在TypeScript文件中實(shí)現(xiàn)，還可以在JavaScript和Flow中實(shí)現(xiàn)。

二、構(gòu)架

1、對Angular應(yīng)用程序的新檢查：對于Angular應(yīng)用程序，webstorm添加了17項新檢查，可幫助您在鍵入時檢測應(yīng)用程序中的Angular特定錯誤，并建議快速修復(fù)。這些檢查在TypeScript和模板文件中都有效，并檢查綁定，指令，組件和許多其他內(nèi)容的使用。

2、Angular項目中的導(dǎo)航更容易：在Angular應(yīng)用程序中，您現(xiàn)在可以使用相關(guān)符號...彈出窗口(Ctrl-Cmd-Up / Ctrl + Alt + Home)在不同的組件文件(如TypeScript，模板，樣式和測試文件)之間快速切換。在TypeScript文件中，彈出窗口還將列出導(dǎo)入此文件的所有符號。

3、改進(jìn)了對Vue應(yīng)用程序中TypeScript的支持：webstorm現(xiàn)在使用TypeScript語言服務(wù)以及對.vue文件中任何TypeScript代碼的自己的TypeScript支持。這意味著您現(xiàn)在可以獲得更準(zhǔn)確的類型檢查和類型信息，您將能夠使用服務(wù)提供的快速修復(fù)程序，并在TypeScript工具窗口中查看當(dāng)前文件中的所有TypeScript錯誤。

4、React鉤子的提取方法：該提取方法重構(gòu)現(xiàn)在與當(dāng)?shù)氐墓δ芎褪褂媒鈽?gòu)的返回值，使得它非常適合提取自定義作出反應(yīng)掛鉤。

5、改進(jìn)了道具的完成：webstorm現(xiàn)在為使用擴(kuò)展運(yùn)算符合并的React props提供了更好的代碼完成。

三、HTML和樣式表

1、更新文檔：CSS屬性和HTML標(biāo)記及屬性的文檔(F1)現(xiàn)在顯示有關(guān)MDN的瀏覽器支持的最新描述和信息，以及指向完整MDN文章的鏈接。

2、CSS的瀏覽器兼容性檢查：要檢查目標(biāo)瀏覽器版本是否支持您使用的所有CSS屬性，可以在首選項中啟用新的 瀏覽器兼容性檢查。

3、對CSS模塊的Camel案例支持：如果在項目中使用CSS模塊，JavaScript文件中的類的代碼完成現(xiàn)在將建議帶有破折號的類名的駝峰版本。

4、提取CSS變量：使用新的Extract CSS變量重構(gòu)，您可以使用語法將當(dāng)前.css文件中值的所有用法替換 為變量var(--var-name)。

四、測試

1、突出顯示測試中的失敗行：當(dāng)您使用Jest，Karma，Mocha或Protractor運(yùn)行測試并且某些測試失敗時，您現(xiàn)在可以在編輯器中看到問題發(fā)生的位置。IDE將使用堆棧跟蹤中的信息并突出顯示失敗的代碼。在懸停時，您將看到來自測試運(yùn)行器的錯誤消息，您可以立即開始調(diào)試測試。

2、使用Cucumber和TypeScript進(jìn)行測試：使用Cucumber和TypeScript?現(xiàn)在，您可以跳到從步驟.feature文件 到它們的定義中 的.ts文件中使用速戰(zhàn)速決(和產(chǎn)生缺定義Alt-Enter組合)。

使用教程

怎么運(yùn)行html項目

首先，我們打開自己的WebStrom軟件，打開項目，找到任意一個.html的文件;

這里我們選擇index.html;

我們直接在body里面修改一段文字

最后進(jìn)行編譯，然后瀏覽頁面即可看到效果。