基本介紹

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

系統要求

Windows

64 位 Microsoft Windows 10、8

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

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

最低屏幕分辨率 1024x768

MacOS

macOS 10.13 或更高版本

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

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

最低屏幕分辨率 1024x768

Linux

GNOME 或(huo) KDE 桌面(mian)版(ban)

最少 2 GB RAM，推薦 8 GB RAM

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

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

特色功能

功能特點

智能代碼輔助

支持的語言和框架

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

幫助編寫HTML、CSS、Less、Sass和Stylus代碼

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

代碼補全

WebStorm分(fen)析(xi)項目，為(wei)應用程序中定義的所(suo)有(you)方法(fa)、函(han)數、模塊、變量(liang)和類(lei)提供最佳代碼補(bu)全。代碼輔助是上下文(wen)感知的，也可以特(te)定于框架

多個插入符號和選擇

具備每個人喜歡的多個插入(ru)符號和選(xuan)擇(ze)。同時編(bian)輯(ji)文件中的多個地方(fang)，甚至具備適用于它們(men)的代碼補全和動(dong)態模(mo)板。通(tong)過(guo)Alt+點擊來選(xuan)擇(ze)編(bian)輯(ji)的地方(fang)。或者，選(xuan)擇(ze)當前單詞出現的地方(fang)并同時編(bian)輯(ji)它們(men)

AngularJS

將(jiang)AngularJS應用(yong)的代(dai)碼輔助帶(dai)領到更佳階段。獲得有關默認和自定義指令、控制器和應用(yong)程序名稱以及數(shu)據綁定的代(dai)碼洞察(cha)的代(dai)碼建議

Emmet

充(chong)分(fen)利用(yong)Emmet的縮(suo)寫功能來(lai)提高您的工作效率(lv)。在HTML中(zhong)輸入縮(suo)寫，然后(hou)按(an)下Tab鍵(jian)，將其擴展(zhan)到標記中(zhong)

Emmet也適用于(yu)CSS和JSX

Live Edit

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

導航

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

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

通過雙擊Shift，即可(ke)進行隨處搜索（Search Everywhere），在整個(ge)項目中搜索符(fu)號(hao)、文件(jian)或(huo)類名

結構視圖可以在當(dang)前打開的文件中輕松導航

代碼質量分析

內(nei)置了數百種(zhong)檢查，覆蓋所有(you)支持的語(yu)言。除此之外，還可以使用ESLint、TSLint、Stylelint、JSCS、JSHint和JSLint

在輸入時，會直接在編輯器(qi)中報告所有錯誤(wu)和警(jing)告，并提供許多快速修復選項(xiang)

任何(he)可(ke)能有問題(ti)的代(dai)碼行(xing)都標記在(zai)編輯(ji)器右側的排水溝中，因此可(ke)以輕松地在(zai)長(chang)文件中發(fa)現錯誤和警告(gao)

還可以為整個項目運(yun)行代碼質(zhi)量分析，并(bing)自(zi)動應用選定(ding)的快速修復

代碼樣式

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

為任何語言配置(zhi)(zhi)代碼(ma)風(feng)格，包括縮進(jin)、空格、對齊規則等。如果(guo)需要，可以將(jiang)代碼(ma)風(feng)格方案保(bao)存在(zai)項(xiang)目(mu)設(she)置(zhi)(zhi)中，通(tong)過(guo) VCS與團隊成員共(gong)享(xiang)

EditorConfig

自動應用項(xiang)目文件.editorconfig中指定的(de)代(dai)碼風格

調試、跟蹤和測試

調(diao)試(shi)客戶端JavaScript和(he)Node.js

WebStorm為客(ke)戶端代(dai)碼提供先進的調試器(qi)，它與Google Chrome協同(tong)工作。它內置在IDE中(zhong)，因(yin)此(ci)調試時無需在編輯器(qi)和瀏覽器(qi)之間切換

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

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

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

跟蹤

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

通過(guo)spy-js，可以看(kan)到(dao)觸(chu)發代(dai)碼執行(xing)的(de)完(wan)整事(shi)件列表(biao)，然(ran)后深入了解(jie)事(shi)件的(de)堆棧跟(gen)蹤，并瀏覽源(yuan)碼中高亮顯示的(de)跟(gen)蹤。這些數據還用于(yu)推動代(dai)碼補全結果

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

單元測試

輕(qing)松執行單元(yuan)測試，因為WebStorm與流行的JavaScript測試框(kuang)架集成

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

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

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

性能分析

WebStorm可以幫助捕獲和探索V8 CPU性能，以及Node.js應(ying)用(yong)(yong)程序(xu)的(de)堆快(kuai)照。因為(wei)分析數據以最(zui)易于(yu)訪問(wen)的(de)方式呈現，因此可以輕松(song)識別應(ying)用(yong)(yong)程序(xu)中任何可能的(de)熱點或內存泄(xie)漏(lou)

無縫工具集成

任務運行器

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

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

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

代碼質量工具

除了WebStorm自身的幾百(bai)種檢查外(wai)，還(huan)可以使用ESLint、TSLint、Stylelint、JSHint或(huo)JSLint等連(lian)接器。當輸入時，WebStorm將根(gen)據(ju)代(dai)碼運行這些東西，并(bing)且直(zhi)接在編輯器中(zhong)動態、高亮(liang)顯示任何問題(ti)

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

npm和Bower

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

通過偏好（Preferences）訪(fang)問已安裝(zhuang)的本(ben)地npm和(he)(he)Bower依(yi)賴(lai)項(xiang)的完整列表，可以在偏好安裝(zhuang)和(he)(he)更新npm模(mo)塊和(he)(he)客戶(hu)端依(yi)賴(lai)項(xiang)

集成PhoneGap、Cordova和Ionic

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

TypeScript編譯器(qi)

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

Yeoman集成

由(you)于(yu)集成(cheng)(cheng)了Yeoman，可以直接從IDE歡迎屏(ping)幕訪問幾百個項(xiang)目生(sheng)成(cheng)(cheng)器。新UI將(jiang)幫助查找和安裝新生(sheng)成(cheng)(cheng)器，并且它們將(jiang)指(zhi)導完(wan)成(cheng)(cheng)生(sheng)成(cheng)(cheng)器步(bu)驟，所有這(zhe)些操作都(dou)無需離(li)開IDE

IDE功能

VCS

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

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

內(nei)置的可視化合并工具能夠以快速、直觀的方式解決(jue)所有(you)沖突

處(chu)理GitHub時，請簽出您的項目，并(bing)且在(zai)IDE中生成(cheng)所(suo)有拉取請求

本地歷史

無(wu)論是(shi)否使用VCS，本地歷(li)(li)史(shi)都真(zhen)的(de)(de)可(ke)以(yi)保護代(dai)碼。WebStorm跟蹤(zong)源(yuan)文件(jian)中的(de)(de)任(ren)何變(bian)更，保護免受任(ren)何意外丟(diu)失或修改（即使是(shi)由其他應用程序(xu)造成的(de)(de)）。可(ke)以(yi)隨時檢查特定文件(jian)或目(mu)錄(lu)的(de)(de)歷(li)(li)史(shi)記(ji)錄(lu)，并(bing)回滾到以(yi)前的(de)(de)任(ren)何版本

定制

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

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

內置終端

如(ru)果要(yao)運行命令(ling)或(huo)命令(ling)行工具，不(bu)用(yong)離開(kai)IDE—使用(yong)WebStorm的內置本地終端，可選擇將其設置為(wei)shell

插件生態系統

如果(guo)決定借助對新框(kuang)架(jia)、集成工具和其他(ta)生產力(li)功能的支持來(lai)豐(feng)富(fu)WebStorm，IDE插件庫中提(ti)供了數(shu)十種插件