總結幾個好用的JavaScript編輯器

英文：Martin Heller  譯文：葡萄城控制

學習過程中遇到什麼問題或想取得學習資源的話，歡迎加入學習交流群343599877，我們一起學習前端！

對於JavaScript程式設計師來說，目前有許多很棒的工具可供選擇。本文將會討論10個優秀的支援JavaScript，HTML5和CSS開發，並且可以使用Markdown進行文件編寫的文字編輯器。為什麼要使用編輯器而不是IDE進行JavaScript程式設計？原因就是速度快。

編輯器和IDE之間的本質差異在於：IDE不但可以調試，並且可以對程式碼進行概要分析，IDE還支援應用程式的生命週期管理（ALM）系統。我們在這裡討論的許多編輯器至少支援一個版本控制系統，通常是Git，現在IDE和編輯器之間的差異也越來越小。

在這10個JavaScript編輯器中，Sublime Text和Visual Studio Code是其中排名靠前的兩個。 Sublime Text以其速度和方便的編輯功能多樣性而聞名，Visual Studio Code的功能和速度與Sublime Text幾乎一致。 TextMate排名第三，雖然TextMate在兩年前排名第一，但其功能並沒有真正跟上發展。

你很可能在Sublime Text，Visual Studio Code和Brackets中找到自己喜歡的JavaScript編輯器，但還有其它的編輯器工具Atom，BBEdit，Komodo Edit，Notepad ++，Emacs和Vim等值得了解。你可以根據現在的項目，選擇其中最方便使用的編輯工具。

下面我們來了解所有的編輯器，文末會對它們進行比較。

Sublime Text

如果你想要一個靈活、強大、可擴展的文字編輯器，它能夠如閃電般快速運行，並且支援切換到其它視窗進行程式碼檢查、調試和部署，那麼可以考慮使用Sublime Text。

除了速度較快以外，Sublime Text還有許多值得注意的優勢，它涵蓋了70多種檔案類型，其中包括JavaScript、HTML和CSS; 即時導航和即時專案切換; 多選項（一次進行一系列更改），包括列選擇（一次選擇文件的一個矩形區域）; 多視窗（使用你的所有顯示器視窗）和分割視窗; 使用簡單的JSON檔案進行完整的自訂; 基於Python的插件API; 一個統一的、可搜尋的命令板。

對於使用其它編輯器的程式設計師來說，Sublime Text支援TextMate套件（不包括命令）和Vi / Vim模擬。

Sublime Text是一個高度可配置且可擴展的文字編輯器。它包含超過50種語法，其中包括JavaScript，它可以使用Sublime軟體包和TextMate語法定義進行擴充。可以能夠透過少量按鍵來安裝Babel（React）和TypeScript（Angular）的語法和支援。

Sublime Text支援多個視窗、分割窗口，每個專案可以有多個工作區、多個視圖以及包含視圖的多個窗格。當想要整合、調試和測試空間時，使用所有的螢幕空間會變得相當簡單的。 Sublime Text也支援所有內容的自訂：顏色，文字字體，全域鍵綁定，製表符停止，特定檔案的鍵綁定和程式碼段，甚至語法突出顯示規則等。 Sublime Text的編碼文件預設為JSON文件，語言定義預設是XML。

Sublime Text有一個活躍的用於創建和維護Sublime Text包和插件的社群。 Sublime Text缺少的許多功能，包括JSLint和JSHint接口，JsFormat，JsMinify，PrettyJSON和Git支援 ，都可以透過社群使用Package Installer來實現。

官網連結：

Visual Studio Code

#Visual Studio Code是一個的免費的輕量級編輯器和IDE，它是Microsoft發布的。它具有Visual Studio元件，能與開源的Atom Electron shell混合使用。它對於使用C＃進行ASP.Net Core的開發，提供了極佳的支援；同時它也透過TypeScript和JavaScript為Node.js的開發，提供了極佳的支援。有別於Visual Studio僅在Windows上支援的慣例，Visual Studio Code也能在MacOS和Linux上運作。

由於包含了TypeScript編譯器和Salsa引擎，Visual Studio Code具有非常好的JavaScript程式碼完成功能。 Visual Studio Code會將JavaScript程式碼傳送到背景的TypeScript編譯器來推斷類型並建立符號表。你可以在螢幕圖片底部的方塊中看到hasOwnProperty方法的資訊。

相同的符號表使得IntelliSense能夠在整個表達式的輸入過程中，為你提供出色的彈出式選項清單。你可以獲得以下功能：填入後自動關閉、自動填寫完成選項、鍵入後的自動方法清單和方法中的自動參數清單。你可以透過從DefinitelyTyped中加入d.ts檔案的引用，來增強IntelliSense。當你識別常見問題（例如使用Node.js內建變數中的__dirname）時，Visual Studio Code將為你提供這些功能。

Visual Studio Code是一個免費的輕量級編輯器和IDE，用於Node.js和ASP.Net 開發。它結合了Microsoft技術，例如TypeScript編譯器、Roslyn .Net編譯器和Atom使用的Electron shell。 Visual Studio Code適用於Windows，MacOS和Linux平台。

Visual Studio Code的Git支援非常好，使用起來很簡單。 Visual Studio Code偵錯器為Node.js和ASP.Net開發提供了出色的偵錯體驗。 Visual Studio Code具有非常好的HTML，CSS，Less，Sass和JSON工具，這個工具是基於與Internet Explorer F12開發人員工具相同的技術。此外，Visual Studio Code可以與外部任務運行程式（如gulp和jake）進行可自訂的整合。

Visual Studio Code有著強大的插件生態系統，例如支援Angular和React。推薦可以在使用JavaScript和TypeScript框架和程式庫建立應用程式時使用Visual Studio Code。

官網連結：

下載位址：

Brackets

Brackets是免費的開源編輯器，原本來自於Adobe，旨在為JavaScript， HTML和CSS提供更好的工具以及相關的開放式Web技術。 Brackets本身是用JavaScript，HTML和CSS寫的。除了內建功能外，Brackets還有一個擴充功能管理器，用於擴展前端開發人員使用的許多語言和工具。 Brackets不像Sublime Text和TextMate那樣運行的很快，但除了從網路載入或更新程式內容的暫停之外，它仍然運行的非常快。

Brackets不僅對JavaScript，CSS，HTML和Node.js有著很好的支持，它還具有一些其它很棒的功能，例如與HTML ID相關的CSS線上編輯。此外，Brackets有著簡潔的UI介面和編輯時網頁的即時預覽。對於免費的程式碼編輯器來說，Brackets是一個很好的選擇。

Brackets擴充也是用JavaScript寫的，也可以呼叫Node.js模組。與大多數在選項卡中顯示開啟檔案的編輯器不同的是，Brackets具有顯示在檔案樹上方的工作文件清單。

Brackets的JavaScript自動完成功能非常好，自動填入各類別括號的結束括號，以及jQuery方法中鍵入$之後的關鍵字、變數和方法的自動下拉式選單。 Brackets可以控制Node.js的偵錯器，並從選單項目重新啟動Node。 Brackets可以很方便的添加附加功能的擴展（例如TypeScript和JSX支持，Bower集成和Git集成）。

快速編輯、快速儲存文件、快速開啟檔案和即時預覽均有助於簡化網路應用程式編輯，讓你專注於程式設計或設計。 Brackets也有一些缺點，例如一些Brackets擴充很難配置，不像Emacs軟體包或Vim插件那麼容易。

官網連結：http://brackets.io/

#下載網址：

Atom

Atom 1.15.0是一款GitHub上的免費的開放原始碼、可程式化的編輯器，適用於Windows，MacOS和Linux平台，它與GitHub應用程式整合在一起，擁有許多可用的軟體包和主題。

Atom原始碼位於GitHub上，它是用CoffeeScript編寫的，與Node.js整合在一起。 Atom是Chromium瀏覽器的一個特殊的存在，它被設計成一個文字編輯器而不是一個網頁瀏覽器; 每個Atom視窗本質上都是一個本地呈現的網頁。

當Atom不自動更新時，效能是非常好的。它具有一些非常棒的功能，例如模糊搜尋、快速專案搜尋和替換、多個遊標和選擇、多個窗格、程式碼片段、程式碼折疊以及匯入TextMate語法和主題的功能。 Atom可以安裝兩個命令列實用程式：Atom，用於從shell啟動編輯器；APM，用於管理Atom的軟體包。

Komodo Edit

Komodo Edit 是ActiveState的一個免費的，縮小功能版本的Komodo IDE，它是一個很酷的多語言編輯器。

如果你喜歡Komodo IDE但是卻支付不起，那麼Komodo Edit會是你的一個好選擇。 Komodo Edit不是一個IDE，所以你需要在編輯器外完成程式碼控制。

它不提供即時程式碼收集功能，如果你獨立開發，不與其他人合程式碼，就沒有任何問題。它也不提供HTTP檢查器。 Komodo Edit具有與Komodo IDE相同的編輯功能，但缺少程式碼重構、調試、單元測試、原始碼控制整合以及其他適合IDE的功能。

在任何情況下，Komodo Edit可以免費滿足你的JavaScript編輯需求，並為編輯HTML，CSS，Python，Perl，Ruby，Tcl和其它程式設計提供標記語言。

Notepad ++

Notepad ++是一個免費的開源Windows原始碼編輯器和記事本，非常適合編輯JavaScript。它支援約50種程式設計和標記語言。除了其多個文件編輯視窗之外，它還具有工作區樹視圖、功能清單標籤和文件映射選項卡。它的載入時間夠快，效能夠強，不會讓你感到速度慢。

使用語法著色和折疊功能、可編輯功能（包括列模式編輯和正規表示式、支援搜尋和替換）以及一定量的功能完成和參數提示功能，Notepad++可以輕鬆地成為JavaScript的首選程式碼編輯器。然而，它還不是全面的JavaScript編輯器，它還不能產生程式碼，執行諸如重構的操作，並在大型專案中快速導航。

BBEdit

BEdit 11.0.3是文字編輯器，僅用於Mac的HTML，它支援約35種程式設計和標記語言，社區版也透過BBEdit網站提供了對許多其它語言的支援。授權版和社群版都有語法高亮；授權版還有一定程度的自動完成功能，主要用於功能名稱、變數名稱、少量的關鍵字和標籤。許可版還能與Git，Perforce和Subversion版本控制系統整合。

BBEdit 11是該產品的重大改寫，這個版本比以前更加快速，並且還能夠很好地處理Ginormous檔案。它具有將選擇或查找結果複製到新緩衝區中的提取功能，以及剪切功能。 BBEdit可以編輯和執行Perl，Python，Ruby，和Shell腳本，以及檢查Perl和Python腳本的語法。

BBEdit對HTML和Markdown的支援其實比其對JavaScript支援更好。你可以為BBEdit安裝三個命令列工具：一個用於編輯器，一個用於差異引擎，最後一個用於多媒體搜尋。

TextMate

TextMate曾經主要用於在MacBook上編寫Ruby on Rails，但是現在TextMate變得不那麼突出了，同時Sublime Text逐漸收到了歡迎。

TextMate不是一個IDE，但它卻提供了軟體包、程式碼片段、巨集和範圍系統等語言特定的IDE都缺少的功能。 TextMate現在提供了簡單的JavaScript和jQuery的捆綁包，它們為快速生成JavaScript和jQuery程式碼提供了一系列不錯的工具。想要有類似IDE的功能，你可以使用TextMate的shell整合版本，但不要期待TextMate可以進行程式碼重構、自動單元或回歸測試。如果正確設定了Grunt，那麼TextMate就可以自動執行JavaScript測試。

TextMate有一個捆綁包首選項標籤，從中可以下載並安裝其他捆綁包。捆綁來源，實際上是產品駐留在GitHub儲存庫中的原始碼。

Emacs

Emacs及其衍生來自於自20世紀70年代初以來的MIT AI實驗室。 Emacs從作為TECO文字編輯器的巨集開始，逐步發展獨立。預設安裝在MacOS上的Emacs是22.1.1版本，沒有GUI支援。你可以輕鬆地安裝XEmacs，Aquamacs（MacOS的GUI）和更新的GNU Emacs版本。 Emacs作為JavaScript編輯器，編輯JavaScript的預設模式是在js套件中，使用Emacs可以獲得更好的語法高亮和linting。

Emacs使用js2模式包，並使用ac-js2自動完成。在Emacs中，你可以使用序列模式來取得即時瀏覽器JavaScript，HTML和CSS互動。

Vim（and variants）

Vi（visual interface）最初由Bill Joy為Unix撰寫，自1976年開始，逐漸由Ed向Ex演變。 Vim是免費的、開源的、改良版的Vi；預設安裝在Mac OS X上的是7.3版本。

你可以輕鬆安裝Vim的更新版本，MacVim（MacOS的GUI）或任何適用於你的平台的功能。 Vim作為JavaScript編輯器，它的vim-plug readme檔案中的建議是相當好的。

使用哪個編輯器，由你決定

無論你是專注於客戶端的JavaScript還是Node.js，都有多種選擇。

如果你正在尋找一個功能強大，速度很快的JavaScript程式設計文字編輯器，並支援許多其它語言，可以選擇Sublime Text。

如果你想要一個免費的，快速的JavaScript編輯器，相容IDE，並且對ASP.Net和C＃支援得很好，Visual Studio Code是一個很好的選擇。

Brackets和Atom是兩個新的、免費的文字編輯器。 Brackets是一款很接近用於Node.js開發IDE的編輯器，Atom可以與GitHub桌面客戶高度整合。

在Windows上，Notepad++是快速、有效且免費的。在MacOS上，BBEdit是快速、很酷的、免費的限量版本，可用於版本控制集成，是一個HTML工具。 TextMate仍然是一個非常棒的編輯器，具有快速、全功能、可擴展的特點，但是開發速度已經很緩慢。

如果傾向於使用開源腳本語言，Komodo Edit是個不錯的選擇。如果喜歡自訂編輯器，Emacs或Vim可以滿足你的要求。

以上是總結幾個好用的JavaScript編輯器的詳細內容。更多資訊請關注PHP中文網其他相關文章！