WebStorm 2020功能介紹
1、使用 Prettier 作為默認(rèn)格式化程序
想要使用 Prettier 而不是內(nèi)置的格式化程序來整理代碼? 借助此更新,這會(huì)變得比以前更容易。 只需勾選新的 On code reformat 復(fù)選框,IDE 就會(huì)在您重新格式化 .js、.ts、.jsx 和 .tsx 時(shí)使用 Prettier。 也可以輕松添加其他文件類型。
2、獲得對(duì) Nuxt.js 的支持
讓 WebStorm 幫助您更高效地使用 Nuxt.js! 在模板部分和 nuxt.config.js 文件中使用編碼輔助功能,查看核心 Nuxt 組件的快速文檔,在 Nuxt 項(xiàng)目中獲得對(duì) Vuex 庫的支持,等等。
3、快速配置 Vue 特定的代碼樣式
借助 Vue 特定的代碼樣式設(shè)置,您可以選擇哪些頂級(jí)標(biāo)記的內(nèi)容應(yīng)縮進(jìn),以及縮進(jìn)對(duì)于整個(gè) Vue 文件都應(yīng)相同還是應(yīng)取決于語言設(shè)置。 您還可以更改內(nèi)插在 Vue 代碼中的格式。
4、借助新意圖操作節(jié)省時(shí)間
新的智能意圖操作 (Alt+Enter) 將幫助您更快速地執(zhí)行有關(guān)可選鏈和空值合并以及循環(huán)的一些操作。 例如,您現(xiàn)在可以將帶有數(shù)字索引的 for 循環(huán)快速轉(zhuǎn)換為 forEach 數(shù)組方法。
5、直接在編輯器中呈現(xiàn) JSDoc 注釋
閱讀 JSDoc 注釋可能是一個(gè)挑戰(zhàn),因?yàn)槟仨毑榭此袠?biāo)記。 為了便于閱讀,我們將這些注釋直接呈現(xiàn)在編輯器中,消除了不必要的干擾。
6、支持從工具窗口啟動(dòng)調(diào)試
WebStorm 現(xiàn)在允許從 Run 和 Terminal 工具窗口啟動(dòng)調(diào)試會(huì)話。 例如,如果您運(yùn)行像 npmstart 一樣的腳本,按住 Ctrl+Shift 并點(diǎn)擊該腳本輸出中的 http 鏈接,IDE 將為您啟動(dòng) JavaScript 調(diào)試會(huì)話。
7、改進(jìn)了調(diào)試時(shí)的項(xiàng)預(yù)覽
在調(diào)試時(shí),您會(huì)注意到在內(nèi)置控制臺(tái)中對(duì)項(xiàng)預(yù)覽進(jìn)行了一些增強(qiáng)。 借助這些功能增強(qiáng),無需將對(duì)象展開,即可查看對(duì)象的更有用詳細(xì)信息。
8、獲得對(duì) @use 和 @forward 規(guī)則的更好支持
去年,我們引入了對(duì) Sass 和 SCSS 中使用的 @use 和 @forward 規(guī)則的一些初始支持。 現(xiàn)在,我們擴(kuò)展了這種支持,因此您可以期待 WebStorm 為導(dǎo)入的符號(hào)提供更智能的補(bǔ)全和改進(jìn)的解析。
9、在 IDE 中預(yù)覽 WebP 圖像
從 v2020.2 開始,您可以直接在 WebStorm 中預(yù)覽 .webp 圖像,就像您預(yù)覽 .jpeg 或 .png 文件一樣。 以前,WebStorm 無法識(shí)別 .webp 圖像格式,這使您在需要查看此類圖片時(shí)必須切換到其他應(yīng)用程序。
10、享受對(duì) GitHub 拉取請(qǐng)求的全面支持
在 WebStorm 2020.2 中,我們對(duì) GitHub 拉取請(qǐng)求提供了擴(kuò)展支持,使其更易于使用。 現(xiàn)在,您可以查看并合并所有 PR,還可以審查代碼 – 所有這些都不需要離開 IDE。
11、為 Git 操作重新設(shè)計(jì)了對(duì)話框
WebStorm 2020.2 消除了合并、拉取和衍合操作對(duì)話框中的混亂。 此外,還添加了一些新選項(xiàng)。
12、從日志 squash 本地提交
現(xiàn)在,您可以在 Git 工具窗口的 Log 選項(xiàng)卡中選擇多個(gè)本地提交,然后將其 squash 為一個(gè)提交。 可以從上下文菜單執(zhí)行此操作,點(diǎn)擊右鍵可調(diào)用上下文菜單。
13、更快地識(shí)別代碼中的問題
使用新的 Inspections 微件和 Problems 工具窗口,您可以獲得有關(guān)當(dāng)前文件中警告、錯(cuò)誤和其他問題數(shù)量的詳細(xì)信息,并在它們之間瀏覽。
14、在每個(gè)選定行的末尾添加脫字符號(hào)
用于處理多個(gè)脫字符號(hào)的新操作 (Alt+Shift+G) 允許您在每個(gè)選定行的末尾快速放置脫字符號(hào),并在添加所有脫字符號(hào)后立即移除所選內(nèi)容。
WebStorm 2020軟件特色
一、JavaScript和TypeScript
1、使用JavaScript解構(gòu):通過解構(gòu),您可以使用非常簡潔的語法將數(shù)組和對(duì)象中的值解壓縮到變量中。WebStorm的新重構(gòu)和意圖(Alt-Enter)可以幫助您輕松地將解構(gòu)引入 JavaScript或TypeScript代碼。
2、使用Promise將函數(shù)轉(zhuǎn)換為async / await:您可以自動(dòng)更改返回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、對(duì)Angular應(yīng)用程序的新檢查:對(duì)于Angular應(yīng)用程序,webstorm添加了17項(xiàng)新檢查,可幫助您在鍵入時(shí)檢測(cè)應(yīng)用程序中的Angular特定錯(cuò)誤,并建議快速修復(fù)。這些檢查在TypeScript和模板文件中都有效,并檢查綁定,指令,組件和許多其他內(nèi)容的使用。
2、Angular項(xiàng)目中的導(dǎo)航更容易:在Angular應(yīng)用程序中,您現(xiàn)在可以使用相關(guān)符號(hào)...彈出窗口(Ctrl-Cmd-Up / Ctrl + Alt + Home)在不同的組件文件(如TypeScript,模板,樣式和測(cè)試文件)之間快速切換。在TypeScript文件中,彈出窗口還將列出導(dǎo)入此文件的所有符號(hào)。
3、改進(jìn)了對(duì)Vue應(yīng)用程序中TypeScript的支持:webstorm現(xiàn)在使用TypeScript語言服務(wù)以及對(duì).vue文件中任何TypeScript代碼的自己的TypeScript支持。這意味著您現(xiàn)在可以獲得更準(zhǔn)確的類型檢查和類型信息,您將能夠使用服務(wù)提供的快速修復(fù)程序,并在TypeScript工具窗口中查看當(dāng)前文件中的所有TypeScript錯(cuò)誤。
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屬性,可以在首選項(xiàng)中啟用新的 瀏覽器兼容性檢查。
3、對(duì)CSS模塊的Camel案例支持:如果在項(xiàng)目中使用CSS模塊,JavaScript文件中的類的代碼完成現(xiàn)在將建議帶有破折號(hào)的類名的駝峰版本。
4、提取CSS變量:使用新的Extract CSS變量重構(gòu),您可以使用語法將當(dāng)前.css文件中值的所有用法替換 為變量var(--var-name)。
四、測(cè)試
1、突出顯示測(cè)試中的失敗行:當(dāng)您使用Jest,Karma,Mocha或Protractor運(yùn)行測(cè)試并且某些測(cè)試失敗時(shí),您現(xiàn)在可以在編輯器中看到問題發(fā)生的位置。IDE將使用堆棧跟蹤中的信息并突出顯示失敗的代碼。在懸停時(shí),您將看到來自測(cè)試運(yùn)行器的錯(cuò)誤消息,您可以立即開始調(diào)試測(cè)試。
2、使用Cucumber和TypeScript進(jìn)行測(cè)試:使用Cucumber和TypeScript?現(xiàn)在,您可以跳到從步驟.feature文件 到它們的定義中 的.ts文件中使用速戰(zhàn)速?zèng)Q(和產(chǎn)生缺定義Alt-Enter組合)。
五、工具
1、新的調(diào)試器控制臺(tái):在JavaScript和Node.js調(diào)試工具窗口中使用新的,改進(jìn)的交互式調(diào)試器控制臺(tái)!它現(xiàn)在使用樹視圖顯示對(duì)象,它支持使用CSS設(shè)置日志消息樣式并使用console.group()和 對(duì)它們進(jìn)行分組console.groupEnd()。您還可以過濾掉任何類型的日志消息。
2、完成npm腳本:將新腳本添加到package.json文件時(shí),WebStorm現(xiàn)在會(huì)為已安裝的軟件包提供的可用命令提供建議。鍵入后 node,IDE將建議文件夾和文件名。輸入后npm run,您將看到當(dāng)前文件中定義的任務(wù)列表。
3、改進(jìn)了對(duì)短絨的支持:webstorm現(xiàn)在可以 在一個(gè)項(xiàng)目中為ESLint和TSLint運(yùn)行多個(gè)進(jìn)程,以確保它們?cè)趩蝹€(gè)項(xiàng)目和具有多個(gè)linter配置的項(xiàng)目中正常工作 。
4、支持Docker Compose:如果使用Docker測(cè)試Node.js應(yīng)用程序,現(xiàn)在可以使用Docker Compose文件中描述的配置從IDE 輕松運(yùn)行和調(diào)試應(yīng)用程序。
5、依賴項(xiàng)的版本范圍工具提示:在的package.json,按命令/ Ctrl鍵和版本懸停的依賴關(guān)系,看看運(yùn)行的時(shí)候可以安裝什么版本范圍 npm install或yarn install。
六、IDE
1、新的UI主題:您現(xiàn)在可以在WebStorm中使用新的豐富多彩的UI主題作為插件。選擇 深紫色,灰色和 青色光主題,或創(chuàng)建自己的主題 。
2、最近的位置彈出:在最近的位置彈出(Cmd的移-E / 按Ctrl + Shift + E)是一種新的方式 瀏覽各地的項(xiàng)目。它顯示了最近在編輯器中打開的所有文件和代碼行的列表。您可以開始鍵入以過濾結(jié)果并跳轉(zhuǎn)到您需要的代碼。
3、將項(xiàng)目另存為模板:通過“ 工具”菜單中的新操作“ 另存為模板 ” ,您現(xiàn)在可以使用項(xiàng)目作為在IDE歡迎屏幕上創(chuàng)建新項(xiàng)目的基礎(chǔ)。
4、所選文件類型的軟包裝:您現(xiàn)在可以在編輯器中為特定文件類型啟用軟包裝。為此,請(qǐng)打開“首選項(xiàng)/設(shè)置”| 編輯| 常規(guī)并在軟包裝文件字段中指定文件類型。
WebStorm 2020常見問題
怎么修改字體
打開WebStorm,點(diǎn)擊并打開“Colors & Fonts”,找到“Font”
這時(shí),查看窗口右側(cè),找到你剛剛輸入的那個(gè)命名,在找到Size選項(xiàng),直接在Size后的窗口中輸入數(shù)字即可
WebStorm 2020更新日志
-在 Vue 模板部分的文件引用中增加了對(duì) vue-loader 的支持
-現(xiàn)在,“本地歷史記錄”功能應(yīng)該可以在 WSL 2 上正常運(yùn)行
-修復(fù)了許多回歸錯(cuò)誤:WEB-46751, WEB-46669, WEB-46818, WEB-46595, WEB-46684, and WEB-46754
-重新設(shè)計(jì)了將可選鏈接和無效合并擴(kuò)展到顯式檢查的意圖(intention)。它在 2020.2 的 EAP 版本中引入,有用戶反饋仍有可-改進(jìn)之處,因此 2020.2 中關(guān)閉了此意圖?,F(xiàn)在你可以嘗試改進(jìn)的版本
-在 Angular 項(xiàng)目中,WebStorm 現(xiàn)在支持 ng-template 標(biāo)記上的結(jié)構(gòu)指令的類型推斷
-解決了幾個(gè)性能問題
華軍小編推薦:
WebStorm 2020作為一款不斷更新迭代的編程工具軟件,已經(jīng)在一次又一次的版本更新中改頭換面,更加符合用戶需求,給用戶帶來了極高的使用體驗(yàn),華軍軟件園小編推薦大家下載使用,另外還有快表軟件、AlphaEbot動(dòng)作編輯軟件、河小象編程客戶端、自動(dòng)化測(cè)試工具AutoRunner、小海龜LOGO語言等相關(guān)軟件也還不錯(cuò)哦,可以下載使用。
您的評(píng)論需要經(jīng)過審核才能顯示
有用
有用
有用