WebStorm 2020中文版是一款功能強大的Web前端編輯開發(fā)工具。WebStorm 2020官方版擁有強大的導航功能，內(nèi)置了智能代碼提示和代碼結(jié)構(gòu)化，提高了代碼開發(fā)速度。WebStorm 2020軟件還優(yōu)化了Vue.js的體驗，同時集成PhoneGap、Cordova等移動開發(fā)框架功能，適合編程人員使用。 相似軟件版本說明軟件地址edgecam2012 官方版查看計蒜客少兒編程1.0.3 官方版查看Coding Galaxy1.4.6 最新版查看DebugTrack2.4.530.1830 官方版查看Regester2.0.1 官方版查看

WebStorm 2020功能介紹

1、使用 Prettier 作為默認格式化程序

想要使用 Prettier 而不是內(nèi)置的格式化程序來整理代碼? 借助此更新，這會變得比以前更容易。 只需勾選新的 On code reformat 復選框，IDE 就會在您重新格式化 .js、.ts、.jsx 和 .tsx 時使用 Prettier。 也可以輕松添加其他文件類型。

2、獲得對 Nuxt.js 的支持

讓 WebStorm 幫助您更高效地使用 Nuxt.js! 在模板部分和 nuxt.config.js 文件中使用編碼輔助功能，查看核心 Nuxt 組件的快速文檔，在 Nuxt 項目中獲得對 Vuex 庫的支持，等等。

3、快速配置 Vue 特定的代碼樣式

借助 Vue 特定的代碼樣式設置，您可以選擇哪些頂級標記的內(nèi)容應縮進，以及縮進對于整個 Vue 文件都應相同還是應取決于語言設置。 您還可以更改內(nèi)插在 Vue 代碼中的格式。

4、借助新意圖操作節(jié)省時間

新的智能意圖操作 (Alt+Enter) 將幫助您更快速地執(zhí)行有關可選鏈和空值合并以及循環(huán)的一些操作。 例如，您現(xiàn)在可以將帶有數(shù)字索引的 for 循環(huán)快速轉(zhuǎn)換為 forEach 數(shù)組方法。

5、直接在編輯器中呈現(xiàn) JSDoc 注釋

閱讀 JSDoc 注釋可能是一個挑戰(zhàn)，因為您必須查看所有標記。 為了便于閱讀，我們將這些注釋直接呈現(xiàn)在編輯器中，消除了不必要的干擾。

6、支持從工具窗口啟動調(diào)試

WebStorm 現(xiàn)在允許從 Run 和 Terminal 工具窗口啟動調(diào)試會話。 例如，如果您運行像 npmstart 一樣的腳本，按住 Ctrl+Shift 并點擊該腳本輸出中的 http 鏈接，IDE 將為您啟動 JavaScript 調(diào)試會話。

7、改進了調(diào)試時的項預覽

在調(diào)試時，您會注意到在內(nèi)置控制臺中對項預覽進行了一些增強。 借助這些功能增強，無需將對象展開，即可查看對象的更有用詳細信息。

8、獲得對 @use 和 @forward 規(guī)則的更好支持

去年，我們引入了對 Sass 和 SCSS 中使用的 @use 和 @forward 規(guī)則的一些初始支持。 現(xiàn)在，我們擴展了這種支持，因此您可以期待 WebStorm 為導入的符號提供更智能的補全和改進的解析。

9、在 IDE 中預覽 WebP 圖像

從 v2020.2 開始，您可以直接在 WebStorm 中預覽 .webp 圖像，就像您預覽 .jpeg 或 .png 文件一樣。 以前，WebStorm 無法識別 .webp 圖像格式，這使您在需要查看此類圖片時必須切換到其他應用程序。

10、享受對 GitHub 拉取請求的全面支持

在 WebStorm 2020.2 中，我們對 GitHub 拉取請求提供了擴展支持，使其更易于使用。 現(xiàn)在，您可以查看并合并所有 PR，還可以審查代碼 – 所有這些都不需要離開 IDE。

11、為 Git 操作重新設計了對話框

WebStorm 2020.2 消除了合并、拉取和衍合操作對話框中的混亂。 此外，還添加了一些新選項。

12、從日志 squash 本地提交

現(xiàn)在，您可以在 Git 工具窗口的 Log 選項卡中選擇多個本地提交，然后將其 squash 為一個提交。 可以從上下文菜單執(zhí)行此操作，點擊右鍵可調(diào)用上下文菜單。

13、更快地識別代碼中的問題

使用新的 Inspections 微件和 Problems 工具窗口，您可以獲得有關當前文件中警告、錯誤和其他問題數(shù)量的詳細信息，并在它們之間瀏覽。

14、在每個選定行的末尾添加脫字符號

用于處理多個脫字符號的新操作 (Alt+Shift+G) 允許您在每個選定行的末尾快速放置脫字符號，并在添加所有脫字符號后立即移除所選內(nèi)容。

WebStorm 2020軟件特色

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

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

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

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

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

三、HTML和樣式表

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

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

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

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

四、測試

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

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

五、工具

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

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

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

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

5、依賴項的版本范圍工具提示：在的package.json，按命令/ Ctrl鍵和版本懸停的依賴關系，看看運行的時候可以安裝什么版本范圍 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)建新項目的基礎。

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

WebStorm 2020常見問題

怎么修改字體

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

這時，查看窗口右側(cè)，找到你剛剛輸入的那個命名，在找到Size選項，直接在Size后的窗口中輸入數(shù)字即可

WebStorm 2020更新日志

-在 Vue 模板部分的文件引用中增加了對 vue-loader 的支持

-現(xiàn)在，“本地歷史記錄”功能應該可以在 WSL 2 上正常運行

-修復了許多回歸錯誤：WEB-46751, WEB-46669, WEB-46818, WEB-46595, WEB-46684, and WEB-46754

-重新設計了將可選鏈接和無效合并擴展到顯式檢查的意圖(intention)。它在 2020.2 的 EAP 版本中引入，有用戶反饋仍有可-改進之處，因此 2020.2 中關閉了此意圖?，F(xiàn)在你可以嘗試改進的版本

-在 Angular 項目中，WebStorm 現(xiàn)在支持 ng-template 標記上的結(jié)構(gòu)指令的類型推斷

-解決了幾個性能問題