2

The This-Bind operator is a proposal for convenient this method-binding syntax for ES7:

// this-bind via '::'
$(".some-link").on("click", ::view.reset);

// oldschool .bind(this, ...)
$(".some-link").on("click", view.reset.bind(view))

// or even longer...
$(".some-link").on("click", function () {
    return view.reset.apply(view, Array.prototype.slice.call(arguments));
})

// and even ES6 while is more handy, but still leaves some redundancy
$(".some-link").on("click", (...args) => view.reset(...args));

The problem is, well, it still in proposal stage for future (7) version of ES, so it wasn't yet included in standart and thus not supported by ESLint, while can be still used via tanspiling (with Babel, f.e.).

The question is, is there any modules/plugins/options for ESLint to support function-bind operator (or whole set of ES7 experimental features) syntax?

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
ankhzet
  • 2,517
  • 1
  • 24
  • 31
  • FYI, the bind operator is not part of ES7. – Felix Kling Feb 26 '16 at 16:35
  • 1
    @FelixKling, and where I said it was? As I said, it is in [proposal](https://github.com/tc39/ecma262/blob/master/stage0.md) stage for ES. Also, it's not like ES7 was finalized or smth... So, will it be the part of ES7 or not - depends... – ankhzet Feb 26 '16 at 17:41
  • Here: *"The This-Bind operator is a proposal [...] for ES7"* . Anything that is not stage 4 is not going to be part of ES7. See https://twitter.com/bterlson/status/692424625813377026 – Felix Kling Feb 26 '16 at 17:55
  • And how on the Earth you confused _proposal_ and _part of_? – ankhzet Feb 26 '16 at 18:27
  • You seem to be upset. If I upset you I am sorry. All am I saying is that the operator is not going to be part of ES7. You are right that it is a proposal for future versions, but not for ES7. That's all that I am pointing out. I just want to avoid any confusion for future visitors. – Felix Kling Feb 26 '16 at 18:29
  • I see... Eh, but, wouldn't it be confusing for future visitors to read `this-bind ~= ecmascript-next`, when (hypothetically) `ecmascript-next` is like `ES9`, but `this-bind` was accepted in `ES8` or smth. like that? Wouldn't be more informative to include both `ES7` and `ES-next` tags, to specify relevance then? Also, I added 'ES7' tag in relation with this - "_or whole set of ES7 experimental features_" - part of question, not `this-bind` operator, but I digress... – ankhzet Feb 26 '16 at 19:10
  • @FelixKling, "_You seem to be upset._" - No. Its, probably, just my bad english confuses you =). – ankhzet Feb 26 '16 at 19:11

1 Answers1

6

Well, while I surfed net in preparation of this question, I found, that Babel has implementation of it's own custom parser for ESLint, which allows to lint any valid Babel code.

In order to use it you should:

  1. Instal babel-eslint parser first via npm:

    $ npm install eslint babel-eslint --save-dev

  2. Configure ESLint to use custom parser, by specifying it in .eslintrc file:

    f.e. .eslintrc.json:

    {
    "parser": "babel-eslint",
    ...
}

  3. If you using SublimeLinter, togle linter off/on in order to reload config.

ankhzet
  • 2,517
  • 1
  • 24
  • 31
  • This is a great answer. I can't believe it wasn't that way all along- I recommend this approach, it worked. – Dean Radcliffe Sep 19 '16 at 19:23
  • this doesn't work for me, still get error with bind operator (::) – Nico May 24 '17 at 16:23
  • @Nico, are you using babel simultaneously and have you added `transform-function-bind` plugin or `stage-0` preset to `.babelrc`? If yes, how exactly error message looks like? – ankhzet May 25 '17 at 11:04
  • here is my config , errors and component https://gist.github.com/anonymous/fdc8b34b272d554023d6d6ba2167d7c8 – Nico May 26 '17 at 14:41
  • Nico, what IDE are you using? Also, does Babel transpiles component successfully and only ESLint complaints about syntax? Also, you totally sure eslint picks proper `.eslintrc` and `.babelrc` configuration files from project directory tree (worth re-checking, just in case...)? – ankhzet May 30 '17 at 15:13
  • Also, I switched off for a while now from using Sublime+JavaScript to JetBrains IDE (either WebStorm and IDEA would do)+Typescript, thus not using Babel at all. This brings all power of ES7 plus some quite handy additional perks (like type-hinting, access modifiers, interfaces, generics etc.). – ankhzet May 30 '17 at 15:22
  • 1
    Also, keep in mind, that `redirect={::this.redirect}` binding you used in the code is considered a bad practice (it's literally the same as `redirect={ () => this.redirect() }`), as it actually creates _new function instance_ for _each_ such bind on _each_ render, thus greatly confusing React with everchanging properties values and causing it to waste time on redundant re-renders. More [here](https://medium.com/@rjun07a/binding-callbacks-in-react-components-9133c0b396c6). Consider using [autobind decorator](https://github.com/jayphelps/core-decorators.js#autobind) for such usecase. – ankhzet May 30 '17 at 15:35