Skip to content

Instantly share code, notes, and snippets.

@ssaunier
Last active December 17, 2019 12:45
Show Gist options
  • Save ssaunier/97bd3a4ff73e4a8a08de51825e8fa027 to your computer and use it in GitHub Desktop.
Save ssaunier/97bd3a4ff73e4a8a08de51825e8fa027 to your computer and use it in GitHub Desktop.
Use ES6 in your Rails Asset Pipeline

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment