When I first started learning JavaScript by following along with “The Coding Train” on YouTube (formerly Daniel Shiffman) one of the first things I did was to download a text editor with a cool looking dark theme. Up to this point, the only things I used were CodeBlocks and Notepad++, which are both great tools, but with a light theme very much unfit for serious coding. At least so I thought. /s (maybe just partially back then 😅)
Even though I can’t really remember why I settled on Atom.io , Daniel was using Sublime if I recall correctly, I fell in love with it quickly. Out of the box, it is a capable yet simplistic tool, with everything a non-power-user coding beginner needs. As your skill level increases and nitpicks about the editor pile up, you can start looking into packages to install and make your editor your own. Over the years I customized Atom with multiple extensions to my liking. Maybe among them, there is also something for you.
Basic Features
These features are an absolute must. When creating this list I was a bit surprised that some of these are packages I had installed in the past and aren’t part of Atom by default. These are the absolute minimum you should have installed. :)
- open-recent : Select a file to open from a list of recently opened ones
- open-terminal-here : Open a terminal in the current project folder
- file-icons : Unique icons for each file type
- autoclose-html : Automatically close HTML tags with the correct tag name
- markdown-scroll-sync : Keep the scroll between the markdown preview and source file synced
Language Comprehension, Suggestions and Debugging
These packages turn Atom from a text/code editor with syntax highlighting and basic word suggestions into a full-blown IDE for certain languages. You get an actual debugger, language comprehension with contextual suggestions and live linting.
- atom-ide-ui
- atom-ide-debugger-node
- atom-ide-debugger-python
- ide-json
- ide-typescript
- autocomplete : Ctrl+Space to show suggestions
- autocomplete-python
- language-matlab
- atom-beautify : Code beautifier for a ton of languages
atom-ide-ui is a base package that provides functionality for other IDE packages. I recently found out that it is deprecated and should be replaced with atom-ide-base . It still works for me which is why I haven’t switched yet. But some newer packages already expect you to have the replacement.
Autocomplete-python used to work pretty well, as it is powered by Kite, but when trying it out again for this article it seems to be broken. I didn’t even notice as it is ages ago that I wrote anything in Python longer than ten lines.
Web dev hot reloading
When creating a web page or app it is super useful to have it reload automatically when something is changed in the source files. Especially when playing around with the stylesheet, seeing how a change affects the look and feel immediately is great. Also when trying to fix JS bugs with console.log debugging is way faster this way. :^)
- atom-html-preview : Live HTML preview inside the editor
- atom-live-server : Hot reloading local server
The only thing I have noticed is, that atom-live-server seems to crash whenever I put my laptop to standby or close it. But that might be just me, as the standby behavior of my laptop is a bit weird in general.
Minimap
The minimap and highlight selection features could also be part of the “why is that not in Atom by default” section, because now I’m so used to them being there. Scrolling with the minimap is super quick and useful when searching for some kind of eye-catching structure in your code like a big switch-statement, or lookup table with static data.
- highlight-selected : Highlight all other occurrences of the currently selected word
- minimap : Show a tiny version of the file on the side
- minimap-highlight-selected : Also highlight in the minimap
- pigments : Display CSS colors (eg. #52ffd4 ) with their color as their background
- minimap-pigments : Also display the colors in the minimap
Regrettably, pigments broke for me lately. For some reason, it lags out the whole editor when scrolling and typing, rendering it basically unusable. At first, I thought it was a fluke, but the behavior is consistent as of late.
When trying to figure out what’s happening I found out, that pigments spawns a child process doing the file processing I would assume. The call to create said process seems to bug out for some reason and as it seems I’m not the only one who profiled Atom with the same question .
Teletype
Teletype is a package that allows working with multiple people on the same project remotely. It functions somewhat like when multiple users are writing in a Google Docs document at the same time, but shockingly well. I used it a bit when working with one of my friends on a project in high school. It is super fun (and admittedly kinda chaotic) seeing two people hacking on the same file in multiple places simultaneously.
Atom quokka
Quokka is a scratchpad to play around with code and get live results. I usually just open the dev tools in a new browser tab and use the console REPL for prototyping. When I found this package recently, I really liked how easy and fast you can write and test an algorithm prototype. It was particularly helpful when I had to analyze some algorithms written in pseudo code for a university assignment. Sadly the full version costs money and it nags you whenever you start up the editor, which is why I mostly disable the package all together when not using it.
Line statistics
Who doesn’t love statistics? If you want to see how chonky the file is you’re currently working on, you can display the line count in the status bar with line-count-status . The other package gives you even more detailed statistics for all of your files. I don’t use it that frequently, but it can be fun at times.
Z80 assembly
Yeah, this one is a bit random. In high school, I had multiple assignments to program in Z80 assembly. Having some kind of highlighting was super nice. As the code had to be translated manually as part of the project and keyed into the machine in hex, converting ASCII string constants with the package below made life way easier.
- language-z80asm
- ascii-hex : Convert ASCII to hex and vice versa
I haven’t used both packages since, but I still thought they are neat and added them to the list.
Script runners
Running a script directly from the editor is sometimes very handy. When working on an Electron app for my diploma thesis, I always started it via npm-plus to eliminate an unnecessary window switch to the terminal.
- npm-plus
- script
- atom-runner : Run scripts inside atom
- gpp-compiler : Starts gcc or mingw on windows
Atom in 2021
During web dev classes in high school, I made it my mission to convert my classmates to Atom users with quite a lot of success. I was especially happy, when I heard, that on his first day as a software dev intern a friend of mine and former classmate installed Atom as one of the first things on his new work computer.
But to be honest I have to admit that the feeling around Atom has changed drastically. As an exciting new application made by GitHub creating the whole new platform of Electron Apps (back then known as Atom Shell), it was the goto opensource editor. But recently the project has started to show its age, with competition from VSCode many packages and the editor as a whole seems to be in maintenance mode. After the acquisition of GitHub by Microsoft it also makes sense why the internal focus might have shifted towards VSCode.
There might be a reason why there come up dozens of forum posts when googling “Is Atom dead” with people arguing whether VSCode killed of Atom. I also have thought about switching and have used VSCode when working on an Angular project once. However, I prefer Atom’s UI and it still is getting official updates.
