[[245249]]

【51CTO.com快譯】JavaScript的偉大之處在于它能夠通過與HTML5和CSS的協(xié)作，開發(fā)出各種酷炫的前端項目，和移動應(yīng)用程序。近年來，JavaScript在使用Node.js進(jìn)行后端開發(fā)領(lǐng)域也是備受推崇。因此，這些方面的技術(shù)發(fā)展，也驅(qū)動了各種集成開發(fā)環(huán)境(IDE)不斷與時俱進(jìn)。

如今，由于具有一定的代碼調(diào)試能力、并能提供對各種應(yīng)用生命周期管理(ALM)系統(tǒng)的支持，IDE已經(jīng)成為了各種普通編輯器的***。不過在網(wǎng)絡(luò)中，隨著各個平臺上出現(xiàn)的IDE越來越多，我們很難尋覓到真正需要的、理想的IDE工具。

本文在對業(yè)界***的五種工具進(jìn)行介紹的同時，將對這些JavaScript IDE進(jìn)行簡要的比較。

1.WebStorm

要比人氣，WebStorm絕對是***。它是由JetBrains公司(譯者注：一家捷克的軟件開發(fā)公司)提供的、用于JavaScript開發(fā)的、且被公認(rèn)為***大的IDE之一。當(dāng)然，盡管它對提高效率和生產(chǎn)力大有幫助，但是它的費用也相當(dāng)昂貴。

它所提供的功能包括：代碼的完成度、易識別的錯誤、可重構(gòu)的過剩語言代碼檢查，以及針對客戶端代碼的內(nèi)置調(diào)試器。這意味著開發(fā)人員甚至可以在不退出IDE的狀態(tài)下，檢查、執(zhí)行并評估他們的程序代碼。

另外，我們可以在WebStorm內(nèi)進(jìn)行程序測試，而該工具也能提供一份清楚易讀的報告，讓用戶充分了解有關(guān)調(diào)試與測試的各種信息。同時，它的spy-js功能可以通過跟蹤代碼，來防止代碼間產(chǎn)生相互作用和并發(fā)影響。

2.Visual Studio Code

Visual Studio Code在業(yè)界已經(jīng)存在了很長一段時間了，而且一直廣受開發(fā)者的歡迎。雖然有太多的開發(fā)人員愿意討論如何在Visual Studio Code中使用Golang，但實際上它也能夠兼容其他40種語言?？梢?，該平臺非常適合于前端的開發(fā)。

Visual Studio Code所提供的功能包括：智能感知(IntelliSense)、內(nèi)置式git集成、和在編輯器內(nèi)實現(xiàn)代碼調(diào)試的能力。同時，該工具還帶有大量的可擴展式定制選項。由于它能夠支持多種不同的語言，因此它常年位列***的開發(fā)工具榜首。

3.Atom IDE

可以毫不夸張地說，沒有Atom的五大IDE列表是不完整的。通過使用Electron和TypeScript的語言包，您可以實現(xiàn)JavaScript、CSS和Node.js之間的兼容。除了能用它來查詢各種引用關(guān)系、和檢查各種定義的大綱視圖之外，開發(fā)人員還可以基于其上下文感知的自動完成工具，來使得自己的程序編碼更加快捷。

另外，Atom的懸停工具能夠用來顯示各種相關(guān)的代碼信息。同時，它配備了一整套診斷工具，可以幫助開發(fā)人員快速地了解、并識別出那些并非自己編寫的代碼(一般由系統(tǒng)自動產(chǎn)生的)。

4.Brackets

這款開源編輯器是由Adobe公司所提供，它是用JavaScript、HTML和CSS編寫而成。Brackets能夠給您帶來原生代碼的編輯體驗，但是它缺乏對于并發(fā)影響的兼容。它的實時預(yù)覽(Live Preview)功能，能夠讓您的瀏覽器與之同步。而它的快速編輯用戶界面(Quick Edit User Interface)，能夠提供您所需要的全部工具。由于與您所使用的代碼語言無關(guān)，因此它的效果特別好。

5.Komodo Edit

Komodo Edit是您使用JavaScript的另一個不錯的選擇。它是Komodo IDE(僅提供簡單接口)的高級版本。它通常被開發(fā)人員當(dāng)作處理某個系列問題的一種直觀工具。Komodo Edit支持Node.js的每一種功能，包括：調(diào)試、單元測試、與各個構(gòu)建系統(tǒng)的集成、甚至是協(xié)作。

您還可以用它來跟蹤各種變更、檢查不同的標(biāo)簽、代碼折疊(code folding)、代碼塊、以及進(jìn)行多選等操作。同時它還提供智能的語言檢測功能。

下面針對某些常用的功能，我們來看看哪一款I(lǐng)DE會更有優(yōu)勢。

IDE的優(yōu)、缺點比較

版本控制

Komodo Edit的一個最突出優(yōu)點便是版本控制。該功能被內(nèi)置于它的IDE中，因此它允許開發(fā)人員靈活地在他們的代碼中對git進(jìn)行推送和拉取。

自動完成和代碼檢查

當(dāng)您將Visual Studio Code的功能與WebStorm進(jìn)行比較時，您會很容易地發(fā)現(xiàn)WebStorm擁有著更為強大的功能。Visual Studio不會向您指出某個方法名稱上可能存在的拼寫錯誤。另外，對于一些沒有使用到的方法，它也不會向您發(fā)出警告。

可擴展性

Atom采用的是模塊化的設(shè)計，這就意味著該編輯器幾乎所有的部件都可被修改。甚至是它的一些系統(tǒng)核心包，如：搜索和替換功能，都可以在其編輯器中被調(diào)整或取代。同時，它也為新建的插件提供了相應(yīng)的文檔，這對于從事二次開發(fā)的人員來說是再好不過了。

支持代碼重構(gòu)

我們在實踐中，保持代碼的簡單、整潔是非常必要的，而這正是WebStorm的競爭優(yōu)勢。它直接通過執(zhí)行提取變量、移動文件、和內(nèi)聯(lián)變量提取，來自動進(jìn)行代碼重構(gòu)。

哪種更適合初學(xué)者?

Atom是一種既適合于有經(jīng)驗的程序員，又能夠讓那些剛走上編程道路的初學(xué)者容易上手的文本編輯器。它提供了諸如：添加各種快捷鍵、更改主題、安裝插件、修改核心設(shè)置等選項，您既可以通過GUI，也能使用手動方式來實現(xiàn)。可見，Atom更適合于那些初學(xué)者。

結(jié)論

在實際應(yīng)用中，開發(fā)人員經(jīng)常會綜合地使用上面提到的五種IDE，讓它們相互補足、相得益彰。因此我們在做選擇的時候，也應(yīng)當(dāng)多借鑒各自的優(yōu)勢，而不要一味追求某個***的、最全的工具。

原文標(biāo)題：Top 5 JavaScript IDEs in 2018，作者: Anton Shaleynikov

【51CTO譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】