-
WebStorm
鎖定
WebStorm 是JetBrains公司旗下一款JavaScript 開發工具。已經被廣大中國JS開發者譽為“Web前端開發神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源,繼承了IntelliJ IDEA強大的JS部分的功能。
- 開發商
- JetBrains
- 軟件版本
- 2022.3
- 類 型
- JavaScript 開發工具
- 名譽 1
- Web前端開發神器
- 名譽 2
- 最強大的HTML5編輯器
- 名譽 3
- 最智能的JavaScript IDE
WebStorm功能特點
智能代碼輔助
支持的語言和框架
代碼補全
多個插入符號和選擇
具備每個人喜歡的多個插入符號和選擇。 同時編輯文件中的多個地方,甚至具備適用於它們的代碼補全和動態模板。 通過Alt+點擊來選擇編輯的地方。 或者,選擇當前單詞出現的地方並同時編輯它們
Emmet
Emmet也適用於CSS和JSX
Live Edit
動態編輯可以立刻在瀏覽器中看到頁面內容更新(僅限於Google Chrome), 無需重現加載,即可看到對HTML和CSS文件的變更。 它作為JavaScript調試會話的一部分
導航
WebStorm強大的導航功能,在處理大型項目時, 提高代碼效率並節省時間
對於代碼中的任何方法、函數或變量,只需Ctrl+點擊或搜索其用途, 即可跳到其定義
通過雙擊 Shift ,即可進行隨處搜索(Search Everywhere ),在整個項目中搜索符號、文件或類名
結構視圖可以在當前打開的文件中輕鬆導航
代碼質量分析
在輸入時,會直接在編輯器中報告所有錯誤和警告,並提供許多快速修復選項
任何可能有問題的代碼行都標記在編輯器右側的排水溝中,因此可以輕鬆地在長文件中發現錯誤和警告
還可以為整個項目運行代碼質量分析,並自動應用選定的快速修復
代碼樣式
使用一致的代碼風格,使WebStorm在編寫代碼時自動應用配置的代碼風格,或者一次重新格式化整個文件
為任何語言配置代碼風格,包括縮進、空格、對齊規則等。 如果需要,可以將代碼風格方案保存在項目設置中,通過 VCS與團隊成員共享
EditorConfig
自動應用項目文件.editorconfig中指定的代碼風格
調試、跟蹤和測試
調試客户端JavaScript和Node.js
依靠WebStorm調試器對源映射的支持,您可以輕鬆調試ECMAScript 6、TypeScript或CoffeeScript代碼
功能齊全的內置Node.js調試器也是立即可用。 用它調試在本地或遠程機器上運行的應用程序
跟蹤
spy-js是一個內置工具,可以幫助跟蹤代碼並有效識別任何可能的瓶頸。 它適用於客户端JavaScript和Node.js,甚至還支持編譯為JavaScript語言
通過spy-js,可以看到觸發代碼執行的完整事件列表,然後深入瞭解事件的堆棧跟蹤,並瀏覽源碼中高亮顯示的跟蹤。 這些數據還用於推動代碼補全結果
spy-js還可以可視化應用程序結構。 使用spy-js圖查看項目文件如何與基於運行時數據的函數調用相關聯
輕鬆執行單元測試,因為WebStorm與流行的JavaScript測試框架集成
選擇Karma或Jest來測試客户端JavaScript代碼或Mocha來測試Node.js。 直接在IDE中運行和調試測試,以方便的可視格式查看結果,然後導航到測試代碼
無縫工具集成
任務運行器
享受用統一的界面來運行Grunt和Gulp<0>任務以及<0>npm<0>腳本。 無需使用命令行來啓動任務
所有定義在項目gruntfile.js、gulpfile.js或package.json中的任務都列在工具窗口中,只需雙擊即可運行任何任務
還可以為任務創建Run/Debug配置,然後以熟悉的Run…或Debug…操作來運行或調試
代碼質量工具
除了WebStorm自身的幾百種檢查外,還可以使用ESLint、TSLint、Stylelint、JSHint或JSLint等連接器。 當輸入時,WebStorm將根據代碼運行這些東西,並且直接在編輯器中動態、高亮顯示任何問題
如果要確保符合項目代碼風格(比如:縮進、關鍵字後的空格等等),只需啓用JSCS,這是一個JavaScript代碼風格檢查器
npm和Bower
通過npm管理Node.js對於WebStorm而言非常簡單。 右鍵點擊package.json文件以運行npm安裝命令。 如果忘記安裝某個模塊或忘記在package.json中列出它,內置檢查將發出警告
通過偏好(Preferences)訪問已安裝的本地npm和Bower依賴項的完整列表,可以在偏好安裝和更新npm模塊和客户端依賴項
TypeScript編譯器
WebStorm可以使用其內置的編譯器,迅速輕鬆地將TypeScript代碼編譯成JavaScript。 可以手動或在tsconfig.json文件中指定編譯選項。 會在編輯器中動態報告所有編譯錯誤。
Yeoman集成
由於集成了Yeoman,可以直接從IDE歡迎屏幕訪問幾百個項目生成器。 新UI將幫助查找和安裝新生成器,並且它們將指導完成生成器步驟,所有這些操作都無需離開IDE
IDE功能
VCS
任何未提交的變更都會高亮顯示在編輯器左側排水溝和“項目”視圖中。 只需點擊兩下即可輕鬆回滾任何變更
內置的可視化合並工具能夠以快速、直觀的方式解決所有衝突
處理GitHub時,請簽出您的項目,並且在IDE中生成所有拉取請求
本地歷史
無論是否使用VCS,本地歷史都真的可以保護代碼。 WebStorm跟蹤源文件中的任何變更,保護免受任何意外丟失或修改(即使是由其他應用程序造成的)。可以隨時檢查特定文件或目錄的歷史記錄,並回滾到以前的任何版本
定製
該IDE定製化程度非常高。 將其調整為完全適合您的編程風格,從快捷鍵和視覺主題到工具窗口和編輯器佈局
內置終端
插件生態系統
如果決定藉助對新框架、集成工具和其他生產力功能的支持來豐富 WebStorm,IDE 插件庫中提供了數十種插件
WebStorm系統要求
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
- GNOME 或 KDE 桌面版
- 最少 2 GB RAM,推薦 8 GB RAM
- 2.5 GB 硬盤空間,推薦 SSD
- 最低屏幕分辨率 1024x768
- 參考資料
-
- 1. 智能代碼輔助 - 功能 | WebStorm .WebStorm[引用日期2020-12-08]
- 2. 調試、跟蹤和測試 - 功能 | WebStorm .WebStorm[引用日期2020-12-08]
- 3. 無縫工具集成 - 功能 | WebStorm .WebStorm[引用日期2020-12-08]
- 4. IDE功能 - 功能 | WebStorm .WebStorm[引用日期2020-12-08]