Switching from Sublime Text to Atom with minimum pain and maximum awesome.
Atom is a hot new open source text editor from Github that is completely free to use and modify. It is supported by a vibrant and growing community of developers who are (for the most part) unified by their disdain of Sublime Text’s onXSaves() pop-up window that looks something like this:
I have decided to move my text editing operations over to Atom in the hope of siding with the bazaar over the cathedral whenever possible. In this post, I will outline a few steps that should help make your switch from Sublime Text to Atom as minimally painful and maximally awesome as possible. Enjoy!
Step 1 - Download, Install, & Open Atom
Follow the link above and download Atom. Once you unzip the file, drag the Atom app to your applications folder. Then, open Atom either by clicking on the Atom app icon in your applications folder or by typing atom
Step 2 - Make Atom Look Cool
My first reaction to Atom was that it looks and behaves sort of like an annoyingly worse Sublime Text. To start fixing this hit cmd-, to open Atom’s settings window. On the top of the settings window’s left column click on themes. Here you will see that your visual experience with Atom is determined by the UI and Syntax theme you are running. Your screen should now look something like this…
As stated, the defaults are not so great, so let’s go ahead and download Seti’s UI and syntax themes which frankly put Sublime Text’s defaults to shame. To download and install these themes type Seti Ui into the “Search themes” search bar and then click the blue install button once Seti Ui populates. As soon as Seti Ui completes installation, you will have access to it as an option in your UI Theme dropdown menu. Select Seti UI from the UI Theme dropdown menu and watch as your files are immediately accompanied by with helpful icons that tell you what type of code is inside. Repeat this process for the Seti Syntax Theme by searching for Seti Syntax, installing, and then selecting from your Syntax Theme dropdown menu. At this point your editor (with some code written into it) should look something like this:
Step 3 - Fix the Lack of Pane Resizability & Autocomplete … also get rid of the semi-random vertical line in the middle of the screen.
One of my favorite features of Sublime Text, the ability to resize the panes you are working on, is not included by default in Atom. This was about to be a deal breaker, and there is even a fully fledged group gripe about the lack of this feature on the Atom community boards, but after some research I discovered a nifty package called Resize Panes which solves this problem. Download and install Resize Panes by clicking on the packages option on the top of the left column in the settings window, searching for Resize Panes, and clicking the blue install button. Once installed you should be able to resize your active pane using the cmd-option-- and cmd-option-+ keys.
Also not included in the default Atom installation is an autocomplete feature. Autocomplete is a must, so let’s include it in our Atom by going to settings, searching for, and then installing the Autocomplete Plus package. Now you will have autocomplete just like in Sublime Text but with one annoying difference — to select an item from the autocomplete dropdown menu you will by default need to use tab instead of enter. To save yourself, and anyone trying to use your editor, from a useless and infuriating learning curve, you can change the keybindings in your installation of Autocomplete Plus. To achieve this, open up settings and search for your Autocomplete Plus in the search bar on the bottom of the left hand column of the screen. Your screen should look like this:
Then, click the “Open in Atom” button on the right hand side of the Autocomplete Plus menu. This will open the Autocomplete Plus code in a new Atom window and allow you to make whatever edits you like. Once inside the Autocomplete Plus code, navigate to keymaps > autocomplete-plus.cson and change line two from 'tab': 'autocomplete-plus:confirm' to 'enter': 'autocomplete-plus:confirm' and hit save. Here is a before and after of the code you need to modify:
before
after
When you are finished, save and then restart Atom. You should now have a autocomplete feature that feels exactly like Sublime Text’s!
Our last task is to get rid of the default vertical line in the middle of the screen. To achieve this go to settings, open the pre-installed package called word wrapper, and disable it. Scroll down for a before and after.
before
after
Now you are done! Your Atom is pretty close to Sublime Text but with a really cool user interface and the potential for extension greatness.
Step 4 - Explore
There are million zillion ways you might want to use your text editor. You now have the Atom know-how to search for, install, and modify, a package or theme that will help you achieve your optimization goals.
Step 5 - Bonus Step
Remember how at the beginning of this post I said that the Atom community is “(for the most part) unified by their disdain of SublimeText’s onXSaves()” pop up window? Well, a dissenting citizen of Atom has created a package called unregistered that will allow you to enable this ¿feature? in your Atom. Check it out here!