vlambda博客
学习文章列表

评论:10 个最好的 JavaScript 编辑器

JavaScript 程序员有许多好的工具可供选择——几乎太多了,无法跟踪。在本文中,我讨论了 10 个文本编辑器,它们对使用 JavaScript、HTML5 和 CSS 进行开发以及使用 Markdown 进行文档提供了良好的支持。为什么在 JavaScript 编程中使用编辑器而不是 IDE?一句话:速度。


编辑器和 IDE 之间的本质区别在于 IDE 可以调试并且有时可以分析您的代码,并且它们支持应用程序生命周期管理 (ALM) 系统。此处讨论的许多编辑器至少支持一个版本控制系统,通常是 Git,因此与过去相比,该标准不再是 IDE 和编辑器之间的区别。


Sublime Text 和 Visual Studio Code 是 JavaScript 编辑器中的佼佼者——Sublime Text 的速度与其方便的编辑功能一样多,而 Visual Studio Code 的功能甚至更好,速度几乎一样好。括号获得第三名。虽然 TextMate 几年前在我的列表中排名靠前,但它的功能并没有真正跟上新发展的步伐。


最有可能的是,您会在 Sublime Text、Visual Studio Code 或 Brackets 中找到您选择的 JavaScript 编辑器。但是其他几个工具——Atom、BBEdit、Notepad++、Emacs 和 Vim——都有值得推荐的地方。根据手头的任务,您可能会发现其中任何一个都很方便。


Sublime Text

如果您想要一个灵活、强大、可扩展的编程文本编辑器,而且速度快如闪电,并且您不介意切换到其他窗口进行代码检查、调试和部署,那么 Sublime Text 就是您的最佳选择。


除了速度,Sublime Text 的显着优势还包括对 70 多种文件类型的支持,其中包括 JavaScript、HTML 和 CSS;近乎即时的导航和即时的项目切换;多项选择(一次进行大量更改),包括列选择(选择文件的矩形区域);多个窗口(使用所有显示器)和拆分窗口(利用您的屏幕空间);使用简单的 JSON 文件完成定制;基于 Python 的插件 API;和一个统一的、可搜索的命令面板。


对于来自其他编辑器的程序员,Sublime Text 支持 TextMate 包(不包括命令)和 Vi/Vim 仿真。非官方的 Sublime Text 文档对 Emacs 用户(例如moi)进行了贬低(和不正确)的评论,但我会忽略它们。为什么非官方的 Sublime Text 文档甚至存在?好吧,一方面,官方文档还不够完整——少得多。

评论:10 个最好的 JavaScript 编辑器


Sublime Text 是用于代码、标记和散文的高度可配置和可扩展的文本编辑器。它知道超过 50 种开箱即用的语法,包括 JavaScript,并且可以使用 Sublime 包和 TextMate 语法定义进行扩展。我可以通过几次击键来安装 Babel (React) 和 TypeScript (Angular) 的语法和支持。


当我之前说“几乎即时导航”时,我是认真的。例如,要从屏幕上的当前位置跳转到getResponseHeaderAjax 中的定义,我可以在 Mac 上键入Command-P或在 PC上键入Ctrl-Paj ,然后在 Ajax 中打开一个瞬态视图,然后@grh按Enter打开已选中的选项卡getResponseHeader。


Sublime Text 能够跟上我的打字速度。它感觉就像一些最好的老式 DOS 编辑器,如 Brief 和 Kedit。


选择 后,我可以通过在 Mac 上键入Shift-Command-F或在 PC 上键入 Shift -Ctrl-F,然后EntergetResponseHeader来查找该函数的所有用法。一个新选项卡将向我显示搜索结果,每个五行代码段中包含搜索词。双击带框的文本会在新选项卡中显示完整的文件上下文。



多项选择和列选择可以快速处理过去需要正则表达式的烦人编辑。您是否需要将单词列表转换为 JSON 结构,其中每个单词都用双引号括起来,并且每个带引号的单词之间用逗号分隔?无论列表中有多少单词,在 Sublime Text 中大约需要 8 次击键。


在我的 Windows 开发盒上,我使用两个宽显示器。在我的 MacBook 上,我使用 Retina 显示屏和 Thunderbolt 显示屏。除非我在一个显示器上进行编辑并在另一个显示器上进行调试,否则我通常希望同时查看许多不同的源文件和对源文件的不同视图。Sublime Text 支持多个窗口、拆分窗口、每个项目多个工作区、多个视图和包含视图的多个窗格。当我想使用我所有的屏幕空间并在我需要为调试和测试腾出空间时进行整合是相当简单的。


您可以自定义有关 Sublime Text 的所有内容:配色方案、文本字体、全局键绑定、制表位、特定于文件的键绑定和片段,甚至语法高亮规则。首选项被编码为 JSON 文件。特定于语言的定义是 XML 首选项文件。


Sublime Text 周围有一个活跃的社区,它创建和维护它的包和插件。我最初认为 Sublime Text 缺少的许多功能——包括 JSLint 和 JSHint 接口、JsFormat、JsMinify、PrettyJSON 和 Git 支持——都可以通过社区使用Package Installer[https://sublime.wbond.net/browse]获得。

Sublime Text 出色性能的原因之一是它被严格编码。另一个原因是 Sublime Text 不是 IDE,不需要 IDE 的簿记开销。


从开发人员的角度来看,这是一个棘手的权衡。如果您处于“红色、绿色、重构”的紧密的、测试驱动的开发循环中,那么设置为编辑、测试、重构和跟踪代码覆盖率的 IDE 将给您最大的帮助。另一方面,如果您正在进行代码审查或主要编辑,您将需要您能找到的最快、最高效的编辑器。那个编辑器很可能是 Sublime Text。


费用:无限免费试用;商业或个人许可证每位用户 70 美元。
平台:Windows、macOS 和 Linux。


Visual Studio Code 

Visual Studio Code 是来自 Microsoft 的免费轻量级编辑器和 IDE。它包含 Visual Studio 的组件,与开源 Atom Electron shell 混合,为使用 C# 的 ASP.Net Core 开发以及使用 TypeScript 和 JavaScript 的 Node.js 开发提供了出色的支持。打破微软只在 Windows 上支持 Visual Studio 的历史模式,Visual Studio Code 也可以在 macOS 和 Linux 上运行。下面的屏幕截图是在 macOS 上拍摄的。


由于包含了 TypeScript 编译器和 Salsa 引擎,Visual Studio Code 的 JavaScript 代码补全非常出色。Visual Studio Code 将您的 JavaScript 代码发送到后台的 TypeScript 编译器以推断类型并构建符号表。您可以在下面屏幕底部附近的框中看到结果,其中显示了该 hasOwnProperty 方法的信息。


相同的符号表使 IntelliSense 能够为您提供出色的弹出选项列表,用于在整个表达式输入过程中完成代码。您将获得自动括号闭合、自动单词完成选项、键入后的自动方法列表.以及方法中的自动参数列表。d.ts您可以通过添加对来自 的文件 的引用来增强 IntelliSense,DefinitelyTyped[https://github.com/borisyankov/DefinitelyTyped]当 Visual Studio Code 识别出常见问题(例如使用 __dirnameNode.js 内置变量)时,它将为您提供帮助。

评论:10 个最好的 JavaScript 编辑器

Visual Studio Code 是适用于 Node.js 和 ASP.Net 的免费、轻量级编辑器和 IDE,它将 Microsoft 技术(例如 TypeScript 编译器和 Roslyn .Net 编译器)与 Atom 使用的相同 Electron shell 相结合。Visual Studio Code 适用于 Windows、macOS 和 Linux。

Git 支持非常好,使用起来也很简单。Visual Studio Code 调试器为 Node.js 开发(和 ASP.Net 开发)提供了出色的调试体验。Visual Studio Code 为 HTML、CSS、Less、Sass 和 JSON 提供了非常好的工具,这些工具基于支持 Internet Explorer F12 开发人员工具的相同技术。此外,它还可以与外部任务运行器(例如 gulp 和 jake.

Visual Studio Code 吸引了强大的插件生态系统,例如支持 Angular 和 React。它现在是我在关于使用 JavaScript 和 TypeScript 框架和库构建应用程序的教程中推荐的编辑器。

成本:免费,开源。 
平台:Windows、macOS 和 Linux。


Brackets

Brackets 是一个免费的开源编辑器,最初来自 Adobe,旨在为 JavaScript、HTML 和 CSS 以及相关的开放 Web 技术提供更好的工具。Brackets 本身是用 JavaScript、HTML 和 CSS 编写的,它的开发人员使用 Brackets 来构建 Brackets。除了内置功能外,Brackets 还有一个扩展管理器,并且扩展可用于前端开发人员使用的许多语言和工具。Brackets 不如 Sublime Text 或 TextMate 快,但它仍然非常快,除了从 Web 加载或更新程序内容的暂停。


Brackets 对 JavaScript、CSS、HTML 和 Node.js 有很好的支持。它还具有很好的功能,例如与 HTML ID 相关的 CSS 的内联编辑(快速编辑)。此外,Brackets 具有干净的 UI 和您正在编辑的网页的实时预览。对于免费的代码编辑器来说,这是一个非常不错的选择。

评论:10 个最好的 JavaScript 编辑器

Brackets 是来自 Adobe 的免费开源编程编辑器,用于 Web 应用程序编辑。它是用 HTML、CSS 和 JavaScript 编写的,运行在一个瘦的原生 shell 中,并支持 30 多种语言。括号扩展也是用 JavaScript 编写的,可以调用 Node.js 模块。与大多数其他在选项卡中显示打开文件的编辑器不同,Brackets 有一个工作文件列表,显示在文件树的上方。


Brackets 中的 JavaScript 自动补全非常好,圆括号、尖括号和方括号的自动关闭,以及关键字、变量和方法的自动下拉菜单,包括你键入后的 jQuery 方法$。括号可以控制 Node.js 调试器并从菜单项重新启动 Node。为其他功能添加扩展很容易,例如 TypeScript 和 JSX 支持、Bower 集成和 Git 集成。


快速编辑、快速文档、快速打开和实时预览都有助于简化 Web 应用程序编辑,让您专注于您正在编码或设计的内容。不利的一面是,一些 Brackets 扩展可能难以配置,但不如 Emacs 包或 Vim 插件那么棘手。


成本:免费,开源。
平台:Windows、macOS、Linux。 


Atom 

Atom 是来自 GitHub 的免费、开源、可破解的编程编辑器,适用于 Windows、macOS 和 Linux,它与 GitHub 应用程序集成,并提供数千个包和主题。我得到了一些社区包,加上核心包和主题。


毫不奇怪,鉴于其来源,Atom 源代码托管在 GitHub 上。它是用 CoffeeScript 编写的,并与 Node.js 集成。Atom 是 Chromium 的一种特殊变体,旨在成为文本编辑器而不是 Web 浏览器;每个 Atom 窗口本质上都是一个本地呈现的网页。Atom 团队在 Atom 中开发 Atom。

Atom 是来自 GitHub 的基于 Web 技术的开源、可破解的桌面编辑器。开箱即用,Atom 为我尝试的每种编程语言显示了正确的语法突出显示,F# 和 C# 除外。我通过从 Atom 中加载支持包来解决这些缺点。同样,我能够加载包以支持 React 和 TypeScript(如上所示)。


Atom 在不自我更新时的性能非常好。它开箱即用,具有模糊查找器、快速的项目范围搜索和替换、多个光标和选择、多个窗格、片段、代码折叠以及导入 TextMate 语法和主题的能力。Atom 可以安装两个命令行实用程序:Atom 用于从 shell 启动编辑器,APM 用于管理 Atom 的包,本着npmNode.js的精神。在浏览从 GitHub 克隆的存储库时,我发现自己经常使用 Atom,因为 GitHub 应用程序包含一个用于执行此操作的上下文菜单项。


成本:免费,开源。
平台:Windows、macOS、Linux。


Notepad++

Notepad++ 是一个免费的开源 Windows 源代码编辑器和记事本替代品,在编辑 JavaScript 方面做得不错。它还支持大约 50 种其他编程和标记语言。除了多文档编辑窗口外,它还具有工作区树视图、功能列表选项卡和文档映射选项卡。它的加载时间足够快,性能也足够强大,不会让人觉得它在拖慢你的速度。


凭借语法着色和折叠、强大的编辑功能(包括列模式编辑和对搜索和替换的正则表达式支持)以及一定数量的函数完成和参数提示,Notepad++ 可以轻松成为您的 JavaScript 主要代码编辑器。但是,就能够生成代码、执行重构等操作以及在大型项目中快速导航而言,它远不是功能最全的 JavaScript 编辑器。


我以前在 Windows 机器上开发 JavaScript 应用程序时广泛使用 Notepad++。当时,我更喜欢它而不是 Visual Studio 2008。Notepad++ 不妨碍我,这让我可以专注于我试图构建的代码。后来,它的极简主义方法对我来说没那么有用了,我采用了其他工具来减少生成代码所需的击键次数。


Notepad++ 在紧要关头仍然有用,而且它是免费下载的。如果你有一台 Windows 机器或虚拟机,你应该安装 Notepad++,在你需要的时候准备好。


成本:免费,开源。
平台:仅限 Windows。


BBEdit 

BBEdit 14(提供 49.99 美元的许可版本和免费的未许可版本)是一个仅适用于 Mac 的 HTML 和文本编辑器,支持大约 35 种编程和标记语言,社区支持(质量参差不齐)可通过 BBEdit 网站获得许多其他语言。两个版本都做语法高亮;许可版本还进行了一定量的自动补全,主要用于函数名、变量名、一些关键字和 ctags。许可版本还与 Git、Perforce 和 Subversion 版本控制系统集成。


BBEdit 11 是对产品的一次重大改写,使它比以前更快,并且仍然能够优雅地处理巨大的文件;BBEdit 12 是支持暗模式的 64 位版本。BBEdit 有一个提取功能,可以将选择或查找结果复制到一个新的缓冲区中,还有一个剪裁功能。它可以编辑和运行 Perl、Python、Ruby 和 Shell 脚本,以及检查 Perl 和 Python 脚本的语法。


BBEdit 对 HTML 和 Markdown 的支持很好——实际上比它的 JavaScript 支持更好。您可以为 BBEdit 安装三个命令行工具:一个用于编辑器,一个用于差异引擎,一个用于多文件搜索。


BBEdit 的免费未经许可版本当然值得在 Mac 上使用。如果您不喜欢我们推荐的 IDE 或编辑器,或者如果您想要 BBEdit 的 HTML 工具、剪辑系统或版本控制支持,则可能值得购买许可证。


费用:免费有限未授权版本;完整版每位用户 49.99 美元。
平台:仅限 macOS。


TextMate

TextMate 曾经在那些坐在大学咖啡馆的桌子上用 MacBook 编写 Ruby on Rails 的酷孩子中风靡一时。此后,TextMate 变得不那么突出,因为它被忽视了,而 Sublime Text 越来越受欢迎。在 2.0 版中,该产品看起来已经准备好卷土重来。它已经奄奄一息了几年,但现在再次处于积极发展中。


TextMate 不是 IDE,但通过使用它的包、片段、宏和范围系统,您通常可以获得即使是特定语言的 IDE 也缺乏的功能。TextMate 现在附带了用于纯 JavaScript 和 jQuery 的捆绑包,它们提供了许多用于快速生成 JavaScript 和 jQuery 代码的好工具。对于接近 IDE 的功能,您可以使用 TextMate 的 shell 集成,但不要期望代码重构或自动单元或回归测试。当然,如果您正确设置 Grunt,您可以在该级别自动执行 JavaScript 测试。


十年前那些用 TextMate 构建 Rails 应用程序的酷孩子(包括 DHH,如果我没记错的话)确实必须使用击键 ( ^\ ) 来触发他们的测试运行。在其他一些 Rails IDE 上,它们可以在保存时自动运行测试。如今,他们可能会自动触发git push使用 Jenkins 服务器的回归测试。

TextMate 2.0 是最新更新的 Mac 代码和标记编辑器。TextMate 不是 IDE,但它的片段、宏和范围系统通常可以提供即使是特定语言的 IDE 也缺乏的功能。如上所示,TextMate 包含 JavaScript 和 jQuery 的“捆绑包”。


请注意,只有最流行的捆绑包实际随产品一起提供。TextMate 有一个 bundle 首选项选项卡,您只需选中它们的框即可从中下载和安装其他 bundle。捆绑包的源代码,实际上也是产品的源代码,位于 GitHub 存储库中。当我为我碰巧知道的许多语言添加捆绑包时,我发现添加太多捆绑包会使操作菜单有点笨拙。但是,一旦您了解了最常使用的捆绑命令的键映射,菜单大小就无关紧要了。


Markdown 支持在其中一个包内捆绑包中提供。它包括一个文档预览功能、一个 Markdown 备忘单和许多用于生成 Markdown 标记的快捷方式。


Git 捆绑包可以很好地将 TextMate 与 Git 和 GitHub 集成。当我将现有的 Git 存储库作为项目目录打开时,TextMate 在没有任何提示的情况下识别了它们,并且它能够使用捆绑包中的拉取命令从 GitHub 更新它们。SQL 包允许您使用 MySQL 和 PostgreSQL 数据库。


就速度而言,TextMate 接近于 Sublime Text。它可能会慢一点,但我需要一个秒表来确定。我当然不能抱怨。


成本:单用户许可证 59 美元;提供网站、商业和学术许可证。
平台:macOS。


Emacs

Emacs 及其继承者和变体[http://www.jwz.org/doc/emacs-timeline.html]自 1970 年代初[https://www.emacswiki.org/emacs/EmacsHistory]在 MIT AI 实验室就已经存在,从 TECO 文本编辑器的宏开始,后来成为独立的。Emacs 的发布日期在当时是一些幽默[https://www.emacswiki.org/emacs/EmacsReleaseDates]的对象。GnuEmacs 是 Gnu 项目的开始;Richard Stallman(又名rms)与离开 AI 实验室前往 Lucid 和 Symbolics 的人之间相当激烈的分歧堪称传奇。[https://www.jwz.org/doc/lemacs.html]

我不会说“离开我的草坪!” 但在 1970 年代后期,在我的 VT-52 终端上,我从 TECO 切换到 Emacs 是很自然的转变,几十年来我继续在各种计算机和操作系统上使用 Emacs 的变体。我仍然“生活”在 Emacs 中的朋友经常在那里进行所有的软件开发。在过去,他们还在那里阅读电子邮件和新闻组。


默认情况下安装在 macOS 上的 Emacs 是 22.1.1,并且在没有 GUI 支持的情况下构建。您可以在任何系统上轻松安装 XEmacs、Aquamacs(macOS 的 GUI)和更新的 GNU Emacs 版本。如果你是老派,你可以用一种真正的方式构建一个真正的编辑器:从源代码。通过一些工作,您可以自定义您的 Emacs(提示:使用 Emacs 编辑您的 .emacs 文件,并在保存之前在缓冲区中测试您的 elisp 代码)使用几乎任何您想要的包,包括玩 Adventure 和 Tetris。您需要将 Melpa 添加为包存储库。


关于 Emacs 作为 JavaScript 编辑器的观点:编辑 JavaScript 的默认主要模式是在js包中,但您可以使用包获得更好的语法突出显示和 linting js2-mode,以及使用ac-js2. 您可以获得实时浏览器 JavaScript、HTML 和 CSS 交互skewer-mode。当然,还有适用于 Git、Subversion 和其他 ALM 的包。


如果您真的想变得怪异,请尝试为您提供 Vi 或 WordStar 仿真的 Emacs 包。如果这听起来太复杂,您甚至可能不想处理 Emacs 组合键。Ctrl-x Ctrl-c会让你离开。


一个完整的 Emacs 安装是一件很美的事情。要获得真正的复古乐趣(当您厌倦了 JavaScript),请安装 Common Lisp(例如 SBCL)和 SLIME 模式,然后像 MIT AI 实验室的人一样破解。


成本:免费,开源。
平台:Windows、macOS、Linux。


Vim (和 variants)

Vi(可视化界面)最初由 Bill Joy 于 1976 年开始为 Unix 编写,作为从Ed[https://www.gnu.org/software/ed/manual/ed_manual.html]到 Ex(Ed 的增强版)的演变。Vim 是一个免费、开源、改进的 Vi 版本;Mac OS X 上默认安装的版本是 7.3。在尝试之前了解 Vi 的最重要的事情是如何退出:<Esc>:q<Enter>


您可以轻松安装较新版本的 Vim、MacVim(macOS 的 GUI)或适用于您的平台的任何东西。通过更多工作,您可以安装插件管理器(我使用vim-plug),编辑.vimrc文件以指定插件,并安装插件(:PlugInstall如果使用vim-plug)。这听起来很像 Emacs 吗?等一下。如果你是老派,你可以从源代码构建 Vim;您可以在Vim 项目站点[http://www.vim.org/download.php]找到说明。


关于 Vim 作为 JavaScript 编辑器:vim-plug自述文件中的建议非常好,如果你在网上搜索“vim javascript syntax”,你会得到几个相互冲突的建议。Vi 用户和 Emacs 用户一样,如果不是固执己见,就什么都不是。另一方面,您会发现的大多数建议非常好,而且完全安装的 Vim 安装是一种乐趣,如果不是很漂亮的话。(但考虑一下来源,因为我使用 Emacs 将近十年,然后才不得不在没有安装 Emacs 的系统上启动 Vi,当我这样做时,我很难发现<Esc>:q<Enter>。)


成本:免费,开源。 
平台:Windows、macOS、Linux。


选择 JavaScript 编辑器

无论您专注于客户端 JavaScript 还是 Node.js,您都有很多选择。如果您正在为 JavaScript 和许多其他语言寻找功能强大、速度极快的编程文本编辑器,并且不介意花 70 美元,那么 Sublime Text 可能会让您满意。如果您想要一个免费、快速的 JavaScript 编辑器,它兼作 IDE 并在 ASP.Net 和 C# 方面表现出色,那么 Visual Studio Code 就是您的最佳选择。


Brackets 和 Atom 是您可能喜欢的两个相当新的免费编程文本编辑器。Brackets 非常接近能够用作 Node.js 开发的 IDE,并且 Atom 与 GitHub 桌面客户端紧密集成。


在 Windows 上,Notepad++ 快速、有用且免费。在 macOS 上,BBEdit 快速、实用、免费,并且以适中的价格提供版本控制集成、HTML 工具和其他附加功能。TextMate 仍然是一个了不起的编辑器——速度快、功能齐全且可扩展——但开发速度已经放缓。在这一点上,我建议 Mac 用户使用 BBEdit 而不是 TextMate。


如果你是老派并且不怕卷起袖子来定制你的编辑器,你可能会找到你喜欢的 Emacs 或 Vim——并且能够将它们变成 IDE 或类似的东西。