Top 10 JavaScript編輯器,你在用哪個?

本文來自于:葡萄城控件技術團隊博客

對于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來實現。

官網鏈接:http://www.sublimetext.com/

下載地址:http://www.sublimetext.com/3

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。

官網鏈接:https://code.visualstudio.com/

下載地址:https://code.visualstudio.com/Download

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集成)。

快速編輯、快速保存文檔、快速打開文件和實時預覽均有助于簡化Web應用程序編輯,讓你專注于編碼或設計。Brackets也有一些缺點,例如一些Brackets擴展很難配置,不像Emacs軟件包或Vim插件那樣容易。

官網鏈接:http://brackets.io/

下載地址:https://github.com/adobe/brackets/releases/download/release-1.9/Brackets.Release.1.9.msi

Atom

Atom 1.15.0是一款GitHub上的免費的開放源代碼、可編程的編輯器,適用于Windows,MacOS和Linux平臺,它與GitHub應用程序集成在一起,擁有很多個可用的軟件包和主題。

Atom源代碼位于GitHub上,它是用CoffeeScript編寫的,與Node.js集成在一起。Atom是Chromium瀏覽器的一個特殊的存在,它被設計成一個文本編輯器而不是一個Web瀏覽器;?每個Atom窗口本質上都是一個本地呈現的網頁。

當Atom不自動更新時,性能是非常好的。它具有一些非常棒的功能,例如模糊搜索、快速項目搜索和替換、多個光標和選擇、多個窗格、代碼段、代碼折疊以及導入TextMate語法和主題的功能。Atom可以安裝兩個命令行實用程序:Atom,用于從shell啟動編輯器;APM,用于管理Atom的軟件包。

官網鏈接:https://atom.io/

下載地址:https://atom.io/download/windows_x64

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和其它編程提供標記語言。

官網鏈接:https://www.activestate.com/komodo-ide/downloads/edit

下載地址:https://www.activestate.com/komodo-ide/downloads/edit

Notepad ++

Notepad ++是一個免費的開源Windows源代碼編輯器和記事本,非常適合于編輯JavaScript。它支持約50種編程和標記語言。除了其多個文檔編輯窗口之外,它還具有工作區樹視圖、功能列表選項卡和文檔映射選項卡。它的加載時間足夠快,性能足夠強,不會讓你感到速度慢。

使用語法著色和折疊功能、可編輯功能(包括列模式編輯和正則表達式、支持搜索和替換)以及一定量的功能完成和參數提示功能,Notepad++可以輕松地成為JavaScript的首選代碼編輯器。然而,它還不是全面的JavaScript編輯器,它還不能生成代碼,執行諸如重構的操作,并在大型項目中快速導航。

官網鏈接:https://notepad-plus-plus.org/

下載地址:https://notepad-plus-plus.org/download/v7.3.3.html

BBEdit

BBEdit 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安裝三個命令行工具:一個用于編輯器,一個用于差異引擎,最后一個用于多媒體搜索。

官網鏈接:http://www.barebones.com/products/bbedit/

下載地址:https://s3.amazonaws.com/BBSW-download/BBEdit_11.6.6.dmg

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存儲庫中的源代碼。

官網鏈接:http://macromates.com/

下載地址:http://macromates.com/download

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交互。

官網鏈接:https://emacsformacosx.com/

下載地址:https://emacsformacosx.com/emacs-builds/Emacs-25.2-universal.dmg

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文件中的建議是相當好的。

官網鏈接:http://www.vim.org/

下載地址:http://www.vim.org/download.php

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

無論你是專注于客戶端的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可以滿足你的要求。

原文鏈接:http://www.infoworld.com/article/3195951/application-development/review-the-10-best-javascript-editors.html

轉載請注明出自:葡萄城控件

關于葡萄城

葡萄城是全球控件行業領導者,世界領先的企業應用定制工具、企業報表和商業智能解決方案提供商,為超過75%的全球財富500強企業提供服務。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,345評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,494評論 3 416
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,283評論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,953評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,714評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,186評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,255評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,410評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,940評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,776評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,976評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,518評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,210評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,642評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,878評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,654評論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,958評論 2 373

推薦閱讀更多精彩內容