subtlegradient / language-javascript-jsx Goto Github PK

Hi, i just installed language-favascript-jsx 0.3.7 on my latest verison of Atom, but it seems like there is no differences in highlighting.

thank you.

Stuff like event and document highlight as though they're special. When developing something for which these types are undefined or irrelevant (such as server-side node.js), it's annoying having these words commandeered with the assumption that we're in a browser-targeted environment.

Example:

Any chance of an option to stop environment-specific tokens from being given special treatment?

I noticed a line collapsing on top of another line. The behavior can be seen here:

The behavior went away when I disabled this package. I also strangely only see it when the prop is called cursor.

Not quite sure what is going on. I'll try digging in a bit when I have some time.

What's the purpose of having .syntax--variable.syntax--other.syntax--readwrite on most elements?

Also, I see a lot of syntax--entity.syntax--other.syntax--attribute-name as well as .syntax--meta.syntax--scope.syntax--inner, while some elements have .syntax--js, others have .syntax--es, and other others have .syntax--jsx.

Almost every element is styled to the same color, or doesn't make sense semantically (i.e. string quotations are colored different than the string contents themselves)

To reproduce the problem.

1. Install autocomplete-modules

Enjoy autocomplete for require/import statements....

2. Install this package, and restart atom.

autocomplete-modules won't work anymore.

Hi,

I found a small bug on the latest version of the package. Whenever you write the hidden attribute on any component, with a value other than a string, i.e. hidden={value}, it automatically hides the attribute on the editor.

<Component hidden={true} />

becomes:

<Component />

It really doesn't matter the value of the hidden attribute, as long as the attribute is 'hidden'.

When writing a new react component method in ES6 class syntax, I came across this nasty bug.

Here is some context:

export default class BlahBlah extends Component {
  method() {
    return ()
  }
}

With the above code, all is fine.

The bug fires when I type <, then a d inside the parenthesis after the return. (Creating a DIV tag)

The atom editor completely locks up and I am forced to close the application...

Any ideas?

This happens in JavaScript by SubtleGradient mode.

undefined is the only keyword not properly labeled with a class name...

This regex just doesn't seem to bbe able to match the word undefined
https://github.com/subtleGradient/language-javascript-jsx/blob/master/grammars/javascript.cson#L742-L745

Digging through the code to see what snippets is available is not ideal.

Within a component, writing a property which contains curly braces inside a string produces formatting that does not suggest that the string will come out like it does.

The code <input id='CardNumber' pattern='[0-9]{13,16}' /> is valid syntax and is compiled naturally by Babel. As such, I think the formatting should reflect this.

unsure if this is your intention

Splitting large opening tags such as this doesn't work:

  title={"Edit "+this.props.friend.fname+" "+this.props.friend.lname+"'s Account"}
  modal={false}
  open={this.state.editOpen}
  onRequestClose={this.editClose} >

It's not recognising it as a complete opening tag.

I initially assumed this bug to be related to the PHP formatter built into Atom, but after some trial and error I tracked it down to this package instead.

See original issue I posted here.

This is one code example that triggers the issue (extracted from a .php file):

// Set address name if it wasn't entered
if (!$location->getAddressOne() && $location->getAddressTwo())
{
    $location->setAddressOne($location->getAddressTwo() ? ' ' . $location->getAddressTwo() : '');
}

$hasAddress = $location->getAddressOne() ? true : false;

Changing the first line of the code to remove the apostrophe corrects the problem:

// Set address name if it wasnt entered
if (!$location->getAddressOne() && $location->getAddressTwo())
{
    $location->setAddressOne($location->getAddressTwo() ? ' ' . $location->getAddressTwo() : '');
}

$hasAddress = $location->getAddressOne() ? true : false;

Any chance on implementing autoformat. Or creating another package for does autoformat for this language-javascript-jsx.

With this package enabled, a quote (both single and double) in an HTML comment breaks syntax highlighting for the rest of the buffer.

undetected close tag />

See below:

I know this is pretty nitpicky, and people like credit, but seeing "Javascript by SubtleGradient" in my status bar is super annoying. Is it possible to change that to something more subtle like "Javascript+"? It also takes up a ton of space.

Some suggestions: Since you're covering all the bases (React, ES6/7, etc) how about JavaScriptNext? Or JavaScriptHarmony? Understandably both those terms seem a bit dated, but they do seem appropriate.

I find it hard to work with JSX in Atom Editor with this plugin since it skips a lot of ES6 features and also doesn't include the tons of JavaScript features upstream has, it would be nice if the gammers here all sourced upstream: "source.js" like so:

"patterns": [
  {
    "include": "source.js"
  }
]

i updated lastest version 0.3.7.

The highlight to keyword function expects a function even it is, at this instance, an object attribute. Also eslint dot-notation rule in favour of this syntax instead of PropTypes['function']. Which results in this mess up output:

Files of the type "Javascript with JSX" (and possibly others in the package) conflict with the native language-todo package's ability to highlight markers in comments like TODO, FIXME, etc. Not a huge issue but it makes them easier to spot in comments when they highlight properly.

I turned off all my linters but there are still linter messages. Then I found it's from this package, how can I turn linting off? I cannot find an option in settings.

The javascript coloring is being thrown off by an escaped / at the end of a regular expression.

const addProtocol = (url: string): string =>
	(!url || /^https?:\/\//.test(url) ? url : `http://${url}`)

Interestingly, if you remove the !url || before the RegExp, it works fine. Something about the || is throwing it off.

More info: facebookarchive/nuclide#1121

When i use static attributes the highlight broken

static propTypes = {
    children: PropTypes.node.isRequired,
    type: PropTypes.string
  }

without static

with:

e.g.

const bar = 42;
const baz = `foo ${bar}`; // 'foo 42'

foo should be styled as string and ${bar} should be styled as variable.

http://babeljs.io/docs/learn-es2015/#template-strings

So, I'm definitely only seeing this when I invoke a function, but it negates everything after that:

Not a big deal, but definitely looks worse when there are a lot of keys and this is early on.

Hi,

Sometimes we make use of lodash/get in our codebase. This causes the code following it to not be properly formatted:

Likely due to this line, it looks like certain keywords trigger this kind of highlighting, which is undesirable. How do I either:

• A) turn it off for the keyword get
• B) turn it off completely for all cases (because frankly I don't like how it handles text after the static keyword is used)
• C) is there a better/different syntax highlighter I can use instead of this one?

To reproduce:

1. At the beginning of an existing line with a JSX component (or on a blank line), type <p>
2. Go to end of line and type <
   Atom locks up.

First of all, thank you for this package, I haven't found any other package that adds syntax highlighting for jsx AND es6, so thanks..

There is probably only one thing that im missing currently and that is highlighting on attributes on jsx elements.

Currently it looks like this and it gets a little messy after a while.

Here is an example

This only happens within the backquoted string. Block comments have the same effect.

Its seems that they are recognized as methods of built in objects.
Examples:
trim split replace
push map reduce

A file that contains JSX and has a .js extension is highlighted as normal Javascript (not with JSX). This has only started happening recently, and was working fine on these types of files until a few days ago.

Maybe something changed within my editor to cause this, but it seems like it is related to how file type/syntax is detected with language-javascript-jsx.

this is Plain Text

this is JavaScript with JSX

As u can see most ligatures are broken...
Also the fat arrow ligature seems not broken in my example but when you use it in real code:

😢

and later, with the defaults:

The keyword "let" isn't considered as a keyword such as var, so the color scheme isn't the same as for "var"

Enabled:

Disabled:

Atom: 1.19.2
OS: Debian 9 Stretch
Tested with: ember 2.X project ~ (ES6)

I am having strange highlighting issues with v0.3.7.

Most of the test appears read. Basically its the same happening with this package what happend once to the language-javascript package.

atom/language-javascript#258

Any tips how to fix this red syntax issue?

Currently the let keyword doesn't get tagged as a keyword and gets lost in the mix. Is this something you are able to fix? Thanks!

const App = () => ( <> <p>React 16.2</p> <p>React 16.2</p> </> );