bathos / ecmascript-sublime Goto Github PK

View Code? Open in Web Editor NEW

88.0 8.0 8.0 3.12 MB

ECMAScript/JavaScript syntax (ES2015-ES2018, JSX, template highlighting, etc) with absurdly specific scopes

Python 36.18% JavaScript 63.82%

ecmascript es2017 es2016 es2015 syntax-highlighting sublime-text

ecmascript-sublime's People

Contributors

Stargazers

Watchers

Forkers

aziz stevenxxiu dangh seancodes blake-regalia freemember007 joshfester gitter-badger

ecmascript-sublime's Issues

function expression not recognized when appearing as assignment value outside of declarations

var a = {}
a.onscroll = function() { 
  clearTimeout(seatmap.cartView.hideCartTimer); 
};

function does not have the proper scope

Missing ES7 features

sublimehq/Packages#876 also applies to this package.

Async methods inside of a class

class SomeClass {
    async instanceMethod() {
    }

    async static someStaticMethod() {
    }
}

Class static and instance properties (taken from Babel site)

class Bork {
    //Property initializer syntax
    instanceProperty = 'bork';
    boundFunction = () => {
        return this.instanceProperty;
    }

    //Static class properties
    static staticProperty = 'babelIsCool';
    static staticFunction = function() {
        return Bork.staticProperty;
    }
}

Empty statements in while statement etc not recognized

e.g. while (i++) ;

Variables that hold a function should have a entitiy.function scope

In all the other javascript syntaxes when you have a code like this:

var parseXML = function( data ) {}
vm.add = (taskDesc) => {} 
var a = 12

parseXML and add would both gem a scope like meta.function.js entity.name.function.js
You can see that even github does this. I really miss it.

Package Browser Install

Hi! Not really so much an issue maybe, but this package does not come up in the in-app package control install menu.

Not only does this look like exactly what I need, but it looks like you put a ton of time into it!

Is installation via the package manager not supported?

Thanks!

[JavaScript] some highlighting issues

See sublimehq/Packages#1600

Your syntax package fails for the same test cases as in the linked issue.
According to the fact that this repo is labeled as "Sublime-syntax definition for ES6+ with absurdly specific scopes", I hope you would be interested in fixing these issues.

If I can help somehow, let me know..

March 2016: ST3 Latest Builds Break Tons of Stuff

Just putting out there that I know about these problems. In the latest dev builds, there was a fundamental change made to how SublimeSyntax handles backreferences that breaks quite a few parts of this syntax definition. It might take me a while to track down all the places where I need to adapt things to the new rules.

Pressing the comment out shortcut should comment out JSX properly

In JSX comments should be in this format:

{/* comment here */}

Babel Sublime is doing something like this I tried to do the same but it's not working and I don't know why.

Auto-indent not working for methods

Hi, great work and very happy with this package!

I have a small problem, when I type

class A {
  a(){

and hit enter, sublime usually increases the indent, but in this package it is not. Any chance of fixing this? I haven't investigated it yet.

Arguments following spread

Thanks for the fantastic work on this. My terse method declarations and bind operations read sensible now. It's a huge boon!

I've spotted the following problems, not sure if it's an issue with themes or the parser - Carthage doesn't suffer (although I find almost everything except for operators and functions impossible to distinguish in Carthage anyway). All these screens were taken in Monokai, but the same problem is visible with Excelsior & Villa-Lobos.

Any arguments following a spread don't play well, see line 125:

JSX Improvements

Comment shortcut inside jsx should insert JSX style comments
https://github.com/babel/babel-sublime/blob/master/Comments%20(JSX).tmPreferences
babel package highlights the matching tag just like what sublime does on normal HTML/XML files
Mark invalid JSX as invalid. just like what you do with js, which is amazing and is much better than any other js package I've ever used.

array destructuring not working with `this`

The following reports an error but is valid:

[this.a, this.b] = [1, 2]

Support for ES Class Fields & Static Properties

https://github.com/jeffmo/es-class-fields-and-static-properties

a way of setting the default syntax for a template tag

right now you can do

const escapeHtml = require('escape-html-template-tag');
const myTitle = /* syntax: html */ escapeHtml`<title>hello world</title>`;
const myHtml = /* syntax: html */ escapeHtml`
<html>
  <head>${myTitle}</head>
</html>
`;

Which is extremely helpful. But it also requires me to write

/* syntax: html */ escapeHtml`

everywhere.
Would it be possible to somewhere in the file "bind" the syntax with the template tag so it will be applied automatically everywhere it is used? i.e.

 /* syntax(escapeHtml): html */
const escapeHtml = require('escape-html-template-tag');
const myTitle = escapeHtml`<title>hello world</title>`;
const myHtml = escapeHtml`
<html>
  <head>${myTitle}</head>
</html>
`;

Edit:

Or maybe something like:

 /* syntax escapeHtml: html, graphql: graphql */

Possibility for flow support

Can this package support flow? So far it's the only syntax package there is that covers es6 properly, so flow support would be great.

Add support for graphql nested syntax

As title says 🙂
I'd say graphql tagged templates are quite common in javascript code

async delete()

The following is valid but shows an error. Delete is a common method for maps, sets, so it might be a common use case:

class A {
  async delete(){

  }
}

More specific scopes for `module.export` and `exports` for node

I want to give these keywords a special color but I can't. the scope is a bit too generic.

Add a custom scope to React component in JSX

VSCode in their insiders version started doing this and I really liked it.
I would like to have it in this syntax as well.

Ternary statements edge case

Given the ternary statement a ? b : c, syntax highlighting breaks down when a and ? are on one line and there is a line break between ? and :.

This is sometimes useful when a and b are short expressions but c is large.

Thanks so much for this wonderful package. The detail of token distinction is exceptional - there's nothing quite like it.

JSX is broken

Anything with curlies that's not an attribute is causing a lot of invalid sections

I found a bug in "get" and "set" prefix for object

Hi, I found codes like this can't be highlighted correctly:
{ get () { .... }, set () { .... } }

ES proposal `export ... from ...` is marked as invalid

export ModalHeader from './header';
export ModalFooter from './footer';
export ModalContent from './content';

Special scope for the class that is being extended

class AddFeed extends Component

Component should have a special scope not just variable.other.readwrite.initCap.es.
something like: entity.name.class.extended.es

End of comment triggers auto-complete

If I type a new comment // then it triggers auto-complete at the end, since it's marked as meta.whitespace.es instead of comment. Is there a way to disable this?

"Apparent recursion within a with_prototype action: 25000 context sanity limit hit"

Unsure if this is a Sublime issue or an issue introduced in the last release, but presently the syntax def is unloadable for me.

Comma background in destructuring assignments

Something seems to be a bit off on the commas when I destructure multiple values

Switch to new `embed` feature once 3153 is stable

The embed feature allows nesting syntaxes by naming their scope rather than their syntax definition file. It also overcomes bugs introduced by sub-syntaxes eating up the escape tokens by allowing a specified regex to always supersede the sub-syntax's context rules.

https://forum.sublimetext.com/t/dev-build-3153/33014/8

Support Flow static type declaration

Again looking at on some React project I see a lot of invalid scopes because they've used flow type declarations. I believe it should be easy to add support for it, right?

Arrow function as value of class instance field

Seems like class methods using arrow functions are not supported?

Deleted

Nothing to see here 😄

Consider bring back source.js scope

I just notice today that my snippets stop working because the top level scope changed from source.js source.es to source.es only.

I think there's lot of packages only support source.js since it's come with the default syntax. Should we bring it back?

A few more issues

You said that you're not gonna fix my previous report because "it is not a real code". Which criterium do you use to distinguish between "real" and "imaginary" code?

However, I tried to find better issues which you probably want to fix (like one with if statement etc).

// Function name after comment
function/**/*a(){};

// Assignment target after comment
[a,]/**/=a;

// Function name on a new line
function
*a(){};

// Arrow function after comment
(...a)/**/=>a

What is real code if this is not? People sometimes put comment to describe function name, so the first one may appear in real code. Same for second one. The third one is actually spotted in older version of jsNetworkX.min.js which means that this definitelly appear in real situations. Fourth one, like first one, may appear if someone want to add comment just before arrow in an arrow function. The second example doesn't mark code as error, but instead doesn't highlight comma in assignment array correctly (like it does if you remove the comment).

I have a lot of new issues, so please tell me are these ones acceptable for what you want to fix? If yes, I would be glad to post all issusues I found so far of this type.

Static properties without semicolons break everything

Just like in the title.

Lacking root scope of `souce.js` breaks a lot of other packages

I'm wondering why you've decided to change the root scope from souce.js to source.es
This cause a lot of other packages of mine to break. Things from auto completion to ES6 compiler.
Isn't it possible to stick with source.js and just extend the more specific scopes.
Something like source.js variable.parameter.es instead of source.es variable.parameter.es

Multiline signature destructuring

New lines seem to break signature syntax highlighting:

Static class property productions are not recognized

{sorry for my bad English}

Copy this code (originally taken from here) into your ST, and you'll see the problem with highlighting.

I'm a beginner, so I don't know whether the problem is in your package or in the syntax of the code itself.

Dynamic `import()` is now stage 3

Need to add support for this.

Promise.resolve() breaks theme

The closing parenthesis of Promise.resolve() is seen as a syntax error (providing an argument is fine).

Missing some meta scopes to mark a whole block of something

This is a bit tricky to describe. But we need some meta scopes to mark the begining and end of things to be used by other packages, and not neccesarily color schemes.
For example a meta scope for selecting all the function parameters or another meta scope to select the body definition of a funtion/class/object.
Did you get my idea?

Ecmascript ... Atom?

For the last few weeks I’ve been experimenting with alternative approaches to the tmLanguage / sublime syntax regex based approach to highlighting to finally get around the limitations baked into these systems.

Unfortunately the Sublime API doesn’t provide the necessary hooks to perform scoping by other means — but it seems that, although it’s not immediately obvious from the docs, Atom does.

I’m now working on an initial proof-of-concept and wanted interested folks (e.g. @aziz) to know.

If all goes well, the idea is that one will be able to choose ES/TS version from the menu and also toggle support for extensions like JSX and flow. I have a few other ideas, too, but I probably shouldn’t get too ahead of myself yet — until I’ve finished the vertical POC this new project remains somewhat tentative.

Update: The techniques that will be required to do this in Atom will really put the hack in "the hackable text editor". In addition to providing a custom subclass of Grammar (kinda neat), we’ll need to place some sort of selective wrapper/patch/interceptor over TokenizedBuffer (filthy dirty hak). The viability of this might change if it turns out there are a lot more pieces in play that have strong expectations about how grammar behaviors are implemented.

This is needed because Grammar.tokenizeLine (note: so far I see no indication of Grammar.tokenizeLines ever being called, even on initial load of a file) receives a context stack (which we can shove anything in — good) but doesn’t receive its own line number, only whether it is the first line, so we still are cut off from knowledge of subsequent lines. In our case we will want to either (a) always retokenize all lines or (b) optimize by retokenizing from the last point prior to the first changed line which had no alternative productions that depended on content from the changed line on. I want to try "a" first because although it sounds heavy, I believe a tight parser will be way faster than the node-onigumura solution currently used in atom grammars*, and also because in many cases doing "b" won’t actually help much (the last point of interest could be pretty far back). Indeed, I’ve already optimized the lexer to run super hot, upwards of 7500 tokens per ms.

* This surprised me. Oniguruma is awesome, and I guess they did this for backwards compatibility with existing textmate defs, but syntax highlighting is pretty performance sensitive ... weird to not take advantage of how crazy fast native v8 regex is, no?

Excelsior theme add lineHighlight

The lineHighlight-key is missing in the definition, so that the line gets highlighted with #FFFFFF when having the option "highlight_line": true in the User-settings.
Would be nice if that was changed to something sensible.

A few syntax issues

Test cases

// Problem with async
++async()();

// Spreading literal number
[....1``++];

// Keyword `await` is allowed as identifier name
`${await++}//`;

// Same for `let` keyword
`${let++}//`;

// I am not sure if this is an issue, or you did it on purpose
if(0);else/\//;

// Any reason for matching fourth grave accent as wrong strign sequence?
`${````}`;

// This is valid script, ES allows incrementing result of function call
````++
{[]};

How it looks

Sublime text crash

Hi,
This plugin makes my Sublime text crash, when this syntax is active and I write something between my [ ], it often crashes.
For example I have:
<MyElement style={[styles.myStyle, this.state.myElement.getLayout()]}>
If I try to write a brace before this.state.myElement.getLayout() like this:
<MyElement style={[styles.myStyle, {this.state.myElement.getLayout()]}>
my Sublime text crashes.

Sublime Text version: Build 3126
Thanks !

Support JSX

I'm quite use to your awesome syntax for javascript and I hate it that I need to switch to Babel Javascript to edit react jsx files. It would be nice to support JSX since react is becoming more and more popular.

JSX comments bug

Does not mark a jsx comment correctly.

var React = require('react');

module.exports = React.createClass({
  render () {
    return (
      <div>
        {/* this is a jsx comment */}
      </div>
    );
  }
});

HTML highlighting not working

If I use the block comment directive for HTML (/* syntax: html */), anything following it appears like a comment. The directive for XML (/* syntax: xml */) works properly though.

(ver. 1.6.8; Sublime Text 3.1.1, Build 3176; macOS 10.13.6)

Need 2 semicolons to recover `static` keyword

As you can see in the screenshot. It used to work before this commit

The first semicolon has scope punctuation.terminator.property.es.
The second semicolon has scope punctuation.terminator.statement.es.