eslint: “Parsing error: Unexpected token of”

Question

When using the following code in my web app I get the following return from ESLint. I would prefer using this loop method as opposed to the increment I method. What does this error mean? And does it mean there is something wrong with the use of the loop?

Error Message:

Parsing error: Unexpected token of

Actual effected code:

renderCanvas: function() {
  console.log("Rendering Model");
  var canvases = document.getElementsByClassName("DesignerCanvas");
  for (var canvas of canvases) {
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    // String for Hanging
    ctx.closePath();

    ctx.beginPath();
    // Top Trimming
    ctx.closePath();

    ctx.beginPath();
    // Outter Shade Body
    ctx.closePath();

    ctx.beginPath();
    // Bottom Trimming
    ctx.closePath();

    ctx.beginPath();
    // Inner Shade Body
    ctx.closePath();
  }
}

Answer 1

for-of loops are an EcmaScript 6 feature, and these are not enabled by default in ESLint.

According to the documentation :

What about ECMAScript 6 support?
ESLint has full support for ECMAScript 6. By default, this support is off. You can enable ECMAScript 6 support through configuration .

If you then follow the configuration link, it tells you that you can enable the es6 environment with

/*eslint-env es6 */

in the JavaScript file, or

{
    "env": {
        "es6": true
    }
}

in the configuration file.