基本介紹

WebStorm是JetBrains公司旗下一款JavaScript開(kai)(kai)發(fa)工具。已(yi)經被廣(guang)大中國JS開(kai)(kai)發(fa)者譽為“Web前端開(kai)(kai)發(fa)神(shen)器”、“最(zui)強(qiang)大的(de)(de)HTML5編輯器”、“最(zui)智(zhi)能(neng)的(de)(de)JavaScript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強(qiang)大的(de)(de)JS部分的(de)(de)功能(neng)。

系統要求

Windows

64 位 Microsoft Windows 10、8

最少 2 GB RAM，推薦 8 GB RAM

2.5 GB 硬盤空間，推薦(jian) SSD

最低屏幕分辨率 1024x768

MacOS

macOS 10.13 或更高版(ban)本

最(zui)少 2 GB RAM，推薦 8 GB RAM

2.5 GB 硬盤空間，推薦 SSD

最(zui)低屏幕分辨率(lv) 1024x768

Linux

GNOME 或 KDE 桌面版(ban)

最少 2 GB RAM，推薦 8 GB RAM

2.5GB 硬(ying)盤空間，推薦(jian) SSD

最(zui)低屏(ping)幕(mu)分辨率 1024x768

特色功能

功能特點

智能代碼輔助

支持的語言和框架

提供JavaScript、ECMAScript 6、TypeScript、CoffeeScript、Dart和Flow代(dai)碼輔助功(gong)能

幫助(zhu)編寫HTML、CSS、Less、Sass和(he)Stylus代碼

支持Node.js和主(zhu)流框架(jia)，如React、Angular、Vue.js、Meteor等(deng)

代碼補全

WebStorm分析(xi)項(xiang)目，為應用(yong)程(cheng)序中定義的(de)(de)所(suo)有方法、函數、模塊、變(bian)量(liang)和類提供最(zui)佳代(dai)碼(ma)補(bu)全。代(dai)碼(ma)輔助是上下文(wen)感知(zhi)的(de)(de)，也可以特定于框架

多個插入符號和選擇

具備每(mei)個(ge)人(ren)喜歡的多個(ge)插入(ru)符號(hao)和選擇。同時編輯文件中的多個(ge)地(di)(di)方(fang)，甚至(zhi)具備適用(yong)于它(ta)們的代碼補全和動態(tai)模板。通過Alt+點擊(ji)來(lai)選擇編輯的地(di)(di)方(fang)。或者，選擇當前單詞出現的地(di)(di)方(fang)并(bing)同時編輯它(ta)們

AngularJS

將AngularJS應(ying)用的(de)(de)代(dai)碼(ma)輔助帶領到更佳(jia)階段。獲得有關(guan)默認和自定(ding)義指令、控(kong)制器和應(ying)用程序名稱以及數據綁定(ding)的(de)(de)代(dai)碼(ma)洞(dong)察的(de)(de)代(dai)碼(ma)建議(yi)

Emmet

充(chong)分利用Emmet的縮(suo)寫(xie)功能來提(ti)高您的工(gong)作效率。在HTML中輸入縮(suo)寫(xie)，然后按下Tab鍵，將其擴展到標記中

Emmet也適(shi)用于CSS和JSX

Live Edit

動態編輯可(ke)(ke)以立刻(ke)在瀏覽(lan)器中看到(dao)頁面內容更新（僅(jin)限(xian)于Google Chrome），無需(xu)重現加載，即可(ke)(ke)看到(dao)對HTML和CSS文件的變(bian)更。它作為JavaScript調試會話的一部(bu)分

導航

WebStorm強大(da)的導(dao)航功能，在(zai)處(chu)理大(da)型項目(mu)時，提高代碼效率并節省時間

對(dui)于代碼中的任何(he)方法、函(han)數或變量，只需(xu)Ctrl+點擊或搜(sou)索其用途，即可跳到其定義

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

結(jie)構視(shi)圖(tu)可以在當前打開(kai)的文件中(zhong)輕松導航

代碼質量分析

內置了(le)數百種檢(jian)查(cha)，覆蓋所(suo)有支(zhi)持的語言。除此(ci)之外，還(huan)可以(yi)使用ESLint、TSLint、Stylelint、JSCS、JSHint和(he)JSLint

在(zai)(zai)輸入時，會(hui)直接在(zai)(zai)編(bian)輯(ji)器中報告所(suo)有(you)錯誤和(he)警(jing)告，并提(ti)供許多快速修復選項

任何可(ke)能有問(wen)題的代碼(ma)行都標(biao)記(ji)在(zai)編(bian)輯(ji)器右側的排水溝中(zhong)，因此(ci)可(ke)以輕松地在(zai)長文件中(zhong)發現(xian)錯誤和警告

還(huan)可以為整個項目運行代碼質量分析，并自動(dong)應用選(xuan)定的快速修復(fu)

代碼樣式

使用一致的代(dai)(dai)碼風格(ge)，使WebStorm在編寫代(dai)(dai)碼時自動應(ying)用配置的代(dai)(dai)碼風格(ge)，或(huo)者一次重新格(ge)式(shi)化整個(ge)文件

為任何語(yu)言(yan)配置(zhi)代碼風(feng)格(ge)(ge)，包括(kuo)縮(suo)進、空(kong)格(ge)(ge)、對齊規則等。如果需(xu)要，可以將代碼風(feng)格(ge)(ge)方案保存(cun)在項目設置(zhi)中，通過 VCS與團隊成(cheng)員共享

EditorConfig

自(zi)動應用項目文(wen)件.editorconfig中指定(ding)的代碼風格

調試、跟蹤和測試

調試客(ke)戶端JavaScript和Node.js

WebStorm為(wei)客戶端(duan)代碼(ma)提供先(xian)進的調(diao)(diao)試器，它(ta)與Google Chrome協同(tong)工作。它(ta)內置(zhi)在IDE中(zhong)，因(yin)此調(diao)(diao)試時(shi)無需在編輯器和瀏(liu)覽器之間切換

依靠WebStorm調試器對(dui)源映射的支持，您可(ke)以輕松調試ECMAScript 6、TypeScript或(huo)CoffeeScript代碼

功(gong)能齊(qi)全的內置Node.js調試器(qi)也是立即可用。用它調試在本(ben)地或遠(yuan)程機(ji)器(qi)上運(yun)行的應用程序

WebStorm調試器(qi)(qi)有多重(zhong)視圖，包括(kuo)：框架、全局和(he)局部變量以(yi)及Watcher。變量值內(nei)聯顯示在(zai)編輯器(qi)(qi)中的用法旁邊(bian)。可以(yi)在(zai)運行時(shi)輕松評估JavaScript表達式。斷點支(zhi)持(chi)掛起模式和(he)條件(jian)

跟蹤

spy-js是一個(ge)內置工具，可以幫助(zhu)跟蹤(zong)代碼并有效(xiao)識別任何可能的瓶頸。它適用于客戶端JavaScript和(he)Node.js，甚至還支(zhi)持編(bian)譯為JavaScript語言

通過spy-js，可以看(kan)到觸發代(dai)碼執行的完整事(shi)件(jian)列表，然后深入了解事(shi)件(jian)的堆棧跟蹤(zong)，并瀏覽源碼中高亮(liang)顯示(shi)的跟蹤(zong)。這些數(shu)據還用于推(tui)動代(dai)碼補全結(jie)果

spy-js還可以可視化應用(yong)(yong)程(cheng)序結構。使用(yong)(yong)spy-js圖查看(kan)項(xiang)目文件如(ru)何與(yu)基于運行時(shi)數據的函數調用(yong)(yong)相關聯

單元測試

輕松執行單元測試，因為(wei)WebStorm與流行的JavaScript測試框架(jia)集(ji)成(cheng)

選擇Karma或(huo)Jest來(lai)測(ce)(ce)(ce)(ce)試(shi)(shi)客戶端JavaScript代碼或(huo)Mocha來(lai)測(ce)(ce)(ce)(ce)試(shi)(shi)Node.js。直接在IDE中運行和(he)調試(shi)(shi)測(ce)(ce)(ce)(ce)試(shi)(shi)，以(yi)方(fang)便的(de)可視格式(shi)查(cha)看結果，然后導航到測(ce)(ce)(ce)(ce)試(shi)(shi)代碼

代碼覆蓋率(lv)報告也適用于Karma測(ce)試運(yun)行器

WebStorm還支持Protractor，用于(yu)Angular、JSTestDriver、Cucumber.js的(de)端(duan)(duan)到(dao)端(duan)(duan)測試，用于(yu)行為驅動(dong)開發和Nodeunit

性能分析

WebStorm可(ke)以(yi)幫助捕(bu)獲和探(tan)索(suo)V8 CPU性能(neng)(neng)，以(yi)及(ji)Node.js應用程序的(de)堆快照。因(yin)為分析數據以(yi)最易于(yu)訪問的(de)方式呈現，因(yin)此可(ke)以(yi)輕(qing)松識別應用程序中(zhong)任何可(ke)能(neng)(neng)的(de)熱點或內存泄漏(lou)

無縫工具集成

任務運行器

享受用統一的界面來運行Grunt和Gulp<0>任務以及<0>npm<0>腳本。無需使(shi)用命令行來啟動任務

所有(you)定義(yi)在項目gruntfile.js、gulpfile.js或package.json中的任務都列在工具窗口中，只需雙擊即可運行(xing)任何任務

還可以(yi)為任務創建Run/Debug配置，然后(hou)以(yi)熟(shu)悉的Run…或Debug…操作來運行或調試

代碼質量工具

除了WebStorm自(zi)身的幾百種(zhong)檢(jian)查外，還可以(yi)使用ESLint、TSLint、Stylelint、JSHint或JSLint等連接(jie)器。當(dang)輸入時，WebStorm將根據代碼(ma)運行這(zhe)些東西，并且直接(jie)在編輯器中動(dong)態、高(gao)亮顯示任(ren)何問題

如果要確保符(fu)合項目代(dai)碼風(feng)格(ge)(ge)（比如：縮(suo)進(jin)、關鍵字后的空格(ge)(ge)等(deng)等(deng)），只(zhi)需(xu)啟用JSCS，這是(shi)一個(ge)JavaScript代(dai)碼風(feng)格(ge)(ge)檢查器

npm和Bower

通(tong)過npm管理Node.js對(dui)于WebStorm而言非常簡單(dan)。右鍵(jian)點擊package.json文件以運行npm安(an)裝命令。如果忘記(ji)安(an)裝某個模塊或忘記(ji)在package.json中列出它(ta)，內置(zhi)檢(jian)查將發出警告

通過(guo)偏(pian)好(hao)（Preferences）訪問已安裝(zhuang)的本地(di)npm和(he)Bower依賴項的完整列表，可以在偏(pian)好(hao)安裝(zhuang)和(he)更新npm模塊和(he)客戶端依賴項

集成(cheng)PhoneGap、Cordova和(he)Ionic

WebStorm通(tong)過以(yi)PhoneGap、Apache Cordova和Ionic框(kuang)架開發的(de)移(yi)動應(ying)用來促進您的(de)工作流程。可以(yi)直接從IDE創(chuang)建、模擬(ni)和部署應(ying)用。

TypeScript編譯器(qi)

WebStorm可以使用其內置(zhi)的編(bian)譯(yi)器，迅(xun)速輕松地將TypeScript代碼編(bian)譯(yi)成JavaScript。可以手動(dong)或在tsconfig.json文(wen)件(jian)中指定(ding)編(bian)譯(yi)選項。會在編(bian)輯器中動(dong)態報告所有(you)編(bian)譯(yi)錯(cuo)誤。

Yeoman集成

由于集成(cheng)(cheng)了Yeoman，可以直接從IDE歡迎屏幕訪問幾(ji)百個項目生成(cheng)(cheng)器。新(xin)UI將幫助(zhu)查(cha)找和安裝新(xin)生成(cheng)(cheng)器，并(bing)且它們將指導完(wan)成(cheng)(cheng)生成(cheng)(cheng)器步驟(zou)，所有這些操作都無(wu)需離開IDE

IDE功能

VCS

WebStorm以(yi)統(tong)一的UI處理多種(zhong)流行(xing)的版本控制(zhi)系統(tong)，確保在git、SVN、Mercurial和Perforce之間提供一致的用戶(hu)體(ti)驗(yan)

任何(he)未提(ti)交的變(bian)更(geng)都會高亮顯示(shi)在編輯器(qi)左側排水溝和“項目(mu)”視圖中(zhong)。只需點擊(ji)兩下即可輕松回滾任何(he)變(bian)更(geng)

內置的(de)可視化合并工具能(neng)夠以(yi)快速、直觀(guan)的(de)方(fang)式(shi)解決所有沖突

處理(li)GitHub時(shi)，請(qing)簽出(chu)您的項目(mu)，并且在IDE中生成所有拉取請(qing)求

本地歷史

無論是否使用VCS，本地歷史(shi)都(dou)真的可以(yi)(yi)保護代碼。WebStorm跟蹤(zong)源(yuan)文件中的任何變更(geng)，保護免受任何意外丟失或修改（即使是由其(qi)他(ta)應用程序造成的）。可以(yi)(yi)隨時檢查(cha)特(te)定文件或目錄(lu)的歷史(shi)記錄(lu)，并回滾到以(yi)(yi)前的任何版本

定制

該IDE定制化程(cheng)度非常高。將其調整為完全適合(he)您的編程(cheng)風格(ge)，從(cong)快捷鍵和(he)(he)視覺(jue)主題到工(gong)具窗口和(he)(he)編輯器布(bu)局

WebStorm提供明暗外觀供您(nin)選擇。可以在偏好（Preferences）中為每種語言設置配色方案，或者(zhe)從互聯(lian)網(wang)上找一個熱門主(zhu)題來(lai)用

內置終端

如(ru)果要運行命(ming)令或命(ming)令行工具，不(bu)用(yong)離(li)開IDE—使(shi)用(yong)WebStorm的(de)內置本地終端(duan)，可選擇將(jiang)其設置為shell

插件生態系統

如(ru)果決定借(jie)助對新框(kuang)架、集成工具和其他生(sheng)產力功能的支持來豐富WebStorm，IDE插(cha)(cha)件庫中(zhong)提供了(le)數十種插(cha)(cha)件