
【基本介紹】
WebStorm 是jetbrains公司旗下一款JavaScript 開發(fā)工具。目前已經(jīng)被廣大中國(guó)JS開發(fā)者譽(yù)為“Web前端開發(fā)神器”、“最強(qiáng)大的HTML5編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源,繼承了IntelliJ IDEA強(qiáng)大的JS部分的功能。WebStorm2019破解版是一款功能強(qiáng)大的開發(fā)工具,這款強(qiáng)大的web前端開發(fā)神器使用為用戶提供 了完善的開發(fā)必備功能和工具,讓大家以更加輕松快捷的方式進(jìn)行開發(fā)編輯操作,WebStorm為您提供JavaScript和編譯到JavaScript語(yǔ)言,Node.js,HTML和CSS的智能編碼幫助。使用現(xiàn)代JavaScript生態(tài)系統(tǒng)的全部功能-Webstorm為您提供服務(wù)!享受智能代碼完成、即時(shí)錯(cuò)誤檢測(cè)、強(qiáng)大的javascript、typescript、樣式表語(yǔ)言和所有最流行的框架的導(dǎo)航和重構(gòu)。WebStorm2019并提供了強(qiáng)大的內(nèi)置工具,用于調(diào)試,測(cè)試和跟蹤客戶端和Node.js應(yīng)用程序。通過最少的配置和周到的IDE集成,使用WebStorm可以更輕松地完成這些任務(wù)。WebStorm 2019.1是2019年的第一個(gè)新版本,使用為JavaScript和TypeScript帶來了新的智能意圖,改進(jìn)了對(duì)Angular的支持,更新了CSS和HTML文檔,更強(qiáng)大的調(diào)試控制臺(tái)等等!
【軟件功能】
智能編碼輔助WebStorm為您提供JavaScript和編譯到JavaScript語(yǔ)言,Node.js,HTML和CSS的智能編碼幫助。 享受代碼完成,強(qiáng)大的導(dǎo)航功能,動(dòng)態(tài)錯(cuò)誤檢測(cè)以及所有這些語(yǔ)言的重構(gòu)。
現(xiàn)代框架
WebStorm為Angular,React,Vue.js和Meteor提供高級(jí)編碼幫助。 歡迎使用React Native,PhoneGap,Cordova和Ionic進(jìn)行移動(dòng)開發(fā),并使用Node.js為服務(wù)器端開發(fā)。 一體化IDE!
智能編輯器
IDE會(huì)分析您的項(xiàng)目,以便為所有支持的語(yǔ)言提供最佳的代碼完成結(jié)果。 當(dāng)您鍵入并建議快速修復(fù)選項(xiàng)時(shí),數(shù)以百計(jì)的內(nèi)置檢查會(huì)報(bào)告任何可能的問題。
導(dǎo)航和搜索
WebStorm可幫助您更有效地繞過代碼,并在處理大型項(xiàng)目時(shí)節(jié)省時(shí)間。 只需單擊一下即可跳轉(zhuǎn)到方法,函數(shù)或變量定義,或搜索用法。
調(diào)試,跟蹤和測(cè)試
WebStorm提供了強(qiáng)大的內(nèi)置工具,用于調(diào)試,測(cè)試和跟蹤客戶端和Node.js應(yīng)用程序。 通過最少的配置和周到的IDE集成,使用WebStorm可以更輕松地完成這些任務(wù)。
調(diào)試
WebStorm為您的客戶端代碼(適用于Chrome)和Node.js應(yīng)用程序提供內(nèi)置調(diào)試器。 放置斷點(diǎn),逐步執(zhí)行代碼并計(jì)算表達(dá)式 - 所有這些都不需要離開IDE。
測(cè)試
由于WebStorm與Karma測(cè)試運(yùn)行器,Mocha,Jest和Protractor集成,因此可以輕松執(zhí)行測(cè)試。 在IDE內(nèi)部運(yùn)行和調(diào)試測(cè)試,以漂亮可視的格式查看結(jié)果,并導(dǎo)航到測(cè)試代碼。
跟蹤和分析
WebStorm具有spy-js,這是一種內(nèi)置工具,可幫助您跟蹤JavaScript代碼。 探索文件如何與函數(shù)調(diào)用連接,并有效地識(shí)別任何可能的瓶頸。

無縫工具集成
WebStorm與用于Web開發(fā)的流行命令行工具集成,無需使用命令行即可為您提供高效,簡(jiǎn)化的開發(fā)體驗(yàn)。
構(gòu)建工具
享受簡(jiǎn)單的統(tǒng)一UI,直接從IDE運(yùn)行Grunt,Gulp或npm任務(wù)。 所有任務(wù)都列在特殊工具窗口中,因此只需雙擊任務(wù)名稱即可啟動(dòng)它。
代碼質(zhì)量工具
除了數(shù)百個(gè)WebStorm自己的檢查之外,它還可以針對(duì)您的代碼運(yùn)行ESLint,JSCS,TSLint,Stylelint,JSHint或JSLint,并在編輯器中即時(shí)突出顯示任何問題。
項(xiàng)目模板
使用流行的項(xiàng)目模板(如Express或Web入門套件)從歡迎屏幕啟動(dòng)新項(xiàng)目,并通過與Yeoman的集成訪問更多項(xiàng)目生成器。
IDE功能
WebStorm建立在開源IntelliJ平臺(tái)之上,我們JetBrains已經(jīng)開發(fā)和完善了超過15年。 享受其提供的微調(diào)但高度可定制的體驗(yàn),以適應(yīng)您的開發(fā)工作流程。
VCS
WebStorm提供了統(tǒng)一的UI,可與許多流行的版本控制系統(tǒng)配合使用,確保在git,GitHub,SVN,Mercurial和Perforce之間提供一致的用戶體驗(yàn)。
本地歷史
無論您是否使用VCS,本地歷史記錄都可以成為真正的代碼保護(hù)程序。 您可以隨時(shí)檢查特定文件或目錄的歷史記錄,并回滾到以前的任何版本。

【新增特性】
JavaScript & TypeScript通過使用名為"destructuring"的功能,我們可以使用非常簡(jiǎn)潔的語(yǔ)法將數(shù)組和對(duì)象中的值解提取到變量中。WebStorm 新的重構(gòu)和意圖功能(Alt-Enter)可以幫助我們輕松地將 destructuring 引入 JavaScript 或 TypeScript 代碼。

Angular 框架
對(duì)于 Angular 應(yīng)用程序,WebStorm 新增了 17 項(xiàng)新檢查,可幫助我們?cè)诰幋a時(shí)檢測(cè)應(yīng)用程序中與 Angular 相關(guān)的特定錯(cuò)誤,并提供快速修復(fù)的建議。這些檢查在 TypeScript 和模板文件中都會(huì)生效,并會(huì)檢查綁定、指令、組件和許多其他內(nèi)容的使用。

在類型信息工具提示和文檔中突出顯示語(yǔ)法
現(xiàn)在,在 JavaScript 和 TypeScript 文件中顯示表達(dá)式類型(Cmd / Ctrl-hover)的工具提示會(huì)有語(yǔ)法突出顯示。

文檔彈出窗口中顯示的代碼示例也添加了突出顯示。

在導(dǎo)入中使用別名和路徑映射
現(xiàn)在在 JavaScript 和 TypeScript 文件中自動(dòng)添加導(dǎo)入時(shí),將使用別名和路徑映射。
其他改進(jìn)和修復(fù)
支持使用字符串編寫的 Cucumber 步驟定義
改進(jìn) JavaScript 調(diào)試工具窗口中的“在瀏覽器中重新加載”操作
修復(fù)了編輯某些 TypeScript 類型時(shí)的性能問題
從終端跳轉(zhuǎn)到 Esc 編輯器的問題
改進(jìn)了 macOS 上的字體渲染
【安裝教程】
webstorm2019安裝教程1、在起點(diǎn)軟件園下載WebStorm2019安裝包,并雙擊打開,點(diǎn)擊next開始安裝軟件

2、軟件的安裝地址是C:\Program Files\JetBrains\WebStorm 2019.1.1

3、提示安裝方式,這里有32、64版本選擇,根據(jù)電腦系統(tǒng)進(jìn)行勾選

4、點(diǎn)擊install就可以安裝軟件

5、提示安裝進(jìn)度,等待幾分鐘直到軟件安裝結(jié)束

6、不要打開軟件,點(diǎn)擊finish退出安裝

【破解教程】
webstorm2019怎么破解?webstorm2019破解教程1、將漢化補(bǔ)丁resources_cn.jar復(fù)制到軟件安裝地址下的“l(fā)ib”文件夾

2、并且需要?jiǎng)h除官方的英文補(bǔ)丁resources_en.jar,建議復(fù)制到其他地方保存,不要和漢化補(bǔ)丁保存在一起,也可以直接刪除

3、在C:\Windows\System32\drivers\etc找到host文件,復(fù)制下方的地址到host保存
0.0.0.0 account.jetbrains.com
0.0.0.0 www.jetbrains.com

4、打開軟件,這里是軟件的中文界面,點(diǎn)擊幫助找到register激活軟件

5、點(diǎn)擊中間的英文手動(dòng)輸入注冊(cè)碼,打開您下載的破解文件夾,找到注冊(cè)碼

6、將下方的注冊(cè)碼全部復(fù)制到軟件,這樣就可以完成激活

7、如圖所示,點(diǎn)擊確定就可以激活正式版,從而讓用戶可以免費(fèi)使用軟件

8、提示已經(jīng)激活完畢,現(xiàn)在軟件就是正式版

9、點(diǎn)擊關(guān)于webstorm,提示正版說明是激活成功的,如果激活不成功建議重啟軟件


【使用教程】
webstorm怎么用?解構(gòu)
為了幫助您在代碼中開始使用解構(gòu),WebStorm 2019.1添加了一組新的重構(gòu)和意圖,可以為您的代碼引入解構(gòu)。讓我們看看在處理對(duì)象和數(shù)組時(shí)如何使用它們。
如果你有一段代碼從中獲取數(shù)組或?qū)ο笾械亩鄠€(gè)值,現(xiàn)在可以使用新的替換對(duì)象或數(shù)組解構(gòu)意圖(Alt-Enter)來簡(jiǎn)化它:

如果不是使用數(shù)組或?qū)ο笾械乃兄担瑒t生成的解構(gòu)將跳過元素:

如果要保留原始分配,可以使用Introduce對(duì)象或數(shù)組解構(gòu)意圖(Alt-Enter),或者使用Extract對(duì)象或數(shù)組解構(gòu)重構(gòu):

使用React類組件時(shí),這個(gè)意圖非常方便:

其他一些IDE操作現(xiàn)在也默認(rèn)為解構(gòu)。例如,使用CommonJS模塊在Node.js應(yīng)用程序中工作的插入'require()'快速修復(fù)現(xiàn)在使用解構(gòu):

還有一個(gè)新的轉(zhuǎn)換參數(shù)到對(duì)象操作(Alt-Enter),它為函數(shù)生成一個(gè)解構(gòu)參數(shù):

將Promise轉(zhuǎn)換為async / await
借助IDE中的這一新意圖,您可以自動(dòng)更改返回promise的函數(shù),.then()并.catch()調(diào)用使用async / await語(yǔ)法的異步函數(shù) - 不僅在TypeScript文件中,而且在JavaScript和Flow中。
只需在功能名稱上按Alt-Enter,然后選擇轉(zhuǎn)換為異步功能

WebStorm將引入一個(gè)新變量并替換Promise.catch為try-catch塊:

在此示例中,WebStorm知道fetch返回一個(gè)promise并建議將下載函數(shù)轉(zhuǎn)換為async:

將構(gòu)造函數(shù)中的屬性轉(zhuǎn)換為類字段
有了這個(gè)方便的新意圖(Alt-Enter),您可以使用類字段替換構(gòu)造函數(shù)中定義的屬性:

對(duì)switch語(yǔ)句的新檢查
WebStorm 2018.2增加了一個(gè)為'switch'生成案例的意圖。但是,如果您編輯了代碼并且現(xiàn)在在switch語(yǔ)句中缺少一個(gè)新案例,該怎么辦?或者有一個(gè)失蹤default?或者如果某些分支無法訪問會(huì)怎么樣?IDE現(xiàn)在也可以提供幫助。我們添加了一些改進(jìn),這些改進(jìn)可能真正有利于處理JavaScript和TypeScript中的switch語(yǔ)句。
現(xiàn)在內(nèi)部的代碼完成switch建議基于有關(guān)參數(shù)的可用數(shù)據(jù)的情況(當(dāng)它是TypeScript枚舉時(shí)或者在JSDoc中將其類型指定為字符串值列表時(shí))。

新檢查將檢查是否涵蓋了所有情況,如果缺少,則可以使用創(chuàng)建它們的意圖。

如果有一個(gè)空的switch語(yǔ)句,IDE將建議您將其刪除。您可以打開switch只有默認(rèn)子句的內(nèi)容。
IDE現(xiàn)在將警告您任何無法訪問的分支,并提供快速修復(fù)以刪除它們。
另一個(gè)新檢查將幫助您避免在一個(gè)案例中聲明變量然后在另一個(gè)案例中使用變量的情況。

如果switch參數(shù)的類型不是嚴(yán)格可枚舉的并且沒有default子句,則最后一次新檢查將警告您。

請(qǐng)注意,默認(rèn)情況下,此設(shè)置為“不顯示,僅快速修復(fù)”嚴(yán)重性級(jí)別,即,它提供Alt-Enter的快速修復(fù),但不會(huì)在編輯器中突出顯示。要更改嚴(yán)重性,請(qǐng)導(dǎo)航至“首選項(xiàng)”| 編輯| 檢查| JavaScript | 一般| 'switch'語(yǔ)句沒有'default'分支。
添加或刪除導(dǎo)出
有了這個(gè)新意圖(Alt-Enter),您可以快速添加export或者export default為類,變量或函數(shù)添加 - 并且可以節(jié)省幾秒鐘的輸入時(shí)間。您可能已經(jīng)猜到的刪除導(dǎo)出操作會(huì)刪除導(dǎo)出語(yǔ)句 - 但首先它會(huì)確保該符號(hào)未在某些其他文件中使用。

TypeScript中的擴(kuò)展錯(cuò)誤消息
從TypeScript 3開始,一些錯(cuò)誤消息具有附加信息,其中包含指向相關(guān)代碼的鏈接,可幫助您了解問題的原因。WebStorm現(xiàn)在在其錯(cuò)誤工具提示中顯示此擴(kuò)展信息,因此您可以單擊鏈接以跳轉(zhuǎn)到代碼。

將缺少的庫(kù)添加到tsconfig.json
使用TypeScript,您需要在tsconfig.json文件中明確列出TypeScript將包含在編譯中的標(biāo)準(zhǔn)庫(kù),例如DOM,ES2015.Promise等.WebStorm可以幫助您。在未列出的庫(kù)中定義的符號(hào)上按Alt-Enter,然后使用快速修復(fù)將所需的庫(kù)添加到tsconfig.json。

【webstorm2019使用技巧】
Webstorm 主題、背景、顏色等設(shè)置的導(dǎo)入導(dǎo)出1、導(dǎo)出設(shè)置



2、導(dǎo)入設(shè)置

Webstorm垂直分欄,在需要分欄的文件上右擊,選著垂直拆分。就可以拖動(dòng),形成左右分欄

使用WebStorm開發(fā)web前端 網(wǎng)頁(yè)中文亂碼問題的解決方案
試了很多種解決網(wǎng)頁(yè)顯示中文亂碼問題的方式,最后發(fā)現(xiàn)統(tǒng)一更改編碼格式的方法才是正確有效而且一勞永逸的。
具體方法:
file -----> settings 搜索encoding
在fileencoding下,將IDE Encoding,Project Encoding和下面的Default Encoding for properties file都更改為utf-8。
這樣,之后每次新建的文件都會(huì)默認(rèn)為編碼格式為utf-8,不需要再在每個(gè)文件或者每個(gè)對(duì)文件的引用中添加charset=“utf-8”。
至于在統(tǒng)一更改編碼格式之前編寫的文件,如果在網(wǎng)頁(yè)上顯示是亂碼,證明它之前的編碼格式不是utf-8,需要將其內(nèi)容復(fù)制出來后,將文件刪除,再新建一個(gè)文件,再把內(nèi)容粘貼到新建的文件中。這樣,該文件的編碼格式也就更改了。如果在webstorm中都顯示為亂碼的話,那只能在新建之后手動(dòng)重新把中文寫一遍。
建議:在統(tǒng)一更改編碼格式之前先把有中文的內(nèi)容復(fù)制到別的地方保存一下,方便新建的時(shí)候直接粘貼。

如何讓webstorm兼容ES6語(yǔ)法




































