Using ES6 in code editor

1

Sorry if this has already been covered but I just found out that if I add

/*jshint esversion: 6 */

To the top of my code then I’m able to use ES6 for my solutions.

9 Likes
2

Hi @carl-parrish,

Great! If you have a moment to expand on this step by step and add some screenshots of ES6 code passing before and after, I can make your post a wiki article.

1 Like
4

Although not as fast as babel transpiled ES6, you can try adding the in-browser babel transpiler to your HTML file. I’ve had good success doing this. It renders ES6 to ES5 on the fly.

add to your ‘head’ scripts section:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>

EDIT: I should also mention that I add to the HTML body <script type="text/babel"> and put the ES6 inside of it:

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
</head>
<body>
    <script type="text/babel">
        'Your JavaScript ES6 goes here'
    </script>
</body>

Working Example

3 Likes
5

Correct I’ve only tested on Chrome so far but I was previously under the impression that I couldn’t use ES6 syntax in the code editor (because of the lint tool) Whereas now I can use anything that will work in my browser.

6

Here is an example of using an arrow function. Like @P1xt pointed out adding the comment at the top just keeps the lint tool from complaining but allows me to write code more like I would in real life.

Screenshot 2016-11-19 at 8.29.07 AM.png2484×1264 193 KB

3 Likes
7

This is great; thank you @carl-parrish!

I’m a newby and just learning about ES6 and what “lint” means… very helpful :slight_smile:

8

I’ve Used some ES6 before in feeecodecamp algorthiem. I get errors that I shouldn’t use ES6, but it’s only judging my output not errros so it still works without /*jshint esversion: 6 */

I could be wrong however, as it could dpnd on browser or challenge.