基本介紹

WebStorm是JetBrains公司旗下一款JavaScript開(kāi)發(fā)工具。已經(jīng)被廣大中國(guó)JS開(kāi)發(fā)者譽(yù)為“Web前端開(kāi)發(fā)神器”、“最強(qiáng)大的HTML5編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強(qiáng)大的JS部分的功能。

系統(tǒng)要求

Windows

64 位 Microsoft Windows 10、8

最少 2 GB RAM，推薦 8 GB RAM

2.5 GB 硬盤空間，推薦 SSD

最低屏幕分辨率 1024x768

MacOS

macOS 10.13 或更高版本

最少 2 GB RAM，推薦 8 GB RAM

2.5 GB 硬盤空間，推薦 SSD

最低屏幕分辨率 1024x768

Linux

GNOME 或 KDE 桌面版

最少 2 GB RAM，推薦 8 GB RAM

2.5GB 硬盤空間，推薦 SSD

最低屏幕分辨率 1024x768

特色功能

功能特點(diǎn)

智能代碼輔助

支持的語(yǔ)言和框架

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

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

支持Node.js和主流框架，如React、Angular、Vue.js、Meteor等

代碼補(bǔ)全

WebStorm分析項(xiàng)目，為應(yīng)用程序中定義的所有方法、函數(shù)、模塊、變量和類提供最佳代碼補(bǔ)全。代碼輔助是上下文感知的，也可以特定于框架

多個(gè)插入符號(hào)和選擇

具備每個(gè)人喜歡的多個(gè)插入符號(hào)和選擇。同時(shí)編輯文件中的多個(gè)地方，甚至具備適用于它們的代碼補(bǔ)全和動(dòng)態(tài)模板。通過(guò)Alt+點(diǎn)擊來(lái)選擇編輯的地方?；蛘撸x擇當(dāng)前單詞出現(xiàn)的地方并同時(shí)編輯它們

AngularJS

將AngularJS應(yīng)用的代碼輔助帶領(lǐng)到更佳階段。獲得有關(guān)默認(rèn)和自定義指令、控制器和應(yīng)用程序名稱以及數(shù)據(jù)綁定的代碼洞察的代碼建議

Emmet

充分利用Emmet的縮寫功能來(lái)提高您的工作效率。在HTML中輸入縮寫，然后按下Tab鍵，將其擴(kuò)展到標(biāo)記中

Emmet也適用于CSS和JSX

Live Edit

動(dòng)態(tài)編輯可以立刻在瀏覽器中看到頁(yè)面內(nèi)容更新（僅限于Google Chrome），無(wú)需重現(xiàn)加載，即可看到對(duì)HTML和CSS文件的變更。它作為JavaScript調(diào)試會(huì)話的一部分

導(dǎo)航

WebStorm強(qiáng)大的導(dǎo)航功能，在處理大型項(xiàng)目時(shí)，提高代碼效率并節(jié)省時(shí)間

對(duì)于代碼中的任何方法、函數(shù)或變量，只需Ctrl+點(diǎn)擊或搜索其用途，即可跳到其定義

通過(guò)雙擊Shift，即可進(jìn)行隨處搜索（Search Everywhere），在整個(gè)項(xiàng)目中搜索符號(hào)、文件或類名

結(jié)構(gòu)視圖可以在當(dāng)前打開(kāi)的文件中輕松導(dǎo)航

代碼質(zhì)量分析

內(nèi)置了數(shù)百種檢查，覆蓋所有支持的語(yǔ)言。除此之外，還可以使用ESLint、TSLint、Stylelint、JSCS、JSHint和JSLint

在輸入時(shí)，會(huì)直接在編輯器中報(bào)告所有錯(cuò)誤和警告，并提供許多快速修復(fù)選項(xiàng)

任何可能有問(wèn)題的代碼行都標(biāo)記在編輯器右側(cè)的排水溝中，因此可以輕松地在長(zhǎng)文件中發(fā)現(xiàn)錯(cuò)誤和警告

還可以為整個(gè)項(xiàng)目運(yùn)行代碼質(zhì)量分析，并自動(dòng)應(yīng)用選定的快速修復(fù)

代碼樣式

使用一致的代碼風(fēng)格，使WebStorm在編寫代碼時(shí)自動(dòng)應(yīng)用配置的代碼風(fēng)格，或者一次重新格式化整個(gè)文件

為任何語(yǔ)言配置代碼風(fēng)格，包括縮進(jìn)、空格、對(duì)齊規(guī)則等。如果需要，可以將代碼風(fēng)格方案保存在項(xiàng)目設(shè)置中，通過(guò) VCS與團(tuán)隊(duì)成員共享

EditorConfig

自動(dòng)應(yīng)用項(xiàng)目文件.editorconfig中指定的代碼風(fēng)格

調(diào)試、跟蹤和測(cè)試

調(diào)試客戶端JavaScript和Node.js

WebStorm為客戶端代碼提供先進(jìn)的調(diào)試器，它與Google Chrome協(xié)同工作。它內(nèi)置在IDE中，因此調(diào)試時(shí)無(wú)需在編輯器和瀏覽器之間切換

依靠WebStorm調(diào)試器對(duì)源映射的支持，您可以輕松調(diào)試ECMAScript 6、TypeScript或CoffeeScript代碼

功能齊全的內(nèi)置Node.js調(diào)試器也是立即可用。用它調(diào)試在本地或遠(yuǎn)程機(jī)器上運(yùn)行的應(yīng)用程序

WebStorm調(diào)試器有多重視圖，包括：框架、全局和局部變量以及Watcher。變量值內(nèi)聯(lián)顯示在編輯器中的用法旁邊。可以在運(yùn)行時(shí)輕松評(píng)估JavaScript表達(dá)式。斷點(diǎn)支持掛起模式和條件

跟蹤

spy-js是一個(gè)內(nèi)置工具，可以幫助跟蹤代碼并有效識(shí)別任何可能的瓶頸。它適用于客戶端JavaScript和Node.js，甚至還支持編譯為JavaScript語(yǔ)言

通過(guò)spy-js，可以看到觸發(fā)代碼執(zhí)行的完整事件列表，然后深入了解事件的堆棧跟蹤，并瀏覽源碼中高亮顯示的跟蹤。這些數(shù)據(jù)還用于推動(dòng)代碼補(bǔ)全結(jié)果

spy-js還可以可視化應(yīng)用程序結(jié)構(gòu)。使用spy-js圖查看項(xiàng)目文件如何與基于運(yùn)行時(shí)數(shù)據(jù)的函數(shù)調(diào)用相關(guān)聯(lián)

單元測(cè)試

輕松執(zhí)行單元測(cè)試，因?yàn)閃ebStorm與流行的JavaScript測(cè)試框架集成

選擇Karma或Jest來(lái)測(cè)試客戶端JavaScript代碼或Mocha來(lái)測(cè)試Node.js。直接在IDE中運(yùn)行和調(diào)試測(cè)試，以方便的可視格式查看結(jié)果，然后導(dǎo)航到測(cè)試代碼

代碼覆蓋率報(bào)告也適用于Karma測(cè)試運(yùn)行器

WebStorm還支持Protractor，用于Angular、JSTestDriver、Cucumber.js的端到端測(cè)試，用于行為驅(qū)動(dòng)開(kāi)發(fā)和Nodeunit

性能分析

WebStorm可以幫助捕獲和探索V8 CPU性能，以及Node.js應(yīng)用程序的堆快照。因?yàn)榉治鰯?shù)據(jù)以最易于訪問(wèn)的方式呈現(xiàn)，因此可以輕松識(shí)別應(yīng)用程序中任何可能的熱點(diǎn)或內(nèi)存泄漏

無(wú)縫工具集成

任務(wù)運(yùn)行器

享受用統(tǒng)一的界面來(lái)運(yùn)行Grunt和Gulp<0>任務(wù)以及<0>npm<0>腳本。無(wú)需使用命令行來(lái)啟動(dòng)任務(wù)

所有定義在項(xiàng)目gruntfile.js、gulpfile.js或package.json中的任務(wù)都列在工具窗口中，只需雙擊即可運(yùn)行任何任務(wù)

還可以為任務(wù)創(chuàng)建Run/Debug配置，然后以熟悉的Run…或Debug…操作來(lái)運(yùn)行或調(diào)試

代碼質(zhì)量工具

除了WebStorm自身的幾百種檢查外，還可以使用ESLint、TSLint、Stylelint、JSHint或JSLint等連接器。當(dāng)輸入時(shí)，WebStorm將根據(jù)代碼運(yùn)行這些東西，并且直接在編輯器中動(dòng)態(tài)、高亮顯示任何問(wèn)題

如果要確保符合項(xiàng)目代碼風(fēng)格（比如：縮進(jìn)、關(guān)鍵字后的空格等等），只需啟用JSCS，這是一個(gè)JavaScript代碼風(fēng)格檢查器

npm和Bower

通過(guò)npm管理Node.js對(duì)于WebStorm而言非常簡(jiǎn)單。右鍵點(diǎn)擊package.json文件以運(yùn)行npm安裝命令。如果忘記安裝某個(gè)模塊或忘記在package.json中列出它，內(nèi)置檢查將發(fā)出警告

通過(guò)偏好（Preferences）訪問(wèn)已安裝的本地npm和Bower依賴項(xiàng)的完整列表，可以在偏好安裝和更新npm模塊和客戶端依賴項(xiàng)

集成PhoneGap、Cordova和Ionic

WebStorm通過(guò)以PhoneGap、Apache Cordova和Ionic框架開(kāi)發(fā)的移動(dòng)應(yīng)用來(lái)促進(jìn)您的工作流程。可以直接從IDE創(chuàng)建、模擬和部署應(yīng)用。

TypeScript編譯器

WebStorm可以使用其內(nèi)置的編譯器，迅速輕松地將TypeScript代碼編譯成JavaScript?？梢允謩?dòng)或在tsconfig.json文件中指定編譯選項(xiàng)。會(huì)在編輯器中動(dòng)態(tài)報(bào)告所有編譯錯(cuò)誤。

Yeoman集成

由于集成了Yeoman，可以直接從IDE歡迎屏幕訪問(wèn)幾百個(gè)項(xiàng)目生成器。新UI將幫助查找和安裝新生成器，并且它們將指導(dǎo)完成生成器步驟，所有這些操作都無(wú)需離開(kāi)IDE

IDE功能

VCS

WebStorm以統(tǒng)一的UI處理多種流行的版本控制系統(tǒng)，確保在git、SVN、Mercurial和Perforce之間提供一致的用戶體驗(yàn)

任何未提交的變更都會(huì)高亮顯示在編輯器左側(cè)排水溝和“項(xiàng)目”視圖中。只需點(diǎn)擊兩下即可輕松回滾任何變更

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

處理GitHub時(shí)，請(qǐng)簽出您的項(xiàng)目，并且在IDE中生成所有拉取請(qǐng)求

本地歷史

無(wú)論是否使用VCS，本地歷史都真的可以保護(hù)代碼。WebStorm跟蹤源文件中的任何變更，保護(hù)免受任何意外丟失或修改（即使是由其他應(yīng)用程序造成的）?？梢噪S時(shí)檢查特定文件或目錄的歷史記錄，并回滾到以前的任何版本

定制

該IDE定制化程度非常高。將其調(diào)整為完全適合您的編程風(fēng)格，從快捷鍵和視覺(jué)主題到工具窗口和編輯器布局

WebStorm提供明暗外觀供您選擇?？梢栽谄茫≒references）中為每種語(yǔ)言設(shè)置配色方案，或者從互聯(lián)網(wǎng)上找一個(gè)熱門主題來(lái)用

內(nèi)置終端

如果要運(yùn)行命令或命令行工具，不用離開(kāi)IDE—使用WebStorm的內(nèi)置本地終端，可選擇將其設(shè)置為shell

插件生態(tài)系統(tǒng)

如果決定借助對(duì)新框架、集成工具和其他生產(chǎn)力功能的支持來(lái)豐富WebStorm，IDE插件庫(kù)中提供了數(shù)十種插件