7 Atom Add-ons for Running Code and Previewing Changes

In this article, I'll introduce some Atom code editor packages for previewing changes as you type (particularly useful 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.

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

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.)

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.

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.

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

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.

Source

To install: apm install atom-html-preview

Browser Plus

Browser Plus is a package that will allow you to open a browser in an Atom tab, which even comes with the Developer Tools for handy debugging!

For the live changes preview, you'll need to click on the thunderbolt icon, but notice that you'll still need to save the file you're editing (Ctrl|Cmd+S) in order to visualize the changes. To enable a "hyper" live preview to show changes as you type, alongside with support to preview changes in JSP/PHP/Express/Django, among other languages and frameworks, you'll need to install the companion package Preview Plus (PP).

Source

To install: apm install browser-plus
To install "hyper" preview and other frameworks support: apm install pp

Bootstrap 3 Support for Atom

Bootstrap 3 Support for Atom, now that we're getting more specific, brings support for Twitter's framework for web development, Bootstrap. It works smoothly with the aforementioned Atom HTML Preview, and it has the following features:

• Supports autocompletion of all helper classes in JavaScript, CSS and HTML.
• Snippet support for all components.
• Autocompletion for Glyphicons, Fontawesome and Octicons

Source

To install: apm install atom-bootstrap3

Continue reading %7 Atom Add-ons for Running Code and Previewing Changes%

by Lucero del Alba via SitePoint