Support ES6 ": function"-less notation

[gaearon]

I'd like to bring yungsters/sublime#5 to your attention in case it doesn't get noticed. There are two stale pull requests in the repo so I'm not sure if it is maintained at all.

The problem arises when using React with harmony transforms: short method notation is unreadable because method names aren't highlighted:

I submitted a pull request to JSX tmLanguage which, albeit hackish, gets the job done and tries very hard to not introduce false positives.

Hope it is helpful to you as it was to me.

[valscion]

👍 this. I opened the tmLanguage file manually and changed the definitions to incorporate the changes in @gaearon's pull request and I can start using the "function"-less notation with ease! Thanks!

[gaearon]

It does have some problems though. (I'm not too irritated so I haven't fixed them myself:)

• When you open { and later add } on another line, it gets incorrectly indented
• Selecting lines and pressing Cmd+/ to comment them out no longer works

Please let us know if you find a fix for these!

[dan-dr]

+1 miiiiilion dollars 💰
btw @gaearon your PR isn't working for me for some reason :(

[gaearon]

Sorry, don't know why. It works for me..

[dan-dr]

are you using SublimeLinter-jsxhint ?
It seems to have it's own tmLanguage for JSX maybe it's interrupting.
any chance you can upload your ReactJS.sublime-package ?

[gaearon]

Here's my setup: http://cl.ly/3T223Z3s2r39/Archive.zip

Not sure which of these are relevant though! And you'll need to manually choose JavaScript (ES6 + JSX) for JSX and JS files separately.

[max-mykhailenko]

How to add Add function to the sublime functions list?
Used @gaearon setup.

[gaearon]

I think you don't need : there.

[max-mykhailenko]

@gaearon How I can pass functions to object without :?

a = {
  b : () => {},
  c : () => {}
}

[gaearon]

ES6 concise method notation is

a = {
  b() { },
  c() { }
}

[max-mykhailenko]

@gaearon, got it. But now I have some indent and no description

[gaearon]

As I said above, my PR is not entirely correct and is somewhat hackish:

When you open { and later add } on another line, it gets incorrectly indented

this is probably the same problem. I'd love if somebody fixed these! I'm not too keen on language grammar.

[STRML]

I've been able to make it more accurate with:

    <key>method-concise-es6</key>
    <dict>
      <key>begin</key>
      <string>([a-zA-Z_?.$][\w?.$]*)(?=\(.*\)\ *\{)</string>
      <key>beginCaptures</key>
      <dict>
        <key>0</key>
        <dict>
          <key>name</key>
          <string>meta.function.js</string>
        </dict>
        <key>1</key>
        <dict>
          <key>name</key>
          <string>entity.name.function.js</string>
        </dict>
        <key>2</key>
        <dict>
          <key>name</key>
          <string>storage.type.function.js</string>
        </dict>
      </dict>
      <key>comment</key>
      <string>attempt to match ES6 concise methods: myFunc(arg) { … }</string>
      <key>end</key>
      <string>\}</string>
      <key>endCaptures</key>
      <dict>
        <key>0</key>
        <dict>
          <key>name</key>
          <string>meta.brace.curly.js</string>
        </dict>
      </dict>
      <key>name</key>
      <string>meta.scope.function.js</string>
      <key>patterns</key>
      <array>
        <dict>
          <key>include</key>
          <string>#comment</string>
        </dict>
        <dict>
          <key>include</key>
          <string>#meta-function-parameters</string>
        </dict>
        <dict>
          <key>include</key>
          <string>#meta-function-body</string>
        </dict>
      </array>
    </dict>

The key differences are that it doesn't match the parameters list and opening curly; it rather uses the existing #meta-function-parameters and #meta-function-body. Since it matches far less, I use positive lookahead to ensure it doesn't over-match.

Give it a shot and let me what you think - working great for me so far.

[STRML]

IMO it's better to just rebase this project on top of JavaScriptNext and work from there so we get all the new stuff.

[gaearon]

Wow, great to hear there's been progress. I'll try it out.

[gaearon]

IMO it's better to just rebase this project on top of JavaScriptNext and work from there so we get all the new stuff.

Yeah that's what these folks did. It works perfectly:

https://github.com/6to5/6to5-sublime

[jgebhardt]

This package no longer provides syntax highlighting. Please install the "Babel" package for syntax highlighting instead.