Use ES6 in your Rails Asset Pipeline

README.md

Rails 5.1 introduces a new way of coding JavaScript. You would use yarn, webpack and a new folder, app/javascript.

Setup

If you want to stick with the "old" way (before 5.1) and use the asset pipeline, you need to do this:

# Gemfile

gem 'sprockets', '>= 3.0.0'
gem 'sprockets-es6'

Then run:

bundle install

You will be able to code using ES6 (fat arrows, const, let, template literals, etc.) in .es6 files, not .js!

// app/assets/javascripts/timer.es6

const timer = () => {
  console.log(`Timer started at ${new Date()}`);
}

Sublime Text

If you open an .es6 file in Sublime Text, you won't have any syntax highlighting. First you need to install the Babel plugin:

• Hit Cmd Shift P to open the command palette
• Type Install Package and hit Enter
• Type Babel and hit Enter

Then open an .es6 file and set this extension to be opened with the Babel (JavaScript) syntax:

Happy JavaScripting!

sublime_babel.png