Using Atom for Web Development with Swift

Why it’s a good idea to use it + favorite packages and tips

The Swift programming language is great for building apps and, when Apple made it Open Source, it became appealing for server-side development as well.

If you work on a Mac, you’re probably editing all of your Swift files using Xcode. On Linux, however, there’s no such commodity.

As you probably know, Xcode is an Apple-made IDE that provides a beautiful interface, autocompletion, inline documentation, jump-to-reference, and many other features that are simply not available elsewhere when it comes to Swift or apps development for Apple platforms.

However, Xcode has a few problems. First of all, Apple created it for developing apps for their operating systems and, although it supports several file formats, it’s not very useful for many of them. For example, there’s no autocompletion for HTML, CSS or JavaScript. Thus, when you’re editing such files, Xcode becomes a plain text editor with no added benefits. Xcode cannot be easily extended either. Moreover, its refactoring tools are inherently broken or entirely non-existent for Swift.

Despite all of that, and no matter how poorly it crashes sometimes, Xcode remains the only real choice for developers building Swift apps for Apple platforms. But what about web development?

Because of the proprietary nature of Objective-C and the environments, it’s used for, nobody but JetBrains tried to build a competitive IDE. For Swift, though, there might be an opportunity for developers to create new cross-platform tools, made to enhance the web development experience in the language. No one seems to be pursuing that route yet, however. I suppose that there’s just not enough interest right now.

AppCode, JetBrain’s IDE, isn’t yet up to the task either: although it’s been improving lately, the Swift tools aren’t as good as the Objective-C ones today. Perhaps we’ll see AppCode evolve more rapidly once Swift gets ABI stability. Anyway, there’s still a problem with AppCode: it’s only available for Mac, as it relies on some of Xcode’s tools under the hood. Hence, if you want to use it, you have to have Xcode installed as well.

So, what about working on Linux or just hating Xcode for web development? Is there nothing we can do?

Enter Atom

Atom is a powerful, free, cross-platform text editor that can easily replace Xcode for Web Development with Swift. It’s built and maintained by GitHub and the growing community that has been contributing hundreds of Open Source packages to expand its capabilities. In fact, Atom is itself Open Source and was built with Electron using web technologies such as HTML, CSS, and JavaScript, and was designed from the ground up to be easily extended.

Atom is so versatile and “hackable” that Facebook engineers created an IDE on top of it to be used as their primary editor across the company. Notably, some of the Facebook engineers ditched Xcode for Atom + Nuclide because Apple’s IDE is too slow and clumsy with their massive codebase.

In the video below, Chris Wanstrath, one of GitHub’s founders, gives an introduction to Electron and Atom in the first few minutes of his keynote at GitHub Universe 2016 (the intro to Atom starts at minute 9.40):

Using Atom for Web Development with Swift

I’ve been using Atom as my editor of choice for web development of Ruby on Rails and Swift web applications for a while now. Out of the box, the app is pretty decent already as it comes with a fair amount of built-in packages. However, it’s still just a text editor. What makes it shine are the community contributed packages.

For iOS apps development I continue to prefer Xcode, mainly for the code completion features it offers. When using plain Swift and its Package Manager instead, as you would when developing server-side applications using one of the popular Swift web frameworks, Atom can get code completion too!

What follows is a comprehensive list of all the community packages I use.

Text and Code Editing

linter — required by other language-specific linters.

sort-lines — does what you would expect: alphabetical lines sort.

atom-beautify — perfect code indentation for most source code files.

autocomplete-paths — autocompletes file paths you reference in the project (works when editing HTML, CSS and JavaScript files.)

api-docs — doesn’t have Swift nor any Swift web frameworks right know for legal reasons. You may want to use Dash to fill the gap or as a replacement but that only works on macOS.

dash — requires the Dash app, but it only works on macOS.

highlight-selected — highlights repetitions of the selected word within the open files.

Swift

linter-swiftlint — Swift linter.

language-swift — Swift syntax highlighting.

swift-debugger — works great with Swift web frameworks but not so much with iOS / macOS apps as it depends on products built with the Swift Package Manager.

autocomplete-swift — adds code completion for Swift code, but similarly to swift-debugger it only works if you’re only using plain Swift and the Package Manager.

Vapor

language-leaf — support for the Leaf templating language used by Vapor.

Front-End Development

linter-htmlhint — HTML linter.

linter-csslint — CSS linter.

linter-eslint — ES6 linter.

emmet — a fantastic plugin that adds HTML and CSS shortcuts. See a preview below.

Writing HTML with Emmet

Productivity

todo-show

terminal-plus — broken on the latest version of Atom. Otherwise, it’s a fantastic plugin that adds a terminal to Atom.

exposé — reproduces macOS’s Exposé feature.

Atom’s exposé package

Atom UI and Utilities

sync-settings — syncs your Atom’s packages, settings, snippets and custom configurations to a Gist on GitHub.

pigments — adds color previews to colors declared in code.

color-picker — lets you pick colors from within the Atom’s text editor.

atom-import-sf-mono— allows using Apple’s San Francisco Monospace Font in Atom, and it’s glorious!

file-icons — see image below.

Atom’s file-icons package preview

Git

git-plus — allows running git commands from within Atom.

git-time-machine — exactly what I need from Git: see a file’s history and compare each version with the current copy.

Atom’s git-time-machine package

Fun

autocomplete-emojis — adds Slack’s / GitHub’s :[emoji-name] autocompletion.

autocompletion. activate-power-mode — adds the cool effect shown below to when editing; can be toggled on-demand or automatically after typing a customizable number of characters within a time range in the active buffer.

Atom’s activate-power-mode package

Noteworthy (although I don’t use them)

nuclide — Facebook’s IDE for web and mobile development built on top of Atom.

nuclide-swift-ide — a Swift IDE built on top of Nuclide. It’s worth a try, but it’s not ready for prime-time yet.

vim-mode — for VIM lovers.

minimap — if you fancy a mini view of the entire file you’re editing, this is for you. It’s a port one of the most loved features of Sublime Text, another popular text editor.

minimap-highlight-selected — text highlighting that goes hand in hand with minimap.

rest-client — A REST Client for Atom. Simple but effective. I prefer Postman, though.

Pro Tips

Befriend Atom’s Command Palette

The Atom’s command palette contains all the available actions Atom can perform. When you install a plugin, the commands that package support are added to the palette. You can activate the palette from wherever you are in Atom with the shortcut cmd-shift-P .

Settings

The first thing I do on a fresh install of Atom is changing three things:

The Settings -> Editor pane has several options I customize to my personal preference (e.g. soft wrapping, horizontal guide, ignored files, etc.) Toggle the built-in tree-view package’s options to hide SVC and editor ignored files so that they don’t clutter the interface (e.g. this would remove .DS_Store files and the .git/ folder). Inspect the settings of all packages and change them to my preferences.

Spell Checking

Atom comes with a spell-check package but it’s not enabled by default, nor it’s active for all file formats. You can change this in the package’s settings. Note that you can find out what are the ‘scopes’ for the file formats you’re interested into spell-checking by opening one a file with the format you’re looking to spell check and using the Editor: Log Cursor Scope from Atom’s command palette.

Keep Everything in Sync

The sync-settings package lets you sync your packages, key bindings, preferences, settings, and customizations to a GitHub Gist. I highly recommend doing it from the first setup. Over time it’s only natural that you’ll end up customizing Atom, change preferences for the packages you install or add your own snippets. Even just remembering what the packages you use were is reason enough to sync everything up.

The Atom Package Manager

Atom comes with a package manager you can access from the command line that does what you would expect: manage and install Atom packages.

apm --help

apm install [package_name]

Command line tool

You can also open and create files and folders from the command line using the atom command:

atom foo.txt

or

atom path/to/my/file/or/folder

What about Sublime Text?

As with many things, among developers there seem to be a religious divide between people who prefer Sublime Text and those who choose Atom instead. Surely Sublime has been around for longer and has had more time to mature. On the other hand, it costs money, the UI isn’t great (to my taste), and you could argue that updates don’t come in as often as Atom’s.

My personal preference lies with Atom because it’s Open Source, free and super easy to customize using HTML, CSS, and JavaScript. I also love its docs: the Atom Flight Manual provides an excellent starting point for new users. Finally, I prefer Atom’s UI over Sublime’s quite a bit.

Of course, this is just my opinion. You can even use VIM or Emacs if you fancy that!

Where to go from here

My preference for writing web apps in Swift right now lies with Atom, although I miss some of the features Xcode provides. For example, I miss the jump-to-definition feature. When I find myself in need of documentation or signature definitions, I open Dash. The experience, though, is not as good.

There’s still a lot of room for developers to improve Atom and its Swift compatibility by building custom packages. For example, the Nuclide + Swift project is fascinating and might be the ultimate tool to make Atom the perfect replacement for Xcode.

If you use Atom, what are the packages you like the most? I’m always on the look for neat additions to my arsenal! Also, will you be contributing to packages? If so, let me know!