How can I write and test ECMAScript 6 code now?

Question

I would like to start writing code using the up and coming ECMAScript 6 (ES6) so as to start getting to grips with the new syntax.

Is there some kind of web resource or browser plugin that I can use to play (write and test code) on what we currently have in regards to ES6?

I was lead to believe that using Google Chrome Canary might be able to help. So I downloaded Canary, I enabled a couple of features in Canary:

Enable Experimental JavaScript (Mac, Windows, Linux, Chrome OS, Android)

Enable web pages to use experimental JavaScript features.
#enable-javascript-harmony Enable

And after testing the let block scope in a for loop

for (let i = 0; i < 10; i++) {
   console.log(i);
}

I got a syntax error:

SyntaxError: Unexpected identifier

Answer 1

The following works in Chrome 37 (current Chrome) with the Experimental JavaScript flag enabled:

(function () {
   "use strict"; 
   for (let i = 0; i < 10; i++) {
      console.log(i);
   }
})()

Outside strict mode, you should see SyntaxError: Illegal let declaration outside extended mode or SyntaxError: Unexpected identifier if you're not in strict mode, or possibly SyntaxError: Unexpected strict mode reserved word if the Experimental JavaScript flag is not enabled.

You can also compile your code with with Babel or with Traceur and the --block-binding flag enabled .

See kangax's ES6 compatibility table for more.

Answer 2

Here is a list of some transpilers from ES6 to ES5:

https://github.com/sindresorhus/grunt-es6-transpiler

https://github.com/sindresorhus/broccoli-es6-transpiler

https://github.com/sindresorhus/gulp-es6-transpiler

https://github.com/termi/es6-transpiler

https://github.com/google/traceur-compiler

Answer 3

Babel has a tool to test transpile and execute code. Just use it to test and in webapps it will very probable that you will use it to transpile to production code!!

http://babeljs.io/repl