28 June 2015
Atom text editor just released the 1.0 version. There are lots of reasons to switch from Sublime text. Maybe you love the idea of open-source or perhaps you’re a member of Github community. There’s no doubt that Atom looks and feels a bit different. However, install the following packages and you’ll get the productivity back.
1. Install Monokai syntax theme
There are many cool looking theme, but I’m just used to the Sublime’s default colour scheme. Install it and changed the syntax theme:
https://atom.io/themes/monokai
2. Tabs to space:
Install the tabs-to space package:
https://atom.io/packages/tabs-to-spaces
Then add this to the config.cson:
‘tabs-to-spaces’: ‘onSave’: ‘untabify’
3. Soft Tabs
Hard-tabs is 4 characters long by default which can result in hard-to-read code with large tabular indents. I recommend enabling the “Soft Tabs” option in the user settings, which would output spaces instead of tabs.
4. Draw white space
In Settings, check the box “Show Invisibles”. It will add the little dots on the indentation spaces.
5. Trim trailing white space on save
Strips trailing whitespace and add a trailing newline when an editor is saved
https://atom.io/packages/whitespace
6. Bracket highlighter
Bracket-matcher is one of the must-have package for highlighting all sorts of brackets () [] {} “” ‘’ <>:
https://github.com/atom/bracket-matcher
7. Emmet
Emmet is the essential toolkit for web-developers. It saves you a lot of time with shortcuts. Input below then hit tab:
div#container>ul>li.item
Output with all the HTML tags.
<div id=”container> <ul> <li class=”item> </li> <li class=”item> </li> <li class=”item> </li> </ul> </div>
Another example is to start typing lorem and output the whole lorem ipsum.
https://github.com/emmetio/emmet-atom
8. Git plus
The package lets you do git things without the terminal, straight from the Atom Editor. Let’s cut off a few seconds off our workflow and use this package: https://atom.io/packages/git-plus
9. Git Diff
Marks lines in the editor gutter that have been added, edited, or deleted since the last commit: https://github.com/atom/git-diff
10. Linter and Jshint
To lint your code: https://atom.io/packages/linter
With jshint: https://atom.io/packages/linter-jshint
11. Alignment
A simple key-binding for aligning multi-line, multi-cursor and multiple selections.
var a = b;
var ab = c;
var abcd = d;
var ddddd =d;
Then use the shortcut ‘ctrl+cmd+a’
var a = b;
var ab = c;
var abcd = d;
var ddddd = d;
https://atom.io/packages/atom-alignment
12. Add atom as git’s default editor:
If you’re freaking out with the vim editor when writing a git commit, change it default to atom
git config — global core.editor “atom — wait”
Packages offer developers tools to help with productivity and workflow. What packages did you install? Let me know what are your favourite.
Originally published at victorleungtw.com on June 28, 2015.