Do you plan to add snippets that would use ES6 concise class methods? I've added them to my ES6/JSX branch in sublime-react fork.

TODO:

• New screenshots and readme w/o comparison.
• Bring back snippets and update to React 0.13.0
• Add note thanking @jgebhardt and @zpao

Hyphenated elements are are not syntax-highlighted correctly. The first part of the element comes out in one colour and everything after the first hyphen comes out in another colour.

I was unable to get a screenshot of the memory usage because the machine locked up so I have uninstalled the package.

jQuery version: 1.11.2(didn't check other versions)
Line #: 2356
Screenshot of the problem: http://i.imgur.com/H5eQJ70.png
It stumbles on this whole line(doesn't highlight any syntax for some reason) AND it doesn't highlight syntax in the subsequent lines unless you remove the ternary operator in the end(question mark and further till the closing curly bracket).

If you remove this whole line it also fixes the problem.

It works fine with regular Javascript Syntax. Any ideas as to what causes it?

Could be wrong about this, but my gut says 'await' belongs in keyword.control.flow alongside return and yield (the latter being a close relation) rather than in keyword.operator.

sublime-react syntax highlighting supported cjsx, i.e. coffeescript with jsx. Any plans for babel to do the same? I can't get the deprecated sublime-react syntax highlighting to work anymore.

The following code loses all syntax highlighting after { //first comment.

The issue looks to be because of i<p -- using spaces as in i < p fixes it.

function foo() {
    let i = 0, p = 2, a = true, b = false;
    let next = i<p ? a : b;
    if (!next) { //first comment
        console.log("test")
    } else { //second comment
        console.log("test B")
    }
}

Apologies if this is the wrong repo for this ticket.

See screenshots -- top is with the built-in JS syntax, and it looks fine

bottom here is with 6to5, and you see it thinks something is unclosed... Scripts eval fine, no hidden chars, etc.

goto definitions doesn't seem work for es6 methods, however they do work for standard es5 methods. Is there anything that I can look at to make it work?

Thanks!

I was playing with Babel 5.0.0 and I saw the static keyword does not get the color

It looks like these don’t currently have a scope I can target.

I'd like to have syntax highlighting of multiline HTML and XML strings, as that is something that is available with the default JavaScript view. Here's the default view for JavaScript files:

And here's the same content with babel highlighting:

Any thoughts on adding support for HTML/XML highlighting?

You supply nice highlighting on

get methodName(){

Would be nice if you also supported

static methodName(){

And if it's not too much trouble: async (supported in objects but not classes) and memo (experimental but very powerful) http://babeljs.io/docs/usage/transformers/#es7-experimental-

Generator *s, could be more clear too as they currently blend in with the function word

Currently the following rules apply in most cases:

• A lowercase identifier is variable.other.readwrite
• An all-uppercase identifier is variable.other.constant

It seems reasonable also to recognize that variables which begin with a capital are constructors. The only time constructors become targettable is when they are being invoked to create an instance:

new Foo(): meta.instance.constructor entity.name.type.new

How about entity.name.class or entity.name.constructor? Even in class declarations, the name does not get a targettable scope currently.

Hey,
while template strings in general are highlighted correctly, it seems like when they contain slashes everything following these is treated as a comment.

Thank you!

function tableToJson(table) {
    // from http://johndyer.name/html-table-to-json/
    var data = []; // first row needs to be headers
    var headers = [];
    for (var i=0; i < table.rows[0].cells.length; i++) {
        headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'')
    }
    // go through cells
    for (var i=1; i<table.rows.length; i++) {
        var tableRow = table.rows[i]
        var rowData = {}
        for (var j=0; j < tableRow.cells.length; j++) {
            rowData[ headers[j] ] = tableRow.cells[j].innerHTML;
        }
        data.push(rowData)
    }
    return data
}

or even as little code as

i<table
return data

If I add a space to the right side of the <, all is well.

Because it's a <, I'm thinking it has something to do with the JSX highlighting, maybe?

Let me know if you need any more information.

I think it's useful to label which frame of the comparison gif uses which syntax theme:

support.class.builtin.js is missing WeakSet and Symbol (I think Symbol is not a class, technically, but I'm not sure where else it should go).

support.type.object.node is missing require (could be grouped with support functions I suppose, but it does also have properties)

support.module.node.js is missing querystring

support.class.builtin.js is missing all of the typed arrays plus ArrayBuffer and DataView -- Babel doesn't (can't, at least meaningifully, I imagine) implement typed arrays though, so this may be intentional. On the other hand, Proxy is there and not in Babel either. I think this regex should cover the typed arrays plus Array collectively:

(Float(32|64)|(Ui|I)nt(8|16|32)|Uint8Clamped)?Array

Also absent: JSON, Reflect, and Intl.

And: setTimeout, clearTimeout, setInterval, clearInterval, setImmediate and clearImmediate (didn't even know that last one existed till just now!).

example:

constructor({name = 'abc', data = []}) {
// name and data are formatted
}

constructor({
name = 'abc',
data = []
}) {
// name and data NOT formatted
}

anyway, thanks for this plugin :)!

How I can add es6 method to function list?

When a fat arrow function has one parameter it may legally omit parentheses. In this case syntax highlighting is disabled for the fat arrow function:

Just noticed that es6 functions aren't showing up in the goto symbol in project command palette - they show up just fine in the goto symbol (in the current file) palette. Is there some symbol re-indexing that I need to do? Or is there something else that needs to happen?

This scope applies correctly for bare function invocations and method invocations:

foo();
bar.foo();

But it's missing when the function is or appears to be a constructor, with or without new:

Foobar();

Whose parens instead receive meta.group.braces.round.js meta.brace.round.js

Might be related to SublimeLinter/SublimeLinter-jshint#28

In the following:

Deck.get = function get(keyPath) {
//...
};

get in function get(keyPath) isn't scoped to entity.name.function.js (and thus not colorized).

It's only scoped to meta.function.static.js.

Given a regexp:

/hello/

The opening slash only has the scope string.regexp.js while the closing slash has the scope string.regexp.js punctuation.definition.string.end.js. It seems like both should be targettable.

A small difference I can't really wrap my head around.

My object keys seem to be in yellow, and every dot is highlighted red. In the screenshots below I'm editing a .jsx file set to use the JavaScript(Babel) syntax in sublime.

Currently I'm only using it for .jsx files (I haven't fully started using es6 syntax in my normal .js files) and am moving over from sublime-react. Ideally I'd like to retain the normal colour matching with jsx support. Am I able to revert back to the highlighting shown in the readme screenshots?

In yield* iterable (or yield * iterable or yield *iterable, all valid forms), the asterisk is being mistaken for the multiplication operator.

sublime-react:

bable-sublime:

I'm using the predawn theme. Any idea why this is happening?

Just started thinking about this, but I wanted to get a conversation going.

It should be possible to scope React's JSX blocks to HTML, most likely named text.html.jsx. If that worked, wouldn't we suddenly gain access to all of the HTML tools available to Sublime? At very least, this should enable Sublime's build-in Expand Selection to Tag. Formatters/Tidy would be welcome.

I haven't looked into what they're doing, but Allan Hortle's JSX package does allow Expand Selection to Tag to function correctly.

I did this in my custom Atom user stylesheet while test driving the editor, and found it to be a very good visual cue.

Not a fan of having snippets automatically included :(. Could we move em to a separate repo?

I have my own set of personal JS snippets, and since you can't disable package-specific snippets my only choice would be to fork 6to5-sublime and keep it up-to-date manually everywhere I have a sublime text installation.

@decorators are currently missing syntax highlighting support

Further info can be found here: https://github.com/wycats/javascript-decorators
This spec seems to be catching on and has already been integrated into Aurelia. Would love to see syntax highlighting in sublime.

Wasn't following this repo, but this is probably due to renaming GitHub org

Then Syntax -> Open all with current extension as... -> JavaScript JSX.

IMO, I think JavaScript JSX should be renamed to something else (maybe JavaScript 6to5?). JSX isn't the only thing that has highlighting support, but generally/ideally anything that 6to5 supports syntactically (e.g. ES7+).

Using the included Monokai Phoenix scheme. This lints (in jsxhint + SublimeLinter-jsxhint) and transpiles correctly.

I've been using different 'flavor' of React.createClass

'use strict';

import React from 'react';

export default React.createClass({
    render() {
        return ();
    }
})

I'd like to update the snippets with this minimalistic approach of exporting the component + adding the 'use strict'; statement. What do you think?

this is highlighted everywhere except for here: (from the readme)

0o01
0b01

The zero gets caught as numeric, and the remainder is interpreted as variable.readwrite. It would be nice if, in addition to matching numeric, base prefixes (0o, 0b, and 0x) were themselves given a scope.

I'm not sure what's going on here with the maxLogs identifier (yellow):

The scope on maxLogs is:

(...) constant.other.object.key.js string.unquoted.label.js

If I enclose it in parentheses, the scope changes to variable.other.readwrite, which is how it gets identified everywhere else it appears. To replicate this, the pattern seems to be:

In any ternary, if the expression between ? and : is not enclosed in parentheses, and the last value is an identifier, and the total expression is not just a single identifier, then that last value will get this odd scope.

I'd expect constructor (as well as other class functions) to be in green, with this in blue.

For example:

This appears to be caused by the space in the ternary.

Copy-paste this snippet to your editor:

'use strict';
var React = require('react');
function test() {
  var a = "bar";
  return (
    <div foo="bar" className={"foo" + (a ? 'foo' :'bar')} herp="derp">
      <div foo="bar" className={"foo" + (a ? 'foo':'bar')} herp="derp" />
    </div>
  );
}

Play with spaces before/after the :.

Currently, the following are all under storage.type:

• async
• var
• let
• constant
• static

Contrast with function, arrow function, class, accessor (get/set), and extends, which all have unique scopes (aside: is "extends" really a "storage type"? I'm no grammar buff, so I could be totally wrong, but isn't it almost more of an operator? scratch that, no ... I have no idea what it should be).

It would be helpful to be able to target more specific scopes for the items above. In particular, async and static seem categorically different from var, let and constant to me.

Dot inside Cursor.from can't be highlighted

How about an idea to create separate ST plugin with snippets from SNIPPETS.md, something like react-es6-snippets? These snippets are useful and it is not fun to copy them by hands. I can do it by myself, just look for approval, hope there is no any scary legal stuff.

Neither "es6" nor "jsx" returns a result in Package Control's search interface for 6to5. This isn't necessarily a bug, but maybe it's something to think about.