explicitClick to confirm you are 18+

My Atom Editor

PewsplosionsMay 12, 2018, 5:43:24 PM
thumb_up10thumb_downmore_vert

Lately I have been getting questions about what I use for programming. I have used a bunch of different IDEs and text editors over the years, including those that most everyone in the field has heard of: Visual Studio, Eclipse, IntelliJ (and other Jetbrains flavors,) Sublime, and many more. They have all had their ups and downs but none ever really felt perfect to me. So now I use Atom, an open source, hackable editor backed by Github.

Atom is not perfect either, but is anything? The difference is that Atom is completely customizable, hackable, and extendable. If something doesn't already exist that you want, you can make it exist. If you can't make it exist yourself, you can find someone to do it for you. While this may not be a new concept and there are other similar editors like VSCode and Brackets, I feel like Atom's core is much better than the rest so everything you put on top will have a solid foundation.

Before I get to the fun, I am going to point out that there are three things I can think of that are negatives. First, and this is probably impossible to get around, it is built with html/css/js and this is what makes so much of it wonderful. However because of this, it struggles to load large files. So it will be painful editing code in files that are like, 10,000+ lines (which shouldn't exist anyway, clean up your project!) Secondly, there are some features you will miss and can't easily create. If you aren't willing to do it yourself or pay someone to do it, you will just have to live without it. And third, the editor will kind of act funny and need refreshed in long sessions or depending on what you are trying to do. This isn't a huge deal because it only takes seconds to reload and you can even hotkey it or make a toolbar button for it to do it quickly. On to the fun!

I am not going to make a long tutorial or step by step of how I set up my editor (if you need help with something though, don't hesitate to ask!) I am just going to show how it looks and what I have added to get it there.

This is what it looks like when I am finished with setting it up. If you download and try the editor, you will definitely see something different, though similar.

When you open the settings (may also be called preferences on some platforms) there are a list of things you can add or customize about your editor. The core, editor, etc... contain many common options, such as spaces or tabs, show whitespace characters, etc... Which are important for your programming style, but it is the packages, themes, and install parts that we'll be looking at mostly here.

I have actually chosen to stick with the One Dark themes that the editor comes with because I like it a lot and everything else looks weird to me. You can of course completely theme the editor itself and the syntax themes separately and however you want.

The install section is where you go to actually find packages and themes to install that have been submitted to the package repositories. You can also manually add your own packages if you want.

The packages I use change quite often and vary based on what I am working with or need at the time. I am a Java developer as my profession but I like to work on C++ and web languages (HTML/CSS/JS) mostly in my free time. If you use a different language, you'll probably be able to find similar packages for that language. Sometimes even better or more.

The list of packages I currently have installed are: api-docs, atom-java-snippets, atom-live-server, atom-typescript, auto-indent, autocomplete-x (almost every language has one of these,) autosave-onchange, best-js-snippets, color-picker, css-snippets, file-icons, flex-tool-bar, fold-comments, git-control, git-diff-details, git-log, glsl-preview, highlight-selected, html-to-javascript, hyperclick, lang/language-x (again, almost every language,) linter-x (not quite every language but nice to have when it is available,) markdown-preview-enhanced, open-in-browser, pigments, platformio-ide-terminal, switch-header-source,  symbol-gen, symbols-tree-nav, terminal-commands, todo-show, tree-view-autoresize, tree-view-filter, tree-view-git-status.

Some of them will also grab dependency packages as well. So don't be alarmed by that. And I know that seems like a lot but it isn't really that much. A lot of them are really simple functions that we all take for granted when using an IDE. Like the highlight-selected package. It just lets you double click a word and it will highlight all the instances of that word in the open document.

The two packages I'd like to go in a little more detail, but not much more, is flex-tool-bar and terminal-commands. I think these add some really strong, efficient means of completing things.

First, the flex toolbar. That is the icons down the left side of my editor. It is a toolbar that you can put on any side of the editor and add any buttons you want to add and give them actions. It is as simple as having a cson or json config file with some basic information. Each entry will look something like this...


The spacer just adds a little line to separate sections of the toolbar (which I also change colors for, but that is just an aesthetic thing I like.) The type will almost always be button, but you can also get a little more fancy with things. Not going to go into that though, check the documentation if you want. The icon and iconset is where you get the icon and which icon to use. For example "fa" is fontawesome and "search" is the search icon from fontawesome. There is no need to actually do anything to have these available, atom just knows. There are other iconsets as well you can find.

Tooltip is kind of obvious, this will be what it says when you hover the icon. The style (because everything is technically CSS) allows a lot, but I just use it to change the icon color.

The more interesting part here is the callback. I keep it simple by just using atom commands. Atom commands are a completely different topic to understand, so just know they exist. This specific command opens the built in project search, which is quite amazing and another great core feature of the editor. But it can be basically anything. Custom commands or core.

The other package I want to mention is terminal-commands (which also requires platformio-ide-terminal.) There will almost always be things that need run in the terminal on a regular basis. This package allows you to create atom commands out of text that will be inserted and run through the platformio-ide-terminal. Which then plays nice with the flex toolbar.

So as an example to tie the two together. I do gradle run quite a bit while developing java projects. So I created a simple command called "gradle:run" and have it do "gradle run" and assigned "gradle:run" as the callback to the green play button icon on my toolbar. Now I just click that button and it will open the terminal and run "gradle run" in the current directory.

The terminal-commands package is also easily configurable, with json. I haven't made a lot of commands yet but here is what mine looks like so far.


Pretty simple eh?

So in conclusion. I love Atom and that is mainly due to the customization options. I use it for almost everything at this point. Even taking notes with markdown files!

If you found this helpful at all or have any questions or suggestions feel free to leave a comment. I'll try to answer as best as I can and will definitely try new things if they sound interesting.