Simplify your front-end in Rails 5: auto-indenting with BeautifyRuby
My least favorite past of coding front-end is having to indent code. It’s about as fun as pulling teeth, because as soon as you start nesting divs in divs in divs, they become impossible to manage. It’s so easy to get lost debugging an error, trying to figure out whether a div comes before or after a loop.
In this article, I’ll go over adding BeautifyRuby to Sublime Text 3 with BeautifyRuby — a package to automatically indent your code.
Here is how to add BeautifyRuby to Sublime in under 2 minutes
📝 Install the Beautify Ruby Package
If you haven’t already, install package manager for Sublime Text 3 by following this link.
Once you have Package Control installed, add the BeautifyRuby package
1. Press Command-Shift-P (Mac OS X) or Ctrl-Shift-P (Windows) to open the Command Palette.2. Start typing 'Package Control' until you see the appropriate commands.3. Press ENTER and then start typing 'BeautifyRuby' when the package list comes up.4. Select the package to install it.
🎨 Install the htmlbeautifier gem
BeautifyRuby has a dependency on the htmlbeautifier gem. Find more info about it on the GitHub repo, but you just need to run this command in the terminal to add the gem to your system.
In order to use BeautifyRuby, you’ll need the htmlbeautifier gem. Find more info about it on the GitHub repo.
gem install htmlbeautifier🛠 Configure BeautifyRuby
You’re almost there! The last step is to make the BeautifyRuby package work for your environment.
BeautifyRuby will indent both .rb and .html.erb files, but there are a few things you need to do to make this work with your environment.
- The 1st is to tell the package what type of ruby you are using with your application.
- The 2nd is to tell BeautifyRuby that you want to run the package every time you save the file.
Navigate to Sublime Text → Preferences → BeautifyRuby → Settings Default and change the following settings
//only add one of these three lines
"ruby": "ruby", //if you use system ruby
"ruby": "~/.rvm/bin/rvm-auto-ruby", // if you use rvm
"ruby": "~/.rbenv/shims/ruby", // if you use rbenv"run_on_save": true, // change this from false//add both of these lines
"translate_tabs_to_spaces": true,
"tab_size": 2
🤗 Never indent again
Just like that, your divs, your loops, your if statements will indent in a perfect line with each save. Now you can spend less time indenting and more time writing meaningful code.
Voilà!
Thank you for reading! Give this article a clap if you enjoyed it and share some of your favorite Sublime Text tips below!
