2017 Apr 05

Sublime Text + Rails = ? 

Recently I was having some issues with Sublime. My snippets weren’t expanding reliably and a few things just seemed “off”. Time had built up a level of crud, much like the family minivan accumulates crackers in every conceivable crevice.

At some point you need to clean the damn thing.

I recently re-installed Sublime and thought I would write about how I set it up and which packages help the most when writing Rails apps.

PACKAGE CONTROL

Goes without saying. Every Sublime Text install needs Package Control .

EFFORTLESSLY MOVE BETWEEN FILES AND CLASSES

When I’m developing a Rails app I prefer to have lots of small, tightly-focused, classes and it’s crucial to be able to jump between them. Luckily, Sublime supports this out of the box—but you need to enable it in your preferences!

{
  "index_files": true
}

Once the index is running, all you need to do is put your cursor on the class you want to go to and select: Goto Definition (I have mine mapped to command + period).

I18N Rails A lot of our clients need both french and english translations of their text. This makes hopping between .erb and .yml easy and quick.

Click To Partial The sublime index doesn’t know what to do with partials. This little helper makes jumping to a partial easy with one (command + shift) click.

Rails OpenView Jumping between a controller and its corresponding view with one command.

FILE AND WINDOW MANAGEMENT

AdvanceNewFile Create a new files quickly. Protip: Start your query with a colon : to start your path in the current working directory.

Open in Default Application Handy for right clicking an a file and opening it up in it’s default application.

CloseOtherWindows I have this mapped to the same defaults as OSX. command + alt + w which will close out all your tabs except for the current one.

TEXT EXPANSION

Emmet I don’t know what I would do without Emmet. The syntax is ridiculously easy to learn and lets you expand things like div#my-id + tab to:

<div id="my-id"></div>

Plus you can chain all sorts of Mortal-Combat-style combos on your HTML’s ass. Protip: If you’re using React JSX, Wes Bos has some excellent instructions on getting Emmet to play nice inside your JSX!

ChangeQuotes Simple package to switch between double and single quotes.

AllAutoComplete By default sublime will auto-complete what you’re typing by looking at the current file. This will widen the scope to autocomplete anything in the project. Install it and forget about it.

ApplySyntax Does a better job of applying the correct syntax for the various Rails / Ruby files you use.

DocBlockr More intelligent comment writing in many languages.

Ruby Hash Converter Quickly convert all those pesky pre-Ruby-1.9 hash rockets into colons!

SublimeERB Somewhere along the line I got used to muscle memory of ctrl + shift + period which will cycle through the different types of erb tags.

OTHER NICE TO HAVES

Babel Now with Rails 5.1 there’s no reason not be writing your Javascript in ES6.

GitGutter Nice little colourful dots on the sidebar that tells you what changed and what was added in your local git repo.

Pretty JSON Nice little package that helps you tame any unruly JSON you might come across.

LINTERS

SublimeLinter and SublimeLinter-rubocop Lint your code as you write it. We use Rubocop so that we all stay on the same page syntax-wise. These two packages will highlight any style violations based off your .rubocop.yml file.

KEYBOARD SHORTCUTS

Not too many things in here but I use these all the time!

[
  // Erb expansion
  { "keys": ["ctrl+shift+."], "command": "erb" },

  // Tabs and sidebar
  { "keys": ["super+option+w"], "command": "close_other_tabs" },
  { "keys": ["super+r"], "command": "reveal_in_side_bar"},
  { "keys": ["super+0"], "command": "toggle_side_bar" },

  // Advance new file
  { "keys": ["super+alt+n"], "command": "advanced_new_file_new"},

  // Change quotes
  { "keys": ["super+shift+c"], "command": "change_quotes"},

  // Navigation
  { "keys": ["super+."], "command": "goto_definition" },
  { "keys": ["super+shift+."], "command": "rails_open_view" }
]

SETTINGS

Finally there are a few crucial settings for Ruby development. A couple to highlight are: make sure you’re using spaces instead of tabs. Two spaces “tab” size is the Ruby standard.

That regex at the bottom helps to include ruby-specific word endings like the ? as one word.

{
    "auto_complete": true,
    "auto_complete_commit_on_tab": true,
    "ensure_newline_at_eof_on_save": true,
    "find_selected_text": true,
    "highlight_line": true,
    "highlight_modified_tabs": true,
    "ignored_packages":
    [
        "Vintage"
    ],
    "index_files": true,
    "rulers":
    [
        80
    ],
    "scroll_past_end": false,
    "tab_size": 2,
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": true,
    "word_separators": "./\\()\"'-:,.;<>~@#$%^&*|+=[]{}`~"
}

LAUNCH SUBLIME FROM THE COMMAND LINE (INCLUDING GIT COMMITS)

Type subl . in the command line and open the current folder in Sublime. Here are some good instructions for setting it up.

After that works make sure to add this line to your .gitconfig file.

[core]
  editor = subl -n -w

This will open up Sublime when you write git commit so you can write a detailed commit message that will make your colleagues happy!

SYNC SETTINGS BETWEEN COMPUTERS

I have a work computer and a home computer and it’s important to have all my settings synced the moment I open up Sublime. Luckily this is very easy to setup with Dropbox! Package Control has a good tutorial for setting this up.

 

That’s it! ?