• Apps
Andreas Hecht January 30th, 2015

Atom.io: (Free) HTML Editor for the 21st Century or Copy-Cat?

Atom is a relatively new cross-platform open source HTML editor. According to its developers, Atom is a “hackable text editor for the 21st century”. We will test if there is any truth in this statement. Atom and Sublime Text 2 have, at first sight, a great deal in common; however, Atom’s high customizability is explicitly promoted. This article shows whether the editor really is so special and if so, what makes it stand out from the rest. Is it probably even THE editor of the 21st century or just another copy-cat? atom

Installing Atom

This editor works across all platforms – Windows, Mac OS X, and also Linux. If you use Windows or Linux, go to the project page at GitHub and scroll down to “Installing” to download the installation file. After you have installed it successfully, the editor welcomes you by informing you about the most important resources and keystrokes. atom-nach-installation The first thing you should do after you have installed it is  adjust important settings like font and font size under “Atom => Preferences”. You may want to change the theme as well since dark themes are not everyone’s cup of tea. There are six themes to choose from, but you can find more in the community. Bear in mind that there are themes for the editor design and themes for the syntax. So, an editor theme doesn’t include the syntax. If you want to change syntax highlighting as well, you will need to install it separately. You should not forget to check preinstalled packages, aka plugins, to see which additional packages you may need to install. You will find a lot here. And you will find more with the editor’s search function than on the Atom website. As you see, it is not a big deal to adjust the editor to your needs. die-einstellungen-von-atom

Installing Packages and Themes

Installing packages is fairly easy by using the menu item “+ Install”. In contrast to Sublime Text 2, you don’t have to install a plugin before you can install new plugins. I find that more user friendly as it saves you valuable time. install-packages Themes can be installed the same way. To install a theme or package, you simply enter – if known – the name of the theme or package and press “enter”.  But you can also search for “themes” or general keywords to reach the goal. package-installation When I, however, tried to install (on Mac OS X) the package “Emmet” (formerly known as “Zen-Coding”), I got an error message saying that the Apple “Command Line Developer Tools” were missing, and Emmet could therefore not be installed. installations-fehler After installing Apple’s Command Line Developer Tools, the installation of packages and themes worked perfectly and was fast. erfolgreiche-package-installation

Recommended Packages to Start With

Customizing Atom via CSS

You can tweak the look of the Atom editor through the style sheet. I didn’t like the color output and tagging of the “Bracket Matcher”. It only used a 1-pixel-dotted line to highlight matching brackets and divs that were really hard to see for me. So, I added to the style sheet. You can access the style sheet via “Atom => Open your Stylesheet”. bracket-matcher-ausgabe-beeinflussen These few CSS lines lead to a significantly clearer marking of the Bracket Matcher. bracket-matcher-geaendert Experienced developers can adjust everything as the source code of Atom is also accessible via the GitHub page for the project. Less experienced users can use packages, themes, and maybe the CSS adjustment to customize the editor.

Special Features of the Atom HTML Editor

Node.js Support The Node.js support makes it easy to access the file system and spawn subprocesses. You can even start a server from within the editor. If you need a library, you can choose from more than 50,000 in the Node package repository. The seamless integration allows a free mix of node and browser APIs. You will get this and much more by integrating Node.js. node-js-integration Modular Design Atom is made up of more than 50 open-source packages that integrate around a minimal core code. The developers wanted to create a deeply extensible system that blurs the distinction between user and developer. If you don’t like parts of Atom or want to extend them, you (theoretically) create your own package. By uploading it to the package directory, it will be accessible to everyone. das-modulare-atom-design

Basic Functions of the Atom editor

Atom offers useful out-of-the-box features. As there are:
  • A file system browser
  • A fuzzy finder for quickly opening files
  • Fast project-wide search and replace
  • Multiple cursors and selections
  • Multiple windows (panes)
  • Snippet support
  • Code folding
  • A clean and clear setting surface
  • Import functions for TextMate (grammar and themes)
  • Support for project work
  • Good syntax highlighting
  • Clean, clear design
  • A developer mode
  • Shell commands
  • A command palette

Some Additional Screenshots

Atom’s Developer View atom-entwickler-ansicht Code Completion code-vervollstaendigung Project Settings (Sidebar Left – Right-Click on the File) die-projekt-moeglichkeiten-von-atom

Conclusion

I really like the Atom HTML editor because it doesn't only offer several useful features out of the box. In addition, you can easily install extensions and themes to adjust and extend the editor to your needs without any problems. You don't even need to know how to use Git. I haven't tested it with large projects yet. For “ordinary” projects, however, it is perfect. Compared to Sublime Text, Atom wins with its Open Source background. There is not a lot to be missed when you switch over from Sublime, but there is a lot more to be achieved. I don't know whether Atom got inspired by Sublime or the developers just came up with all these good ideas by the way of  rethinking the concept of an editor as a whole. Whichever approach they took, it worked out great.

Related Links

Recommended Packages (dpe)

Andreas Hecht

Andreas Hecht is a journalist and specialist for WordPress and WordPress Security. He roams the web since its inception. He has published an ebook on WordPress Security, which you might want to take a look at.

3 comments

  1. Thanks! I liked the read, but I think you should compare the two to Brackets as well some time in the future. Its open source, backed up by Adobe, lightweight, and in my personal opinion a more complete editor
    http://brackets.io

  2. Sounds interesting but would like to know does it support PHP? Till now I have been using Dreamweaver and I found it to be perfect for my needs but is tad expensive.

Leave a Reply

Your email address will not be published. Required fields are marked *