keyboard labs mouse_free_development productivity rubymine

Productive Rails View Development in RubyMine

RubyMine includes several commands to simplify working with Rails views. In this post, we’ll look at OS X keyboard shortcuts for view navigation, creation, and previewing; ERB code generation and refactoring; and HTML code generation and navigation.

View Basics

Navigate from an action to its corresponding view with command + control + Up.

navigate-to-view.png

If an action doesn’t have a view, RubyMine will offer to create one.

create-view.png

Use command + control + Up again to navigate from a view back to its action.

navigate-to-action.png

Preview a view in a browser with option + F2.

preview-view.png

ERB

Generate ERB expressions with command + shift + .

Use command + option + T to surround a selection with markup or ERB.

erb-surround.png

Refactor a selection into a partial with control + T.

extract-partial.png

HTML

Generate opening and closing HTML tags by entering a tag name followed by Tab, e.g., i m g Tab.

Use powerful Emmet abbreviations to easily generate markup.

section>ul#items>li{Item $}*4:

emmet-abbreviation.png

Change/rename a tag with shift + F6.

View a CSS selector’s declaration inline with option + Space.

selector-quick-definition.png

Navigate to it with command + B.

Accurately search for its usage with usage search, e.g., option + F7 to “Find Usages”.

selector-usage-search.png

A Familiar Feeling

The Rails view equivalents of commonly used commands such as “Go to declaration”, “Rename”, and “Find Usages”, thankfully, have been designed to work with HTML tags and CSS selectors. Powerful code generation helps simplify tedious view ceremony. Add in a few more view-specific commands, and Rails view development feels just as productive as everything else in RubyMine.