CoffeeScript can't use spread operator with class fields

Question

I can't understand why this syntax of spread method is wrong for CoffeeScript in WebStorm

class Test
 fruit: {apple: "apple"}
 
 init: ->
     console.log 1, @fruit
     
 spread: ->
     console.log 2, {@fruit...}
     
 spreadWithVar: ->
     fruit = @fruit
     console.log 3, {fruit...}

test = new Test()

test.init()
test.spread()
test.spreadWithVar()

After compiling I get this JS code:

(function() {
  var Test, test;

  Test = (function() {
    class Test {
      init() {
        return console.log(1, this.fruit);
      }

      spread() {
        return console.log(2, {...this.fruit});
      }

      spreadWithVar() {
        var fruit;
        fruit = this.fruit;
        return console.log(3, {...fruit});
      }

    };

    Test.prototype.fruit = {
      apple: "apple"
    };

    return Test;

  }).call(this);

  test = new Test();

  test.init();

  test.spread();

  test.spreadWithVar();

}).call(this);
1 { apple: 'apple' }
2 { apple: 'apple' }
3 { apple: 'apple' }

To run code and see result in online compiler: jdoodle.com/ia/qQh

All three methods work fine when it compiled and give to me an expected JavaScript code. But as in online editor in WebStorm I get errors about of syntax @name...:

and

And I can not understand why? If it gives to me a correct JavaScript code, why does it think that this is wrong for CoffeeScript?

Answer 1

As you fixed your errors in gulp by updating gulp-coffee to the latest version, I think the webstorm problem is likely to have a similar solution.

Looking at the webstorm coffeescript documentation, they mention that it depends on a globally installed coffeescript package.

First check if your global coffeescript is outdated:

npm outdated -g --depth=0

Then you can go ahead and update it:

npm update -g coffeescript