WebStorm是JetBrains公司旗下一款JavaScript開發(fā)工具。已經被廣大中國JS開發(fā)者譽為“Web前端開發(fā)神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源,繼承了IntelliJ IDEA強大的JS部分的功能。
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
智能代碼輔助
支持的語言和框架
提供JavaScript、ECMAScript 6、TypeScript、CoffeeScript、Dart和Flow代碼輔助功能
幫助編寫HTML、CSS、Less、Sass和Stylus代碼
支持Node.js和主流框架,如React、Angular、Vue.js、Meteor等
代碼補全
WebStorm分析項目,為應用程序中定義的所有方法、函數、模塊、變量和類提供最佳代碼補全。代碼輔助是上下文感知的,也可以特定于框架
多個插入符號和選擇
具備每個人喜歡的多個插入符號和選擇。同時編輯文件中的多個地方,甚至具備適用于它們的代碼補全和動態(tài)模板。通過Alt+點擊來選擇編輯的地方?;蛘?,選擇當前單詞出現的地方并同時編輯它們
AngularJS
將AngularJS應用的代碼輔助帶領到更佳階段。獲得有關默認和自定義指令、控制器和應用程序名稱以及數據綁定的代碼洞察的代碼建議
Emmet
充分利用Emmet的縮寫功能來提高您的工作效率。在HTML中輸入縮寫,然后按下Tab鍵,將其擴展到標記中
Emmet也適用于CSS和JSX
Live Edit
動態(tài)編輯可以立刻在瀏覽器中看到頁面內容更新(僅限于Google Chrome),無需重現加載,即可看到對HTML和CSS文件的變更。它作為JavaScript調試會話的一部分
導航
WebStorm強大的導航功能,在處理大型項目時,提高代碼效率并節(jié)省時間
對于代碼中的任何方法、函數或變量,只需Ctrl+點擊或搜索其用途,即可跳到其定義
通過雙擊Shift,即可進行隨處搜索(Search Everywhere),在整個項目中搜索符號、文件或類名
結構視圖可以在當前打開的文件中輕松導航
代碼質量分析
內置了數百種檢查,覆蓋所有支持的語言。除此之外,還可以使用ESLint、TSLint、Stylelint、JSCS、JSHint和JSLint
在輸入時,會直接在編輯器中報告所有錯誤和警告,并提供許多快速修復選項
任何可能有問題的代碼行都標記在編輯器右側的排水溝中,因此可以輕松地在長文件中發(fā)現錯誤和警告
還可以為整個項目運行代碼質量分析,并自動應用選定的快速修復
代碼樣式
使用一致的代碼風格,使WebStorm在編寫代碼時自動應用配置的代碼風格,或者一次重新格式化整個文件
為任何語言配置代碼風格,包括縮進、空格、對齊規(guī)則等。如果需要,可以將代碼風格方案保存在項目設置中,通過 VCS與團隊成員共享
EditorConfig
自動應用項目文件.editorconfig中指定的代碼風格
調試、跟蹤和測試
調試客戶端JavaScript和Node.js
WebStorm為客戶端代碼提供先進的調試器,它與Google Chrome協(xié)同工作。它內置在IDE中,因此調試時無需在編輯器和瀏覽器之間切換
依靠WebStorm調試器對源映射的支持,您可以輕松調試ECMAScript 6、TypeScript或CoffeeScript代碼
功能齊全的內置Node.js調試器也是立即可用。用它調試在本地或遠程機器上運行的應用程序
WebStorm調試器有多重視圖,包括:框架、全局和局部變量以及Watcher。變量值內聯顯示在編輯器中的用法旁邊??梢栽谶\行時輕松評估JavaScript表達式。斷點支持掛起模式和條件
跟蹤
spy-js是一個內置工具,可以幫助跟蹤代碼并有效識別任何可能的瓶頸。它適用于客戶端JavaScript和Node.js,甚至還支持編譯為JavaScript語言
通過spy-js,可以看到觸發(fā)代碼執(zhí)行的完整事件列表,然后深入了解事件的堆棧跟蹤,并瀏覽源碼中高亮顯示的跟蹤。這些數據還用于推動代碼補全結果
spy-js還可以可視化應用程序結構。使用spy-js圖查看項目文件如何與基于運行時數據的函數調用相關聯
單元測試
輕松執(zhí)行單元測試,因為WebStorm與流行的JavaScript測試框架集成
選擇Karma或Jest來測試客戶端JavaScript代碼或Mocha來測試Node.js。直接在IDE中運行和調試測試,以方便的可視格式查看結果,然后導航到測試代碼
代碼覆蓋率報告也適用于Karma測試運行器
WebStorm還支持Protractor,用于Angular、JSTestDriver、Cucumber.js的端到端測試,用于行為驅動開發(fā)和Nodeunit
性能分析
WebStorm可以幫助捕獲和探索V8 CPU性能,以及Node.js應用程序的堆快照。因為分析數據以最易于訪問的方式呈現,因此可以輕松識別應用程序中任何可能的熱點或內存泄漏
無縫工具集成
任務運行器
享受用統(tǒng)一的界面來運行Grunt和Gulp<0>任務以及<0>npm<0>腳本。無需使用命令行來啟動任務
所有定義在項目gruntfile.js、gulpfile.js或package.json中的任務都列在工具窗口中,只需雙擊即可運行任何任務
還可以為任務創(chuàng)建Run/Debug配置,然后以熟悉的Run…或Debug…操作來運行或調試
代碼質量工具
除了WebStorm自身的幾百種檢查外,還可以使用ESLint、TSLint、Stylelint、JSHint或JSLint等連接器。當輸入時,WebStorm將根據代碼運行這些東西,并且直接在編輯器中動態(tài)、高亮顯示任何問題
如果要確保符合項目代碼風格(比如:縮進、關鍵字后的空格等等),只需啟用JSCS,這是一個JavaScript代碼風格檢查器
npm和Bower
通過npm管理Node.js對于WebStorm而言非常簡單。右鍵點擊package.json文件以運行npm安裝命令。如果忘記安裝某個模塊或忘記在package.json中列出它,內置檢查將發(fā)出警告
通過偏好(Preferences)訪問已安裝的本地npm和Bower依賴項的完整列表,可以在偏好安裝和更新npm模塊和客戶端依賴項
集成PhoneGap、Cordova和Ionic
WebStorm通過以PhoneGap、Apache Cordova和Ionic框架開發(fā)的移動應用來促進您的工作流程。可以直接從IDE創(chuàng)建、模擬和部署應用。
TypeScript編譯器
WebStorm可以使用其內置的編譯器,迅速輕松地將TypeScript代碼編譯成JavaScript??梢允謩踊蛟趖sconfig.json文件中指定編譯選項。會在編輯器中動態(tài)報告所有編譯錯誤。
Yeoman集成
由于集成了Yeoman,可以直接從IDE歡迎屏幕訪問幾百個項目生成器。新UI將幫助查找和安裝新生成器,并且它們將指導完成生成器步驟,所有這些操作都無需離開IDE
IDE功能
VCS
WebStorm以統(tǒng)一的UI處理多種流行的版本控制系統(tǒng),確保在git、SVN、Mercurial和Perforce之間提供一致的用戶體驗
任何未提交的變更都會高亮顯示在編輯器左側排水溝和“項目”視圖中。只需點擊兩下即可輕松回滾任何變更
內置的可視化合并工具能夠以快速、直觀的方式解決所有沖突
處理GitHub時,請簽出您的項目,并且在IDE中生成所有拉取請求
本地歷史
無論是否使用VCS,本地歷史都真的可以保護代碼。WebStorm跟蹤源文件中的任何變更,保護免受任何意外丟失或修改(即使是由其他應用程序造成的)。可以隨時檢查特定文件或目錄的歷史記錄,并回滾到以前的任何版本
定制
該IDE定制化程度非常高。將其調整為完全適合您的編程風格,從快捷鍵和視覺主題到工具窗口和編輯器布局
WebStorm提供明暗外觀供您選擇??梢栽谄茫≒references)中為每種語言設置配色方案,或者從互聯網上找一個熱門主題來用
內置終端
如果要運行命令或命令行工具,不用離開IDE—使用WebStorm的內置本地終端,可選擇將其設置為shell
插件生態(tài)系統(tǒng)
如果決定借助對新框架、集成工具和其他生產力功能的支持來豐富WebStorm,IDE插件庫中提供了數十種插件