bathos / ecmascript-sublime Goto Github PK
View Code? Open in Web Editor NEWECMAScript/JavaScript syntax (ES2015-ES2018, JSX, template highlighting, etc) with absurdly specific scopes
ECMAScript/JavaScript syntax (ES2015-ES2018, JSX, template highlighting, etc) with absurdly specific scopes
As title says 🙂
I'd say graphql
tagged templates are quite common in javascript code
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?
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:
sublimehq/Packages#876 also applies to this package.
class SomeClass {
async instanceMethod() {
}
async static someStaticMethod() {
}
}
class Bork {
//Property initializer syntax
instanceProperty = 'bork';
boundFunction = () => {
return this.instanceProperty;
}
//Static class properties
static staticProperty = 'babelIsCool';
static staticFunction = function() {
return Bork.staticProperty;
}
}
Nothing to see here 😄
class AddFeed extends Component
Component
should have a special scope not just variable.other.readwrite.initCap.es
.
something like: entity.name.class.extended.es
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.
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.
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?
Need to add support for this.
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.
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.
Nothing to see here 😄
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?
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.
The following reports an error but is valid:
[this.a, this.b] = [1, 2]
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
.
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)
Hi, I found codes like this can't be highlighted correctly:
{ get () { .... }, set () { .... } }
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(){
}
}
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 !
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.
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?
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.
Nothing to see here 😄
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!
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.
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
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?
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..
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 */
e.g. while (i++) ;
I want to give these keywords a special color but I can't. the scope is a bit too generic.
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.
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.
// 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
````++
{[]};
Unsure if this is a Sublime issue or an issue introduced in the last release, but presently the syntax def is unloadable for me.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.