atom代码预览插件_7个Atom加载项，用于运行代码和预览更改

atom代码预览插件

In this article, I’ll introduce some packages for the code editor Atom, useful for previewing changes as you type (particularly for web development) and for compiling and executing code without needing to switch out of the editor to a console or IDE. I’ll also comment on why using them is a good idea.

在本文中，我将介绍一些用于代码编辑器Atom的软件包，这些软件包可用于在您键入时预览更改(特别是对于Web开发)，以及用于在无需切换到控制台或IDE的情况下编译和执行代码。 我还将评论为什么使用它们是一个好主意。

Note: Ctrl|Cmd signifies the PC “control” key, or the Mac “command” key, when showing shortcuts.

注意：当显示快捷方式时， Ctrl|Cmd表示PC“控制”键或Mac“命令”键。

可视化实时变化 (Visualizing Live Changes)

Changing from one program (the one in which you code) to another (the one in which you visualize things) not only has a cost in time, but it also comes at a cognitive expense. That is, it makes you less productive, since you lose focus and mental power as you switch from one task to another. (See “The High Cost of Multitasking: 40% of Productivity Lost by Task Switching” and “The True Cost Of Multi-Tasking”, to shed some light on this topic.)

从一个程序(您在其中进行编码的程序)更改为另一个程序(您在其中进行可视化的程序)不仅花费时间，而且付出了认知上的代价。 就是说，这会使您的工作效率降低，因为当您从一项任务切换到另一项任务时，您会失去精力和精力。 (请参阅“ 多任务处理的高成本：由于任务切换而损失的生产力的40％ ”和“ 多任务处理的实际成本 ”，以阐明该主题。)

Being able to have immediate feedback for your programming, on the other hand, and seeing changes reflected as you type (for the cases when this is possible) will enable you to save a lot of working time and focus, for you don’t need to be switching tasks and applications, and to a large extent the act of programming, visualizing and debugging becomes a single task.

另一方面，能够立即获得编程反馈，并在键入时看到反映的更改(在可能的情况下)，将节省大量的工作时间和精力，因为您不需要切换任务和应用程序，并且在很大程度上将编程，可视化和调试的行为变成一项任务。

I’ll show you some community packages that will enable/disable the visualization of changes with just a key stroke, so that we can keep everything — editing and viewing — within Atom.

我将向您展示一些社区软件包，这些软件包将使您只需轻按一下即可启用/禁用更改的可视化，以便我们将所有内容(编辑和查看)保留在Atom中。

Web开发 (WebDev)

Unlike Brackets, which is a code editor designed mainly for the web, Atom doesn’t come with built-in preview for HTML and CSS code. And this actually is a bit strange, considering that Atom is built on top of Electron, which is a framework that already uses Chromium (the open-source project behind the Google Chrome browser) as part of its engine.

与Brackets是主要为Web设计的代码编辑器不同，Atom不带有HTML和CSS代码的内置预览。 考虑到Atom是建立在Electron之上的，这实际上有点奇怪， Electron是一个框架，已经使用Chromium (Google Chrome浏览器背后的开源项目)作为其引擎的一部分。

All the same, thanks to Atom “hackability”, here are some packages that will bring this functionality to the editor.

归功于Atom的“可破解性”，这里有一些软件包可以将此功能带到编辑器中。

Atom HTML预览 (Atom HTML Preview)

Atom HTML Preview shows a live, as-you-type preview for HTML documents, with support for CSS and JavaScript. This is somewhat basic for today’s web development, but it’ll do the work just fine for many of us. It’s a simple, lightweight package that does exactly what’s expected.

Atom HTML预览显示HTML文档的即时键入预览，并支持CSS和JavaScript。 这对于今天的Web开发来说是基本的东西，但是对于我们许多人来说，它所做的工作就很好。 这是一个简单，轻便的程序包，完全可以完成预期的工作。

Source