評測:七款JavaScript IDE迎接全面審查
譯文著眼于JavaScript編程工作,WebStorm與Visual Studio Code在集成工具的豐富程度與功能性方面拔得頭籌。
JavaScript目前已經被用于開發各種不同類型的應用程序方案。在大多數情況下,JavaScript往往與HTML 5及CSS配合使用以開發Web前端。然而JavaScript同時也在移動應用程序的構建當中發揮著重要作用,而且依托于Node.js服務器而在后端領域擁有相當活躍的表現。幸運的是,眾多JavaScript開發工具——包括編輯器與IDE——正陸續涌現,旨在幫助大家解決開發工作中的各種新型挑戰。
在之前的討論中,我們已經共同審視了當前可用的各款JavaScript編輯器方案。而在今天的文章中,我們將把著眼轉向IDE。正如大家所見,其中一部分確實非常出色,但另一部分——甚至相當令人熟知并擁有良好的聲譽——卻表現得并不太好,可以說并不值得大家在它們身上浪費時間。為了給這些方案留點面子,我沒有將其尷尬的評估得分、可憐的一點優勢以及令人發指的缺陷逐一列出,但仍會將其納入討論范疇。
接下來的問題是,我們為什么要使用IDE而不是編輯器?主要原因在于,IDE能夠調試并在某些條件下實現代碼分析。IDE同時也支持各類應用程序生命周期管理(簡稱ALM)系統,能夠將諸如Git、GitHub、Mercurial、Subversion以及Perforce版本控制方案等機制集成進來。不過隨著越來越多的編輯器工具開始與這些系統相對接,ALM支持恐怕將不再成為區分編輯器與IDE的主要差異化因素。
Aptana Studio
Aptana Studio 3是一套可自由加以定義且(大部分)開源的Eclipse安裝版本,能夠運行于Mac OS X、Windows以及Linux環境之下,且擁有較JSDT(即JavaScript開發工具)更為出色的JavaScript與JavaScript庫編輯能力。除此之外,它以Eclipse插件形式向用戶交付。
幾年之前,我曾經在自己的JavaScript與Ruby on Rails開發工作中大量使用Aptana,但最近一段時間Aptana項目的發展步伐明顯放慢,這主要是因為Aptana正逐漸成為Appcelerator Titanium Studio(相關內容將在后文中介紹)的底層技術。目前Apatana GitHub項目主要由兩位提交者及十五位貢獻者負責支持。
Aptana能夠支持HTML 5、CSS 3、JavaScript、Ruby、Rails、PHP以及Python,同時面向Git與GitHub。大家能夠通過添加Eclipse插件的方式為其納入更多對其它ALM的支持能力。我已經在自己的計算機上使用Git庫,但卻無法從Aptana當中找到任何Git功能。照理來說我在通過Git或者GitHub進行了庫導入之后,這項功能應該就被開啟了——但實際上卻什么都沒發生。其它IDE則都能夠識別出.git目錄的存在并自動啟動自己的Git支持功能。
Aptana 3當中包含一系列TextMate以及幾套新型.ruble綁定方案。它還擁有出色的JavaScript高亮顯示與不錯的JavaScript代碼自動補全功能。我清清楚楚地記得當初的Aptana 2擁有jQuery支持能力,但在現在我所使用的Aptana 3當中,輸入$.并不會呼出補全菜單。
Aptana雖然還是不錯,但我現在更傾向于使用其它編輯器及IDE方案,例如在進行JavaScript開發時使用WebStorm、在進行Ruby編程時使用Komodo,并利用Sublime Text進行通用性文本編輯。
#p#
Eclipse配合JSDT
我很少會對某款IDE主動作出負面評價,不過在JavaScript開發工作當中,Eclipse確實招來了我的不少抱怨之聲。
遙想當初Java Swing剛剛面世且令人振奮之時,我曾經樂于利用Eclipse處理Java開發工作。甚至直到去年,我還在使用Eclipse進行Android開發,而且使用體驗也還算不錯。但在上手了Eclipse配合JSDT之后,我發現自己總是一而再、再而三地被失望所吞沒。
從積極的方面看,Eclipse擁有相當出色的成熟度水平。我們能夠想到的任意開源項目、編程語言或者主流ALM產品都能通過插件形式介入其中。
然而,Eclipse與JSDT這一組合在速度與精確水平上無法與本文中已經以及將要出現的任何一款JavaScript相媲美——它仍然會不斷顯示出由已通過JSHint的有效代碼所引發的誤報錯誤。
如果大家必須利用Eclipse進行JavaScript開發——舉例來說,我們需要通過JSP代碼來生成JavaScript代碼,而Eclipse又是所在企業選定的授權方案——相信各位完全有能力解決上述問題。但從個人角度來講,我是不愿意這么干的。
也就是說,Eclipse可以搭配正確的插件來實現預期目標——例如配合Aptana Studio。
Eclipse IDE for Java EE Developers當中將JavaScript開發支持能力作為其Web Tools Platform的組成部分。不過奇怪的是,JavaScript代碼檢查功能經常會對某些得到廣泛應用的jQuery Core生產版本進行語法錯誤誤報。據稱該項目開發團隊正在著手修復,并承諾在未來的版本中減少此類誤報情況的發生,但在過去十八個月當中、我們仍然沒能得到任何有價值的進程與成果。
#p#
Komodo IDE
自2001年Komodo IDE誕生以來,我個人曾經是它的熱心用戶兼忠實粉絲。盡管Sublime Text以及WebStorm等新型產品能夠在某些方面將其超越,但不可否認、Komodo IDE仍然是一款出色的編輯器與IDE。
Komodo IDE提供高級JavaScript編輯、語法高亮、導航以及調試等功能,但卻不包含JavaScript代碼檢查機制。有鑒于此,大家可以始終在shell當中運行JSHint。
Komodo支持十幾種編程與標記語言,并重點面向Perl、Python、PHP、Ruby、Tcl以及XSLT。憑借著自身廣泛的編程及標記語言支持能力,包括重構、調試及解析機制,Komodo IDE成為開源語言領域內端到端開發工作中的一大理想選項。
Komodo擁有一套代碼重構模塊,能夠面向其提供代碼智能特性的全部語言起效,具體包括PHP、Perl、Python、Ruby、JavaScript以及Node.js。遺憾的是,這套方案存在著“最小公分母”特性限制了其對變量與類成員進行重命名以及將代碼提取至方法的能力。很明顯,這些都是最為常見的實用性需求。
Komodo IDE擁有雙列編輯與多內容選定功能。這使其具備了幾乎可與Sublime Text以及TextMate相比肩的大量內容編輯效果。我們在比較過程當中發現,Komodo更多傾向于IDE定位,而Sublime Text的速度表現則更為出色。而且著眼于性能水平方面,Komodo新版本的速度水平較舊版本實現了顯著改進,特別是在屏幕繪制、搜索以及語法檢查等方面。
Komodo IDE擁有幾項大多數其它競爭產品所缺乏的功能。其一是其HTTP Inspector,它在調試Ajax回調時表現出色。另一條則是其Rx(即正則表達式,或者regex)工具包,我們能夠利用它順利為JavaScript、Perl、PHP、Python以及Ruby構建正則表達式并進行測試。
Komodo IDE提供先進JavaScript編輯、語法高亮以及導航機制,但卻不包含常用的JavaScript代碼檢查機制(我們需要運行JSHint來彌補這一不足)。Komodo支持十幾種編程與標記語言,重點面向Perl、Python、PHP、Ruby、Tcl以及XSLT,且其中包含調試、重構、源代碼控制集成以及單元測試等功能。
協作能力是Komodo IDE的另一大差異優勢——大家不妨將其理解為利用Google Docs進行編碼。我們可以為文件組建立會話,將聯系人作為協作者添加至會話當中,而后同時對同一文件進行處理——開發內容會以近實時方式實現同步。
協作機制雖然不能完全取代源代碼控制,但它卻確實算得上一種有益的補充。Komodo IDE利用CVS、Subversion、Perforce、Git、Mercurial以及Bazaar實現源代碼控制集成,但只支持最基本的版本控制操作。分支版本等較為高級的操作必須通過獨立的源代碼控制客戶端才能實現。
盡管Komodo并不具備自己的JavaScript文件格式化工具,但我們卻能夠利用各類最佳開源方案的優勢實現這一任務。著眼于現成方案,JavaScript文件的默認格式化工具為JS Beautifier,不過大家可以在下拉菜單中找到另外九種選項。
Komodo IDE并不支持對客戶端JavaScript進行調試,但卻能夠以本地及遠程方式實現Node.js調試。除此之外,它還可以調試Per、Python、PHP、Ruby、Tcl以及XSLT代碼。當然,大家亦能夠利用火狐瀏覽器的Firebug或者Chrome瀏覽器實現調試。
Komodo IDE擁有一套DOM查看工具,允許大家以可折疊樹樹狀圖的方式查看XML與HTML文件。它還允許我們運行XPath搜索以實現此類樹狀圖的內容過濾。
Komodo的代碼分析與單元測試模塊并不支持JavaScript代碼。不過JavaScript與Node.js都被包含在了Komodo的代碼智能模塊當中,其能夠實現代碼瀏覽、自動補全以及調用提示。
Komodo IDE可以通過FTP、SFTP、FTPS或者SCP實現文件組發布。Komodo還能夠同步文件內容并檢測出可能導致大家覆蓋他人變更內容的潛在發布沖突。
總體而言,Komodo是一款良好但還稱不上出色的JavaScript IDE,同時也是一款良好但談不到卓越的JavaScript編輯器。不過它仍然有機會切實滿足大家的實際需求——特別是在我們需要處理Perl、Python、PHP、Ruby、Tcl或者XSLT代碼的情況下。
#p#
NetBeans IDE
NetBeans對于客戶端JavaScript、HTML 5以及CSS 3擁有良好的支持能力,而且支持利用Cordova/PhoneGap框架構建基于JavaScript的移動應用程序。盡管NetBeans并不是本次評測當中速度表現最強的IDE方案,但它卻足以成為最快方案之一,而且基于開源許可免費發布。當然,在面對服務器端JavaScript編程時,大家恐怕需要找找其它方案才行。
NetBeans JavaScript編輯器提供語法高亮、自動補全以及代碼折疊等大家希望擁有的功能。其JavaScript編輯功能同樣也作用于被嵌入至PHP、JSP以及HTML文件內的JavaScript代碼。jQuery支持能力也內置于編輯器當中。盡管NetBeans 8在更新當中實現了RequireJS支持并為Node.js提供一款社區插件,但利用它處理Node.js項目或者JavaScript代碼庫項目仍然會帶來令人沮喪的使用體驗。
代碼分析機制會在我們編輯內容的同時在后臺中同時運行,從而提供各類警告與提示信息。調試機制能夠作用于嵌入WebKit瀏覽器以及安裝有NetBeans Connector的Chrome瀏覽器當中。該調試工具能夠應對DOM、行、事件以及XMLHttpRequest斷點,同時能夠顯示變量、審查以及調用堆棧。另有一套集成化瀏覽器日志窗口用于顯示瀏覽器異常、錯誤以及警告信息。
NetBeans能夠利用JsTestDriver配置并執行單元測試——順帶一提,JsTestDriver為單一JAR(即Java歸檔)文件,大家可以免費進行下載。如果大家在Services窗口中進行JsTestDriver進行配置時指定了安裝有NetBeans Connector的Chrome作為JsTestDriver瀏覽器,那么單元測試調試功能將自動啟用。
當大家利用NetBeans Connetor在Chrome瀏覽器內進行Web應用程序調試時,或者利用Chrome開發者工具編輯CSS代碼時,所作出的變更將被NetBeans捕捉到并保存到對應CSS文件當中。不過如果我們的CSS文件是由SASS或者LESS風格的表格所生成,那么各位必須以手動方式更新該源表格,因為此類CSS文件僅僅屬于編譯后的輸出結果。
在嵌入式WebKit瀏覽器以及安裝有NetBeans Connector的Chrome瀏覽器當中,大家可以利用NetBeans網絡監控工具查看請求頭、響應以及用于REST通信的調用堆棧。對于WebSocket通信而言,頭與文本框都將得以顯示。總體而言,NetBeans在與Chrome配合時能夠帶來略優于火狐與Firebug組合的調試功能使用體驗。
NetBeans IDE除支持JavaScript之外,亦面向Java、C/C++、XML、HTML 5、PHP、Groovy、Javadoc、JSP以及Cordova/PhoneGap。JavaScript的具體支持能力包括語法高亮、自動補全、代碼折疊、代碼分析、調試以及單元測試等。
NetBeans當中集成了面向Git、Subversion、Mercurial以及CVS的源代碼控制機制。Git支持能力同時由一套圖形化Diff查看工具以及IDE內置的擱置系統所支撐。NetBeans能夠對Git文件狀態進行彩色代碼顯示,從而允許大家查看每個文件的版本遞進歷史,同時提供每個版本受控文件內每行代碼的版本遞進與作者信息。除此之外,NetBeans還擁有面向Subversion、Mercurial以及CVS的類似集成機制,不過我個人只測試過Git。
NetBeans當中集成了Jira與Bugzilla問題追蹤功能。在NetBeans任務窗口當中,大家可以搜索任務、搜索保存結果、更新任務并在已注冊的任務庫當中解決任務。遺憾的是,我所開發的開源項目采用Trac進行jQuery Core測試,而非Jira或者Bugzilla。NetBeans同時也能夠利用Kenai基礎設施進行站點團隊服務器集成——基本上為kenai.com與java.net。
NetBeans 8加入了RequireJS的支持能力,通過來自控制器視圖的超鏈接實現AngularJS導航機制,并且強化了AngularJS代碼補全功能。除此之外,NetBeans還在Knockout模板當中加入了代碼補全支持,其新編輯器還支持創建jQuery部件與插件,并在Nashorn當中執行JavaScript代碼調試。
不過NetBeans并沒能真正跟隨JavaScript借助Node.js以及Express等在服務器端起效的發展腳步。根據目前我的使用感受,盡管已經能夠配置Java應用程序與EJB模塊,NetBeans仍然缺少JavaScript配置功能。此外,雖然NetBeans能夠重構Java與PHP代碼,但它無法重構JavaScript代碼。
總體而言,NetBeans在客戶端JavaScript、HTML 5以及CSS 3開發領域算得上一套有競爭力的方案選項,特別是在大家同時需要在服務器端處理Java、PHP或者C++開發工作的情況下——但不包含在服務器端進行JavaScript開發的情況。如果大家沒有使用WebStorm的預算,那么NetBeans確實能夠起到相當不錯的替代作用——除了其孱弱的Node.js支持能力。
#p#
Visual Studio 2013配備NTVS與Web Essentials
在我的Visual Studio 2013全面評測報告當中,我曾經對該產品進行徹底闡述,但其中并沒有將JavaScript作為主要著眼點。今天,我們將把注意力轉向新的重點。
綜合評分板 功能 (30%) 性能水平 (30%) 易用性(20%) 說明文檔 (10%) 性價比(10%) 整體評分
總體而言,Visual Studio 2013是一套非常出色的JavaScript IDE,但它同時又是一套更加優秀的.Net IDE,而且它在面對JavaScript開發工作時還無法與WebStorm相比肩。盡管Visual Studio 2013也是一款不錯的JavaScript編輯器,但它的C#編輯器方案效果更好,而且在JavaScript方面也無法同Sublime Text媲美。
由于JavaScript是一種與平臺無關的編程語言,Visual Studio單純支持Windows系統的特性就變成了一種顯著局限——這迫使Mac與Linux系統用戶只能利用Windows虛擬機加以運用。(我撰寫這篇文章所用的就是一臺iMac設備,而Visual Studio 2013則運行在Parallels當中的Windows 8.1虛擬機之內。)
正如大家在以下截圖中所見,Visual Studio 2013在面向JavaScript開發時能夠提供良好的語法彩色顯示與代碼折疊功能,同時具備JavaScript代碼導航機制:右鍵點擊某個函數或者成員名稱,我們能夠輕松跳轉至其定義或者找到所有參考項。當大家查看過定義內容之后,只需按下界面上方的后退按鈕即可返回原先的窗口。不過我們能夠在.Net語言中使用的Peek Definition功能尚不適用于JavaScript開發。
大家可以輕松選定合適的代碼并插入對應片段,其中包括HTML或者URL字符串變量編碼。除了JavaScript、HTML以及CSS之外,大家也可以利用Visual Studio編輯Markdown文件并查看渲染后的Markdown效果,并將其與CoffeeScript配合使用。至少其中的一部分功能可以通過免費的Web Essentials插件獲得,且同時能夠實現Minify與JSHint集成。
除此之外,大家當然也能夠利用一款免費插件實現.Net語言、C++以及Python的編碼工作。在長時間使用Visual Studio并熟悉了其特性之后,大家能夠直接通過該IDE處理數據庫相關工作。Visual Studio在與SQL Server數據庫協作方面的表現非常突出。大家能夠利用Visual Studio來替代SQL Server Management Studio來處理開發工作當中需要涉及的各類主要操作,從而回避由后者帶來的復雜性。
根據具體環境的不同,Visual Studio 2013的JavaScript代碼補全機制既可能極具針對性與實用性,也可能缺乏針對性且毫無用處可言。幸運的是,Visual Studio現在會在不具備背景信息的情況下給出警告并顯示相關問題。大家甚至能夠通過輸入幾個字母來重新定義原本缺失的針對性補全列表。
相較于Visual Studio的早期版本,Visual Studio 2013擁有更為出色的JavaScript支持能力,而且為JavaScript項目帶來了重要的ALM改進。正如大家在上圖左側所見,語法彩色顯示與代碼折疊都擁有良好的實際效果。而在上圖右上見,我們可以看到JavaScript代碼能夠被作為Web項目來處理。
Visual Studio長久以來一直擁有良好的JavaScript代碼調試能力,但卻在很大程度上受到IE瀏覽器的限制。Visual Studio 2013則幾乎能夠在任意瀏覽器上進行調試,大家可以從中任意進行選擇,具體包括移動設備以及移動虛擬機中的瀏覽器方案。Visual Studio 2013還擁有兩套自有瀏覽器:IE的內部Web瀏覽器精簡版本以及Page Inspector,其能夠為我們提供渲染后的頁面效果以及所有源及樣式。雖然Page Inspector在運行過程中可能需要耗費大量時間并以逆向工程方式將自身設置為一套頁面,不過一旦大家使用這套方案,我們將不必再面對煩人的Visual Studio、瀏覽器以及瀏覽器開發工具。
Visual Studio 2013的性能表現通常相當出色,當然前提是我們為其提供充裕的內存與CPU處理能力,不過它在設計思路上傾向于要求大量資源。正如我在原先的全面評測中所說,Visual Studio 2013的啟動性能較早期版本有了很大提升。反正我個人是不想再像過去那樣進行了啟動操作之后泡杯茶慢慢等。
Visual Studio 2013在進行應用程序診斷時擁有強大的性能表現,不過它在面對通常運行在瀏覽器深層的二進制JavaScript代碼時的性能水平則沒那么突出。它擁有出色的JavaScript函數計時、HTML UI響應以及JavaScript內在管理工具,但這些方案只能被應用到基于JavaScript的Windows Store項目當中、而非那些偶爾使用JavaScript代碼的Web項目之內。
Node.js Tools for Visual Studio(簡稱NTVS)與Web Essentials(前面已經提到)插件的加入讓Visual Studio 2013獲得了……支持Node以及Web技術的能力。NTVS加入了Node.js應用程序編輯、IntelliSense、配置、Npm集成、TyperScript支持、本地與遠程調試(支持Windows、Mac OS以及Linux)以及在Azure網站與Azure Cloud Services上進行調試的能力。Web Essentials則加入了更多面向CSS、HTML、JavaScript、TypeScript、CoffeeScript以及LESS的支持能力。其中包括以自己偏好的方式運行JSHint,允許用戶在關聯菜單中縮小JavaScript文件、在保存時對CoffeeScript進行自動編譯以及對所生成的JavaScript代碼進行比對顯示等。
Visual Studio 2013集成ALM的決定非常值得稱道,但與本次評測所提到的多數其它IDE不同,它要求使用者在檢查項目的時候才使用該IDE、從而完成相關功能。大部分其它工具能夠自動識別并使用現有Git代碼庫。也許有辦法讓Visual Studio 2013實現同樣的能力,但我個人還沒有找到。
總體而言,如果我需要利用Visual Studio 2013作為自己的惟一一套JavaScript IDE方案,那我恐怕會欣然接受——特別是在主要立足于Windows計算機或者涉及微軟技術方案的項目當中。然而,對于我個人經常需要面對的JavaScript開發任務,在目前我主要使用的計算機平臺之上,WebStorm以及Sublime Text等新型多平臺工具才是更理想也更能提高生產效率的選項。
#p#
Visual Studio Code
Visual Studio Code是一款新型輕量化編輯器與IDE,由微軟公司打造。它擁有一部分來自Visual Studio的組件,并融合了開源Atom “Electron” shell,在C#方面擁有對ASP.Net 5開發的優秀支持效果,在TypeScript與JavaScript方面也具備理想的Node.js開發支持效果。除此之外,作為微軟僅在Windows平臺上支持Visual Studio方案這一固有格局的重要一步,VSCode同樣能夠運行在Mac OS X與Linux系統之上。下面這幅截圖就取自OS X系統平臺。
VSCode目前正處于預覽階段,但其已經擁有非常卓越的JavaScript代碼補全能力,而這要歸功于TypeScript編譯器的加入。VSCode能夠在后臺將我們的JavaScript代碼發送至TypeScript編譯器,從而推斷類型并構建一套符號表; 大家可以在接近屏幕圖像底部的框體內查看相關結果,這部分內容用于顯示hasOwnProperty方法信息。
同樣的符號表還能夠作用于IntelliSense,從而幫助大家在輸入一條表達式的過程中獲得用于實現代碼補全的彈出選項列表。在這里,我們能夠找到自動括號結束、自動單詞補全選項、輸入.后自動提供方法列表以及在某一方法內自動提供參數列表。大家還能夠將來自DefinitelyTyped的引用內容添加到d.ts文件當中,而VSCode將在識別出其中的常見問題后幫助我們將其修正,例如不慎使用了內置于Node.js中的變量__dirname。
Git支持能力同樣十分優秀且非常易于使用,不過Git同時也是其能夠支持的惟一ALM方案。Visual Studio Code調試工具能夠為Node.js(以及ASP.Net)開發流程提供優異的調試體驗。VSCode還針對HTML、CSS、LESS、SASS以及JSON擁有出色的工具選項,其基于支持IE F12開發者工具的同類技術基礎。除此之外,它還能夠以可定制方式與Gulp及Jake等外部任務運行工具相集成。
在本次Build 2015大會上,Scott Hanselman在OS X與Ubuntu平臺上運行Visual Studio Code的演示環節贏得了在場觀眾的熱烈掌聲。目前該版本為預覽版; 我們希望它能夠繼續在保有微軟方案功能特征的同時維持住現有的速度與輕量級優勢。我個人對于Visual Studio Code的發展前景充滿期待,它也作出了很多令人心動的承諾。
Visual Studio Code是一款面向Node.js與ASP.Net的全新輕量級IDE,其同時結合了TypeScript編譯器、“Roslyn”.Net編譯器等微軟技術方案并引入了Atom所使用的同一套“Electron”shell。Visual Studio Code可用于Windows、Mac OS X以及Linux平臺。
#p#
WebStorm
Jetpains公司推出的WebStorm雖然在本次評測的各款方案中價格較高,但卻是一款專注于HTML、CSS及JavaScript前端開發工作的高端Web開發IDE。Jetpains公司同時也在銷售面向Java、PHP、Ruby以及Python等語言的IDE方案,這些方案皆共享同一套核心引擎。
作為一款面向Web項目開發工作的編輯器,WebStorm的實際表現不輸于本次列入評測的任何一套方案。它不僅能為大家帶來預期中需要的一切,同時還提供大量意外驚喜。意料之中的功能包括語法彩色顯示與有限代碼補全。而意料之外的則包括面向不同混合語言實例的精確代碼補全,例如JavaScript所生成的HTML代碼。有些代碼編輯可能會將這類HTML代碼作為單純的字符串,但WebStorm卻能夠將其識別為嵌入式HTML并進行下一層解析。WebStorm的JavaScript代碼補全功能適用于關鍵字、標簽、變量、參數以及基于DOM的函數,它同時還支持多種針對特定瀏覽器的熱門方法。
對我個人來說,當進行代碼審查時查看與導航功能就顯得非常重要了——無論面向的是他人編寫的代碼、我自己原先寫出的代碼還是尚存疑的新代碼。WebStorm能夠輕松將用戶導航至聲明及符號,并可以找到高亮顯示各類符號、標簽及文件的使用情況。
JavaScript不單自身在不斷演進,其同時在不同類型的瀏覽器及其它環境中也擁有多種差異化實現方式。WebStorm允許大家設定自己偏好的JavaScript版本——最低可低至JavaScript 5.1,最高則可達到ECMAScript 6。此外,它還能夠根據當前選定的版本提供針對瀏覽器的兼容水平。
誠然,JavaScript是一種相當冗長的動態類型解釋型語言。為了向其中加入更理想的類型檢查機制,有些朋友傾向于編寫TypeScript。WebStorm支持TypeScript 1.4版本以及TyperScript 1.5中的部分關鍵性功能,而且還內置了一套TypeScript編譯器。為了編寫出更為緊湊的代碼,有些朋友喜歡編寫CoffeeScript。WebStorm同樣支持CoffeeScript,而且加入了源映射的調試支持能力,用以支持對被翻譯為JavaScript的TypeScript、CoffeeScript或者ECMAScript 6代碼的追蹤。
WebStorm中所內置的代碼檢查機制涵蓋多種常見的JavaScript問題,甚至包含了對Dart、EJS、HTML、Internationalization、LESS、SASS、XML、XPath以及XSLT的檢查能力。WebStorm內置有JSHint(jQuery團隊推薦使用),同時支持JSLint。
針對其它產品進行Node.js配置往往需要在命令shell當中面對惱人的會話。WebStorm能夠自動完成Node.js與Npm的安裝、升級以及源代碼配置。WebStorm同時允許大家對Node.js應用程序進行自動調試及配置,并自動補全CommonJS類成員。
除了對Node.js應用程序進行調試之外,WebStorm還能夠調試運行在Mozilla火狐或者谷歌Chrome瀏覽器當中的JavaScript代碼。它能夠在HTML文件以及JavaScript文件當中為我們提供斷點,同時允許大家自行定義斷點屬性。調試工具UI中會顯示我們的框架、變量以及審查視圖,并提供JavaScript表達式的運行時評估(以及谷歌Chrome瀏覽器中的元素標簽)。
Jetpains公司的WebStorm是一款面向HTML、CSS、JavaScript與XML的IDE,它擁有多項目支持能力(如上圖左側所示)以及包含GitHub在內的版本控制系統。WebStorm不僅是一款優秀的編輯器,同時也能夠實現代碼檢查(如上圖右上面板所示)并為用戶提供項目的面向對象視圖。
在調試過程中,一項名為LiveEdit的功能允許大家變更代碼內容并將對應變更立即傳遞到當前正在運行調試會話的瀏覽器當中。這不僅節約了時間,也將幫助我們避免多種常見難題,例如嘗試找出自己的變更為什么沒有效果時、卻發現只是單純忘記了刷新瀏覽器。
對于單元測試工作,WebStorm綁定了JsTestDriver插件。這款插件最初屬于一個谷歌項目,但Jetpains目前負責其開發貢獻任務。除此之外,WebStorm還能夠與Karma測試運行工具相集成。無論采用哪種測試方法,WebStorm都會追蹤代碼覆蓋率。
重構一直是一項重要但卻讓大部分軟件開發人員望而卻步的任務,這主要是因為在以手動方式進行重構時、我們往往會帶來新的錯誤。然而,盡管我們仍然需要了解如何以手動方式進行代碼重構并需要在重構過程中做出一系列決定,這款編輯器的強大能力已經足以通過非常便捷的方式進行自動重構。JavaScript庫當中沒有什么太過花哨的重構工作可做,特別是相較于Java或者C++庫,不過WebStorm自動實現所有重構類型的能力仍然極具現實意義:重命名; 提取變量、參數與方法; 代碼嵌入; 變更簽名; 移動; 最后復制——整個流程一氣呵成。
WebStorm能夠通過FTP、SFTP、FTPS部署至本地或安裝文件夾以及其它對應位置。WebStorm能夠根據需要對目錄及文件進行下載、上傳、同步與比對,如果大家愿意、它也能夠自動完成上傳工作。
WebStorm集成有全部主流版本控制系統,具體包括Subversion、Mercurial、Git(包括GitHub)、Perforce、CVS以及TFS。它擁有屬于自己的擱置系統,大家可以利用這一機制來將當前工作樹狀優先級整理為版本控制更新,并將其作為所使用版本控制系統內擱置系統(例如Git stash)的替代方案。WebStorm還會追蹤用戶的本地變更歷史記錄,并以內聯方式將變更內容與相關選項一同顯示以簡化恢復流程,這樣大家就不會遭遇工作成果丟失或者多次提交所引發的代碼損壞問題了——除非大家非常非??桃獾叵胍獙е逻@類狀況。
在使用WebStorm時,性能基本不是什么問題。其啟動速度要可能要比Sublime Text略慢一些,但這主要是因為后者基本上屬于一款編輯器,而且WebStorm的啟動速度明顯快于其它真正的IDE方案,特別是基于Java的NetBeans以及Eclipse等IDE選項。
從高層角度出發,WebStorm擁有充足的說明文檔資源,能夠幫助大家快速上手并找到多種常見問題的解決辦法。不過在深入進行鉆研之后,大家可能會發現自己需要通過一些陳舊的博文資料來應對難題。在某些情況下,我發現親自進行實驗并恢復文件內容的作法要比通過說明來了解具體解決辦法更為可行。
總體而言,WebStorm是我個人選出的最適合JavaScript/HTML 5/CSS嚴肅開發者群體的一套解決方案,這款功能全面的IDE絕對能夠令大家滿意。當然,如果各位同時也需要編寫大量非JavaScript的服務器端代碼,那么選擇其它能夠支持服務器端語言及數據庫,同時又能涵蓋JavaScript的IDE可能更為明智。此外,如果大家并不需要使用IDE,那么Sublime Text或者其它擁有良好JavaScript高亮功能的編輯器——例如packets——也是個不錯的選擇。
#p#
JavaScript IDE方案總結
綜上所述,Aptana是一款重新煥發出生機的老牌解決方案,它缺少一部分我認為理應存在的機制。Aptana的速度表現由于采用Eclipse作為底層框架而顯得比較捉急。而將Eclipse本體與官方JSDT插件相搭配的結果同樣無法帶來出色的JavaScript開發機制。
Komodo IDE是另一套老牌解決方案,而且如果大家會將JavaScript代碼與PHP、Perl、Python或者Ruby混合使用; 進行廣泛的Ajax開發工作; 或者編寫大量正則表達式,那么我仍然愿意將其積極推薦給大家。我個人希望它能夠提供面向JavaScript的代碼分析與單元測試功能。
我對于NetBeans持贊賞態度,而且其完全免費,不過遺憾的是它缺少良好的Node.js支持能力。Visual Studio 2013 update 4配合NTVS與Web Essentials是一款非常非常出色的JavaScript IDE,但它多少屬于重量級方案而且對于資源的需求量比較大,此外它還只能運行在Windows平臺之上。
Visual Studio Code是一款目前正處于預覽階段的新型輕量級產品,其中結合了大量來自Visual Studio的固有優勢、同時引入了開源Atom “Electron” shell。再有,它能夠運行在Mac OS X、Linux以及Windows系統平臺之上。雖然尚處于早期發展階段,但Visual Studio Code確實有潛力成為新的JavaScript IDE王者。
然而就目前來看,王者的皇冠仍然要歸屬于WebStorm。考慮到其出色的編輯功能、實時代碼分析、強大的ALM集成組合以及對于各類領先JavaScript框架的支持能力,WebStorm能夠滿足專業JavaScript開發人員對于一款IDE方案的所有需求——此外還提供其它驚喜。
Komodo IDE 9.0.1 / ActiveState
整體概述
Komodo是一款面向各類主流Web語言的專業級跨平臺IDE,具體包括HTML、CSS以及JavaScript。Komodo當中內置有JavaScript調試工具以及先進JavaScript編輯功能,例如重構。它支持面向數十種編程與標記語言的語法高亮顯示能力,且重點面向Perl、Python、PHP、Ruby、Tcl以及XSLT。
每套授權許可295美元。每年升級與技術支持服務要價87美元。從Komodo 7進行升級須支付168美元。
優點
• 良好的JavaScript代碼編輯、導航與調試能力。
• 支持對多組選定內容同時進行編輯。
• 面向JavaScript、其它語言以及jQuery等代碼庫提供自動補全與調用提示功能。
• 大括號自動插入與匹配大括號高亮提示。
• 集成對Subversion、Mercurial、Git、CVS、Perforce以及Bazaar的支持能力。
• 在空白處顯示變更追蹤結果。
• Live Markdown預覽。
• 支持Node.js,包括調試機制。
缺點
• 缺少JavaScript代碼檢查機制。
• 速度表現低于Sublime Text,但高于Eclipse以及NetBeans。
NetBeans IDE 8.0.2 / Oracledirectup
整體概述
盡管NetBeans擁有Web項目的概念,但它并不能真正支持JavaScript庫項目。此外,雖然它現在能夠支持RequireJS并具備多種Node.js與JSLint插件,但它并不能以我們希望的方式支持Node.js項目。
免費開源工具
優點
• 支持語法高亮顯示、自動補全、代碼折疊與代碼分析功能。
• 能夠實現調試與單元測試。
• 集成有源代碼控制、問題追蹤以及團隊服務器等機制。
• 利用Cordova框架實現移動Web開發支持能力。
缺點
• 速度表現糟糕,特別是與WebStorm相比較、其啟動速度令人沮喪。
• 對于Node.js以及JavaScript庫項目的支持能力較為有限。
• 相較于Eclipse,可選插件數量較為有限。
微軟Visual Studio 2013 Update 4 / Microsoftdirectup
整體概述
對于基于Windows系統平臺的開發工作來說,Visual Studio 2013確實是一套非常出色的JavaScript IDE,其擁有良好的代碼編輯與導航、語法高亮顯示、代碼折疊、調試以及JavaScript函數計時等功能。對于ALM,特別是Git與TFS,的支持能力亦相當值得稱道。
使用成本由Express SKU的免費到Ultimate with MSDN版本的13299美元(每年更新價格為4249美元)。
優點
• 良好的代碼編輯與導航、語法高亮顯示以及代碼折疊功能。
• 在多種瀏覽器中實現出色的調試支持能力。
• 提供JavaScript函數計時機制。
• 能夠為GIt以及Team Foundation Server提供良好支持。
• Node.js Tools與Web Essentials插件能夠改進Node、JavaScript以及其它相關開發流程。
缺點
• 不支持OS X或者Linux平臺,在這種情況下用戶只能在虛擬機中運行Windows系統。
• 新的“Peek definition”操作并不支持JavaScript(只適用于C#、Visual Basic以及C++代碼)。
• Visual Studio 2013的Ultimate with MSDN版本價格太過高昂,但Visual Studio 2015企業版的價格將有所下調。
WebStorm 10.0.2 / Jetpainsdirectup
整體概述
WebStorm是一款令人贊不絕口的、效率極高且功能齊備的專業級IDE,主要面向JavaScript、HTML以及CSS開發工作。它還提供非常合理的價位設置——強烈推薦給每一位嚴肅JavaScript開發人員。
根據使用方式及組織關系由免費到99美元,其中包含一年升級服務。在此之后的每年升級價格同樣由免費到99美元不等。大家可以將這套環境運行在Windows、OS X或者Linux等平臺之上——且仍然只需一套許可密鑰。此外提供三十天免費試用期。
優點
• 卓越的IDE方案,密切貼近利用HTML、CSS、JavaScript進行的Web開發工作,同時適用于各類JavaScript框架以及相關語言。
• 能夠實現語法高亮顯示、文件查找以及代碼重構。
• 支持CVS、Git、GitHub、Mercurial以及Subversion集成所實現的版本控制能力。
• 能夠實時進行代碼分析、錯誤高亮提示以及快速修復。
• 擁有自己的項目系統并配備特定項目視圖、文件結構視圖,并能夠在不同文件、類、方法以及使用狀態之間快速切換。
• 包含有FTP部署、JavaScript調試工具、單元測試運行工具并且集成代碼覆蓋機制。
• 包含有Node.js、Bower、TypeScript、CoffeeScript以及Dart支持能力。
缺點
• 啟動時間比較長。
• 去掉了服務器層與數據庫層支持能力(Jetpais公司旗下另有其它產品能夠實現額外服務器端支持能力,建議大家利用這些方案進行Ajax開發工作)。
原文鏈接:
http://www.infoworld.com/article/2925050/javascript/review-7-javascript-ides-put-to-the-test.html
原文標題:Review: 7 JavaScript IDEs put to the test
核子可樂譯