WebStorm2020終于來啦。它是一款優(yōu)秀的HTML編程軟件，在html5和JavaScript 方面也很出色。可以說是“Web前端開發(fā)神器”、“強(qiáng)大的HTML5編輯器”、“最智能的JavaScript IDE”，支持強(qiáng)大的導(dǎo)航功能，動態(tài)錯誤檢測以及所有這些語言的重構(gòu)，非常適合編程人員來使用！

【功能特點】

　　一、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文件中實現(xiàn)，還可以在JavaScript和Flow中實現(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組合)。

　　五、工具

　　1、新的調(diào)試器控制臺：在JavaScript和Node.js調(diào)試工具窗口中使用新的，改進(jìn)的交互式調(diào)試器控制臺!它現(xiàn)在使用樹視圖顯示對象，它支持使用CSS設(shè)置日志消息樣式并使用console.group()和 對它們進(jìn)行分組console.groupEnd()。您還可以過濾掉任何類型的日志消息。

　　2、完成npm腳本：將新腳本添加到package.json文件時，WebStorm現(xiàn)在會為已安裝的軟件包提供的可用命令提供建議。鍵入后 node，IDE將建議文件夾和文件名。輸入后npm run，您將看到當(dāng)前文件中定義的任務(wù)列表。

　　3、改進(jìn)了對短絨的支持：webstorm現(xiàn)在可以 在一個項目中為ESLint和TSLint運(yùn)行多個進(jìn)程，以確保它們在單個項目和具有多個linter配置的項目中正常工作 。

　　4、支持Docker Compose：如果使用Docker測試Node.js應(yīng)用程序，現(xiàn)在可以使用Docker Compose文件中描述的配置從IDE 輕松運(yùn)行和調(diào)試應(yīng)用程序。

　　5、依賴項的版本范圍工具提示：在的package.json，按命令/ Ctrl鍵和版本懸停的依賴關(guān)系，看看運(yùn)行的時候可以安裝什么版本范圍 npm install或yarn install。

　　六、IDE

　　1、新的UI主題：您現(xiàn)在可以在WebStorm中使用新的豐富多彩的UI主題作為插件。選擇 深紫色，灰色和 青色光主題，或創(chuàng)建自己的主題 。

　　2、最近的位置彈出：在最近的位置彈出(Cmd的移-E / 按Ctrl + Shift + E)是一種新的方式 瀏覽各地的項目。它顯示了最近在編輯器中打開的所有文件和代碼行的列表。您可以開始鍵入以過濾結(jié)果并跳轉(zhuǎn)到您需要的代碼。

　　3、將項目另存為模板：通過“ 工具”菜單中的新操作“ 另存為模板 ” ，您現(xiàn)在可以使用項目作為在IDE歡迎屏幕上創(chuàng)建新項目的基礎(chǔ)。

　　4、所選文件類型的軟包裝：您現(xiàn)在可以在編輯器中為特定文件類型啟用軟包裝。為此，請打開“首選項/設(shè)置”| 編輯| 常規(guī)并在軟包裝文件字段中指定文件類型。

【怎么修改背景顏色】

　　默認(rèn)的WebStorm的背景色是純白色，這種顏色更容易讓我們引起眼部疲勞。

　　點擊英文的“文件”→“設(shè)置”

　　找到并點擊“Colors & Fonts”打開“Editor”，打開“編輯”后，找到“HTML”

　　打開“編輯”后，找到“HTML”

　　這時，查看右側(cè)，找到對應(yīng)的選框，選擇你所喜歡的背景色。

　　確定背景色后，找到并點擊“Save as”選項，隨意輸入你喜歡的名字。

【怎么修改字體】

　　打開WebStorm，點擊并打開“Colors & Fonts”，找到“Font”

　　這時，查看窗口右側(cè)，找到你剛剛輸入的那個命名，在找到Size選項，直接在Size后的窗口中輸入數(shù)字即可，我用的是18，用戶可以根據(jù)喜好修改就可以了。

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

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

　　這里我們選擇index.html；

　　我們直接在body里面修改一段文字，比如說修改為當(dāng)下軟件園歡迎你；

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