如何为Web开发选择最佳JavaScript编辑器

There are a number of options for developers who are looking for a good JavaScript editor that provides a more efficient and pleasant working environment.

对于寻求出色JavaScript编辑器以提供更有效，更愉快的工作环境的开发人员，有很多选择。

Leading JavaScript code editors share many of the same great major features you might expect, including autocompletion (code completion), git integration, and plugin support. But it's the little things that can make one editor a better fit than another for a given developer.

领先JavaScript代码编辑器具有许多您可能期望的相同的主要功能，包括自动完成(代码完成)，git集成和插件支持。 但是，对于给定的开发人员而言，这些微小的事情可以使一个编辑器比另一个编辑器更适合。

Once you get comfortable with a code editor and familiar with the workflow that makes you more efficient, it can be difficult to switch editors as you will have to re-learn shortcuts to optimize your development processes.

一旦您熟悉了代码编辑器并熟悉了使您效率更高的工作流程，就很难切换编辑器，因为您将不得不重新学习快捷方式以优化开发流程。

Even if you become more efficient in the long run, there is still a large barrier to entry when switching, so it's worthwhile investing a little time up front to pick the best editor for your needs.

即使从长远来看您会变得更有效率，但切换时仍然存在很大的进入障碍，因此值得花一点时间预先选择最适合您需要的编辑器。

Let's go through some of the most popular editor options now.

现在让我们浏览一些最受欢迎的编辑器选项。

Visual Studio程式码 (Visual Studio Code)

VSCode from Microsoft is free, open-source, and pretty lightweight upon installation. This is the de facto editor for beginner JavaScript developers, partly because it is pre-loaded with a good set of functionalities that don't require additional plugins. VSCode is also popular and can be ideal for more advanced users that need to get started quickly.

Microsoft的VSCode是免费的，开源的，并且安装后非常轻巧。 这是初学者JavaScript开发人员的事实上的编辑器，部分原因是它已预先加载了一套很好的功能，不需要其他插件。 VSCode也很流行，对于需要快速入门的更高级的用户而言，它是理想的选择。

A unique feature of VSCode is that it can be used through the browser. So the exact same environment you get on the desktop is possible on the go using your tablet. A code-server must be configured on a network you can access for this feature to work, but it is very convenient once it is set up.

VSCode的独特功能是可以通过浏览器使用。 因此，使用平板电脑可以随时随地在桌面上获得相同的环境。 必须在可以访问的网络上配置代码服务器 ，此功能才能正常工作，但是一旦设置，它就非常方便。

Tip: Working on a large project in another IDE where the build process can take some time, I will often open the huge JS output file in VSCode and tweak it to instantly test a change in the browser before applying it. VSCode handles these large files swimmingly.

提示 ：在另一个IDE中处理一个大型项目，该项目的构建过程可能会花费一些时间，我通常会在VSCode中打开巨大的JS输出文件，并对其进行调整以在应用之前立即测试浏览器中的更改。 VSCode可以轻松处理这些大文件。

Git is built into the IDE, but the integration is not as robust as some other editors. For example, users of WebStorm prefer the push/merge experience over that of VSCode.

Git内置在IDE中，但是集成不如其他一些编辑器强大。 例如，与VSCode相比，WebStorm的用户更喜欢推送/合并体验。

You can install many additional features you may need as extensions, of which there are thousands. But not all of them are actual features. Code snippets are mixed in with the features and add-ons, which can take time to review and find the best options to add. If you ever run into an issue, VSCode has a huge user community; someone has likely had the same issue and has solved it.

您可以安装许多可能需要作为扩展的附加功能，其中有数千个。 但并非所有这些都是实际功能。 代码片段与功能和附加组件混在一起，这可能需要一些时间来检查并找到最佳的附加选项。 如果您遇到问题，VSCode拥有庞大的用户社区。 有人可能也遇到了相同的问题并已解决。

If you are not ready for a full paid IDE with all the bells and whistles, and not familiar enough with all the plugins and features you may need, this is the logical starting point.

如果您还没有准备好使用所有花哨的功能付费的IDE，并且对可能需要的所有插件和功能还不熟悉，那么这就是逻辑起点。

原子 (Atom)

The free Atom editor was developed by GitHub. It is actually a specialized version of the chromium browser converted into a text and source code editor. Internally it utilizes Node.js for plugin support.

免费的Atom编辑器由GitHub开发。 实际上，它是Chrome浏览器的专用版本，转换为文本和源代码编辑器。 在内部，它利用Node.js来提供插件支持。

A plethora of plugins are available for any features you may desire, however it's not as strong out of the box. You must gather a number of plugins to build up the dev environment to where you can be as effective as possible.  If you're working with JavaScript, here are some essential Atom plugins to get you started:

大量插件可用于您可能需要的任何功能，但是功能并不强大。 您必须收集许多插件来构建开发环境，以使其尽可能发挥最大作用。 如果您使用的是JavaScript，以下是一些基本的Atom插件可帮助您入门：

• atom-typescript
  原子打字稿
• file-icons - to colorize and assign icons to different file types
  文件图标-将图标着色并分配给不同的文件类型
• atom-beautify
  原子美化
• linter
  短绒

Tip: Enable the autosave package which will save edits when focus is lost. It is disabled by default.

提示 ：启用自动保存程序包，该程序包将在焦点丢失时保存编辑。 默认情况下禁用。

Multiple users can work on the same file at the same time, each with multiple cursors on the screen, via the teletype plugin. You can use this for mentoring, pair coding, or collaborating. This feature sets Atom apart from other editors.

多个用户可以同时通过电传插件在同一文件上工作，每个文件在屏幕上都有多个光标。 您可以将其用于指导，配对编码或协作。 此功能使Atom与其他编辑器区分开。

The git integration is well implemented, as you would expect from GitHub software. Also useful is a git-plus plugin that lets you run git commands through keyboard shortcuts without using the git terminal.

git集成已经很好地实现，正如您从GitHub软件中所期望的那样。 git-plus插件也很有用，它使您可以通过键盘快捷键运行git命令，而无需使用git终端。

Atom is customizable to the point where you can edit a .less file to adjust the IDE colors which is nice if you like to tweak every detail of your environment. You can run a .coffe script on startup that can be used to quickly change the editor's behavior.

Atom是可定制的，您可以在其中编辑.less文件来调整IDE颜色，如果您要调整环境的每个细节，这是很好的选择。 您可以在启动时运行.coffe脚本，该脚本可用于快速更改编辑器的行为。

You can write plugins in JavaScript against a well documented editor API. The possibility of authoring your own functionality and behaviors is nice to have, should the need arise.

您可以根据文档齐全的编辑器API用JavaScript编写插件。 如有需要，可以编写自己的功能和行为。

The editing experience is smooth and you can enhance it with other plugins like minimap, but there is some initial time investment required to set it up with all the features you want. The benefit is that features you don't need won't take time loading which slows down the experience. However, you can experience some momentary sluggishness when loading large files or switching tabs.

编辑体验很流畅，您可以使用其他插件(如minimap)来增强它，但是需要一些初期投资来设置它所需的所有功能。 好处是不需要的功能不会花费时间，这会拖慢体验。 但是，加载大文件或切换选项卡时，您可能会遇到短暂的呆滞。

I initially liked the idea of editing CSS styles to customize the IDE environment, or at least having the possibility if I ever wanted to come up with my own themes. It sounds fun but in practice, coming up with themes that include many variables are not trivial projects. Fortunately there are many polished theme plugins available for download.

最初，我喜欢编辑CSS样式以自定义IDE环境的想法，或者至少有可能(如果我想提出自己的主题)。 听起来很有趣，但在实践中，提出包含许多变量的主题并不是一件容易的事。 幸运的是，有许多精美的主题插件可供下载。

Atom is a solid editor and it will be a perfect fit for many developers.

Atom是可靠的编辑器，非常适合许多开发人员。

崇高文字 (Sublime Text)

Sublime Text is a paid editor but a free trial is available. It is not preloaded with many plug-ins to start, but of course they are available to address any needs you may have. Some packages like SideBarEnhancements to rename, move, copy, and paste should probably be built in to the core bundle but you can download them to enable this functionality.

Sublime Text是付费编辑器，但可以免费试用。 它没有预装许多插件来启动，但是当然可以使用它们来满足您的任何需求。 诸如SideBarEnhancements之类的用于重命名，移动，复制和粘贴的软件包可能应该内置到核心捆绑软件中，但是您可以下载它们以启用此功能。

Similar to Atom, it can take a bit of time to get everything set up. But once up and running, the experience is very smooth. Save on lost focus is also available.

与Atom相似，完成所有设置可能需要一些时间。 但是一旦启动并运行，体验将非常流畅。 还可以节省失去的焦点。

Sublime Text is nice because it's lightweight which makes it very fast to load and work with large projects or files. The "goto anything" feature implementation stands out as it can be used with file names, symbols, and line numbers. Most IDEs provide similar features in one form or another, but being able to combine them and search with queries like "fileName@functionName" is quite nice.

Sublime Text很不错，因为它很轻巧，可以非常快速地加载和处理大型项目或文件。 “ goto any”功能实现非常出色，因为它可以与文件名，符号和行号一起使用。 大多数IDE都以一种或另一种形式提供相似的功能，但是能够将它们组合并通过“ fileName @ functionName”之类的查询进行搜索是非常好的。

Selecting a variable selects all occurrences of that variable and renaming it renames all occurrences automatically, so this common task becomes a very streamlined experience.

选择一个变量会选择该变量的所有出现，并对其重命名会自动重命名所有出现的内容，因此此常见任务变得非常简化。

In many ways, Sublime Text is very similar to Atom. But Sublime Text has the edge with better general performance and responsiveness, which is superb.

在许多方面，Sublime Text与Atom非常相似。 但是Sublime Text具有更好的综合性能和响应能力，这是极好的。

VIM (VIM)

Vim is also a free text editor and very configurable. Originally named vi and the first text editor developed for Unix, it was later extended into a more feature rich editor named Vim. It is available on most Linux distributions.

Vim还是一个免费的文本编辑器，并且非常可配置。 最初命名为vi，是第一个为Unix开发的文本编辑器，后来扩展为功能更丰富的编辑器，称为Vim。 在大多数Linux发行版中都可用。

Vim has robust search and syntax highlighting capabilities, and it is super light so it can perform well with even very large files.  But it does require some work to get it set up and ready to use.

Vim具有强大的搜索和语法突出显示功能，并且超轻，因此即使在非常大的文件中也可以很好地执行。 但是，它确实需要一些工作才能设置并可以使用。

A GUI is available, but it is not the default interface for Vim. Even enabling mouse support requires some action to get it working. The default is a keyboard mode that some may prefer accessing every control and feature through shortcuts.

GUI可用，但不是Vim的默认界面。 即使启用鼠标支持，也需要采取一些措施才能使其正常工作。 默认为键盘模式，某些人可能更喜欢通过快捷方式访问每个控件和功能。

That being said, Vim can be your perfect IDE if you spend some time learning the ins and outs of the software and set up all the behaviors and features you want in it. If you are crunched for time and can't make the initial investment to get things dialed in, Vim may not be the best choice for you.

话虽如此，如果您花一些时间学习该软件的来龙去脉并设置所需的所有行为和功能，Vim就是您的理想IDE。 如果您时间紧缺，又无法进行初期投资以使事情顺利进行，那么Vim可能不是您的最佳选择。

网络风暴 (WebStorm)

WebStorm was developed by JetBrains and stands out from the rest as a true JavaScript IDE, as it has all features integrated right out-of-the-box. The development environment for different platforms like React, Angular, Vue.js, etc. is seamless. You can debug node scripts, and run tests on a built-in server. You can also execute and debug npm scripts through a tree view interface. And it doesn’t require any plugins to do this.

WebStorm由JetBrains开发，并在其他方面脱颖而出，成为真正JavaScript IDE，因为它具有所有现成的集成功能。 React，Angular，Vue.js等不同平台的开发环境是无缝的。 您可以调试节点脚本，并在内置服务器上运行测试。 您还可以通过树形视图界面执行和调试npm脚本。 而且不需要任何插件即可完成此操作。

However, plugins are available for some rare features that are not built into the software directly. One plugin that was not included by default was a markdown split edit/preview window. But for the most part everything you may need is already there. The nice thing about this is that you will discover features you didn't know existed and how nice it is to have them.

但是，插件提供了一些罕见功能，这些功能未直接内置在软件中。 默认情况下不包括的一个插件是markdown拆分编辑/预览窗口。 但是在大多数情况下，您可能需要的一切都已存在。 这样做的好处是，您将发现您不知道的功能，拥有这些功能有多好。

Files save automatically as you work on them by default.  When you use another app that doesn't do this, manual save feels very primitive in comparison. Though it's not unique to WebStorm, the implementation is a little nicer.

默认情况下，文件在您处理时会自动保存。 当您使用其他不执行此操作的应用程序时，相比之下，手动保存感觉非常原始。 尽管它不是WebStorm所独有的，但实现起来要好一些。

Some people may not always trust the integrity of the ctrl-z undo state stack, but in WebStorm there is built in VSC system that basically does a commit every time a file is saved. This is internal and is separate from your git commits. Files save at least whenever the file content window loses focus. So if you go a while without committing to git and have to go back or see a previous state after your last commit, it's no problem.

某些人可能并不总是信任ctrl-z撤消状态堆栈的完整性，但在WebStorm中，内置了VSC系统，该系统基本上在每次保存文件时都进行提交。 这是内部的，与git commit分开。 文件至少会在文件内容窗口失去焦点时保存。 因此，如果您花了一段时间而不提交git，而不得不在上一次提交之后返回或查看以前的状态，那没有问题。

Tip: Ctrl-shift-up/down arrow lets you move lines or blocks of code up or down while the editor handles commas/block brackets automatically.

提示 ：Ctrl-上移/下移箭头可让您在编辑器自动处理逗号/块括号时上下移动代码行或代码块。

When you work on projects that have many files, scrolling the file tree in search of a specific file can slow you down. But if one of those items is already open and in focus, clicking the target icon scrolls the project tree view to this file. It's very convenient.

当您处理具有许多文件的项目时，滚动文件树以搜索特定文件可能会使您减速。 但是，如果这些项目之一已经打开并处于焦点位置，则单击目标图标将项目树视图滚动到该文件。 非常方便

A couple cons are that it is not free. And at times, it can be a memory hog with very large projects. It has gotten better over the years and file contents are indexed internally so that searching large projects is very fast. A recent update also includes a significant improvement in startup speed.

有几个缺点是它不是免费的。 有时，它可能是一个非常庞大的项目所需要的记忆。 多年来，它已经变得越来越好，并且文件内容在内部进行了索引，因此搜索大型项目的速度非常快。 最近的更新还包括大大提高了启动速度。

通用编辑生产力提示 (General Editor Productivity Tips)

The duplicate line/selection shortcut (in WebStorm: ctrl-d, in Atom: ctrl-shift-d, but they all can do it) is one of my favorites and can save a lot of time in many coding scenarios.

重复的行/选择快捷方式(在WebStorm：ctrl-d中，在Atom：ctrl-shift-d中，但它们都可以做到)是我的最爱，并且可以在许多编码方案中节省大量时间。

This will come up from time to time where you have a list of items and have to modify the first (or some) character on each line from say '.' to ',' but find-replace is not practical to use. WebStorm allows alt-click to place multiple cursors to make the same edits in multiple places. Still, I find the following approach faster in some scenarios:

这会不时出现，在这里您有一个项目列表，并且必须从“'”开始修改每行的第一个(或一些)字符。 改为“，”，但使用find-replace并不实际。 WebStorm允许按住Alt键单击以放置多个光标，以便在多个位置进行相同的编辑。 不过，在某些情况下，我发现以下方法更快：

• Place your cursor after the first period, and start doing the change manually.
  将光标放在第一个句点之后，然后开始手动进行更改。
• Press backspace, comma, arrow down. Have a finger on each key, and repeat the presses starting slowly then speeding it up as you go. Once you get the pattern down you can speed it up to where you'll go through a list of 200 lines in no time.
  按退格键，逗号，向下箭头。 用手指按每个键，然后缓慢地重复按动，然后随手加速。 一旦确定了模式，就可以将其加快到立即浏览200行列表的位置。

It's almost like playing a melody on a piano (as fast as you can). You can do this with numbering lists as well. Write the first line without the number, duplicate the line 9 times, and do the same process except have one finger press a subsequent number each time. Start the next 10 lines with a '1' and do the same process adding a digit after each '1'.

这几乎就像在钢琴上弹奏旋律一样(尽可能快)。 您也可以使用编号列表来执行此操作。 在没有数字的情况下写第一行，重复该行9次，并执行相同的过程，只是每次都要用一根手指按下一个数字。 以“ 1”开始接下来的10行，并执行相同的过程，在每个“ 1”之后添加一个数字。

If you google “[editor name] cheatsheet” you can get a quick summary from users for important configuration or shortcuts for the editor you are trying. Print it and read all the shortcuts to become aware of new features and functionality you may not otherwise be exposed to.

如果您搜索“ [编辑者名称]备忘单”，则可以从用户那里获得有关要配置的重要配置或快捷方式的快速摘要。 打印并阅读所有快捷方式，以了解您可能不会接触到的新功能。

Considering how the highlighted actions may improve your current processes will be beneficial. If you see one that may help, put a mark next to it so the next time you are in the situation it's easy to recall. Even if you use it rarely and mainly in the beginning, having a quick reference at hand can lower friction to learning more about your editor and can save time context switching and searching in the future.

考虑突出显示的操作如何改善您当前的流程将是有益的。 如果发现有帮助，请在其旁边标记一个，以便下次遇到这种情况时很容易回忆起。 即使您很少且主要是在一开始就使用它，手头有个快速参考也可以减少学习更多关于您的编辑器的麻烦，并且可以节省将来进行上下文切换和搜索的时间。

I go as far as finding the PDF version, printing and laminating the page for future reference, but for some a bookmark or screenshot may work as well.

我会尽力找到PDF版本，打印并层压页面以供将来参考，但是对于某些书签或屏幕截图也可以使用。

结论 (Conclusion)

If you are a beginner hoping to learn JavaScript and use a polished development environment to start, VSCode is the obvious choice because it is easy to use with many strong features built in.

如果您是希望学习JavaScript并使用完善的开发环境开始的初学者，则VSCode是显而易见的选择，因为它易于使用，并且内置了许多强大的功能。

For more experienced developers who know exactly what they want, Sublime and Atom may be preferable as they will give you complete control over your dev environment. You can choose from thousands of features (packages) to install and keep the application startup and resource usage free of extras you don’t need or want. Spending some time with each will help you make the right choice.

对于更确切地知道他们想要什么的经验丰富的开发人员，Sublime和Atom可能更可取，因为它们将使您完全控制自己的开发环境。 您可以从成千上万的功能(程序包)中进行选择，以安装并保持应用程序的启动和资源使用，避免不必要或不需要的其他功能。 花费一些时间来帮助您做出正确的选择。

For the hard-core power users who feel at home using the keyboard alone working on projects, you can be more effective with Vim than any other editor. Saving the time it takes for your hand to move between the keyboard and mouse will add up, but it will take some time to master this process!

对于那些只使用键盘在项目上感到宾至如归的硬核高级用户，使用Vim比使用其他任何编辑器都可以更加有效。 总共可以节省您的手在键盘和鼠标之间移动的时间，但是掌握该过程将需要一些时间！

Lastly, if you don't mind maintaining a paid subscription and are not concerned with memory or CPU limitations of your development machine, WebStorm will get you up and running quickly regardless of the JavaScript development platforms, transpilers, or build processes you work with. It provides a very convenient environment to work in.

最后，如果您不介意维护付费订阅并且不关心开发计算机的内存或CPU限制，则WebStorm可以使您快速启动并运行，而无论您使用JavaScript开发平台，编译器或构建过程如何。 它提供了一个非常方便的工作环境。

I personally use WebStorm as my primary IDE, but still regularly use VSCode to edit individual or very large files when performance is a priority.

我个人将WebStorm用作主要的IDE，但是在性能优先时，仍会定期使用VSCode编辑单个或非常大的文件。

If you enjoyed this article please consider checking out JSCharting, a JavaScript charting library for developers.  You can also view additional blog posts here.

如果您喜欢本文，请考虑查看JSCharting ，这是一个针对开发人员JavaScript图表库。 您还可以在此处查看其他博客文章。

翻译自: https://www.freecodecamp.org/news/how-to-choose-a-javascript-code-editor/