joshpeng / sublime-babel-vscode Goto Github PK

As far as I'm aware, if you have the "Sublime Babel" extension installed, then this extension generates the tokens used to construct the outline in VS Code, since it becomes the active grammar for JS. If I'm wrong, feel free to let me know and close the ticket.

After this Twitter discussion, it seems that there's interest in improving the outline/breadcrumb display for arrow functions.

My proposal: if the arrow function is an argument in a function call, use the name of the called function along with any string literals to visually identify the otherwise unnamed function.

For example:

// Example code
document.addEventListener('click', () => {
  // This would ordinarily display as "<function>"
})

/* Proposed outline display

> addEventListener('click', ...)

*/

I took a quick look at the code but wasn't sure how the tokens are generated or used to form the outline, but I wrote a proof-of-concept using Babel to at least give a sense of my idea. I submitted an issue with VS Code, which was pushed upstream into the TypeScript repo. I'd prefer to learn the ropes and make my PR here, since this is the grammar I use on a daily basis.

Before:

After:

comenting JSX manually is a pain 😅

This may be related to:
Syntax highlighting broken when using ES6 arrow function's implicit return to return JSX #4

How to reproduce:

1. Create react app with: npx create-react-app my-app
2. Edit App.js by adding arrowfunction: checkLessThan = (value) => value < 5;

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  checkLessThan = (value) => value < 5;

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

I'm using the Charcoal Oceanic Next color theme, but the problem seems to affect all VSCode themes #(atleast preinstalled dark themes).

Most of the color-formatting goes away. Strings appear to be fine. Switching the 'Less Than'-operator into 'Greater Than'-operator shows colors correctly.

Putting paranthesis around the implicit return would fix the problem, but that is not a real solution to the bug. Especially, as Eslint/Prettier are often configured to remove those paranthesis.

Hi @joshpeng,

I'm super curious why you've removed everything from the VSCode Marketplace?

I love this theme. Is it because other themes do the same thing now? I haven't been able to find one. 😃

Hope all is well,
Jeremy

Hello,

my suggestion is to make types in comments colorized like it's in Atom. This will be really cool to have in VS Code. The color of types will be as it is right now if we write it outside of comments.

VS Code:

Atom:

As you can see in Atom it is colorized like it was outside of comments, it will be very cool to have it same in the VS Code.

Flow supports types, classes, interfaces and so on in comments, here is doc https://flow.org/en/docs/types/comments/.

Atom plugin which will make colored comments https://github.com/gandm/language-babel.

• VSCode Version: Version 1.13.0-insider (1.13.0-insider)
• OS Version: Sierra 10.12.5

My cursor is not placed in the correct position on enter.

When I upgrade the system, plugins doesn't offer any tips such as 'className, onClick, onLoad'。

There is wierd 'static' keyword highlighting in .jsx react component in ES6 syntax (https://facebook.github.io/react/docs/react-component.html).

Specs: Windows 7 SP 1 (also Ubuntu 16.10), VSCode 1.8.1, 1.9.0.
Tested on a lot of Color Schemes (sublime-babel supported and others).

Sublime's default syntax also has quite a few flaws. JavaScript Ultimate for ST3 aims to fix that: https://packagecontrol.io/packages/JavaScript%20Ultimate

So, I wonder if this extension is based on JS Ultimate or if it is a good idea to do that? :)

For some reason when this extension activated there is incorrect icons on some files.

For example:

1. On ".js" file got icon for ReactJS (whery annoying - when you work on some non react project but all you ".js" files highlighted like "react")
2. On ".css" files got icon for PostCSS

Incorrect "class" on file.

Was tested on windows and linux (both - code and code-insiders) on different computer.
Problem appear on different icon themes.

This issue (microsoft/vscode#20338), made me disable all extensions then enable them one by one until I found that this extension is causing the behaviour reported there:

"... when I type a backtick, I only get one, not two. That's pretty much it."

Any idea how to fix this ?

In a file such as this (only a portion of file):

import type { Action } from '/actions'
import type { User } from '/reducers/user'

type Props = {
  user: User,
  dispatch: Dispatch<Action>
}


const UserPage = ( {
  user: {
    userInfoAjax: {
      data: userInfoApiResponse
    }
  }
}: Props ): React.Element<*> =>
  <div styleName='container'>
    { userInfoApiResponse
      ? <div styleName='user-info'>
          <div styleName='item'>```

Everything following any `type` or `import type` declaration seems to be tokenized incorrectly - they all show up as orange in One Dark (Sublime Babel), for instance.

Hi.

I have a feature request.

The sublime's babel plugin can do auto indent when inserting new line with cursor is located inside jsx tag.
Could you consider to implement same feature? I think it must be very helpful.

Thanks.

Example code:

import React from 'react';

export default class Test extends React.Component {
  render() {
    return (
      .foo
    );
  }
}

If I expand the .foo with emmet, it works fine and I end up with:

import React from 'react';

export default class Test extends React.Component {
  render() {
    return (
      <div className="foo"></div>
    );
  }
}

If I then try to expand another time inside like so:

import React from 'react';

export default class Test extends React.Component {
  render() {
    return (
      <div className="foo">
        .bar
      </div>
    );
  }
}

Emmet won't expand the .bar

If I disable SublimeBabel, the .bar expansion works as expected

Using for-in statement breaks syntax highlighting for the for statement (after and including in keyword) and up until the next semicolon.

for (let type in attachments) {
  const desc = attachments[type];

is displayed as

Note how in and const are not highlighted.

I've created project located language specific snippet file:
.vscode/c.code-snippets
with such snippet:

{
	"Test JS snippet": {
		"scope": "javascript",
		"prefix": "testJsSnippet",
		"body": [
			"test"
		],
		"description": "JS test"
	}
}

and after installing of the sublime-babel ext there are 2 JS languages in VSCode:
Javascript (Babel) (javascript)
and
Javascript React (Babel) (javascriptreact)

Then I create a JS file a.js. Language mode is Javascript (Babel). And when I type snippet's prefix I don't see suggestion. But when I change scope in snippets file to javascriptreact it starts to work. Despite I have a plain js file with language mode of Javascript (Babel).
I've tried to reload VSCode without extensions and snippets work as expected with the scope property.
Seems there is a bug in affect of the extension on language mode...

@joshpeng

See microsoft/vscode#34750

The reason the Emmet command doesnt work is because Emmet doesnt recognize the language insde the nested tags which is jsx-sublime-babel-tags

Emmet works if the language under the cursors is either

1. One of the supported modes OR
2. Is mapped to one of the supported modes in the emmet.includeLanguages setting OR
3. The scopename for the language Inherits from one of the supported modes.

We made it work for the embedded language in vue using option 3
with this change: vuejs/vetur@49f722d
Since vue-html (which is an embedded language) now inherits from html, the Emmet: Expand Abbreviation will work out of the box.

Thoughts on doing something similar for jsx-sublime-babel-tags?

It would be great if this plugin could support the new bind operator.

Example:

// Binding a function to a context
let log = ::console.log;

Specs:

https://github.com/tc39/proposal-bind-operator

Hello,

when I'm opening .js file it uses JavaScript React (Babel) language mode, not JavaScript (babel).

Wrong color syntax in arrow functions without body.

Hello,

In my opinion default VS Code syntax coloring is way better than this one. Better improve some of them which are not in VS Code by default, like colored comments and so on. Because right now VS Code default syntax coloring is easier to read. I was like, cool Babel plugin for VS Code which will improve syntax coloring, but the true is, it does nothing at all. Sorry, but this is true, you can really make this plugin better, but you need to improve it.

Thanks

It would be nice if template literals html get highlight!

Here is an example that illustrates the issue. If you drop this code into a blank JS file with this extension enabled, the highlighting breaks. It's not a huge issue and can be fixed on a case-by-case basis via comments, but I figured I'd make it known. Thanks for the extension :)

const x = {};

// Syntax highlighting is good here
const test = `${x?.someThing}`; 

// Now the syntax highlighting is messed up
const someVar = "Value"; 

// Adding a single backtick somewhere seems to fix it `
// Now we're okay.

const someOtherVar = "Another Value";

似乎会破坏html文件内script标签语法高亮

For some reason, the following example breaks the syntax highlight inside a html file.

<html>
<head>
  <script>
  </script>
</head>
<body>
  
</body>
</html>

But these examples work just fine.

1. When script closing tag is not indented.

<html>
<head>
  <script>
</script>
</head>
<body>
  
</body>
</html>

2. When there is some coding before the closing tag.

<html>
<head>
  <script>
  console.log("")</script>
</head>
<body>
  
</body>
</html>

Anyway, had to disable the plugin for now, but still hoping someone can find the problem/fix.

Thanks !

ps. This started after recent updates from VS Code. (around a month ago ?)

Hello,

When I try to use optional chaining inside my JSX, the syntax highlighting of the following blocks is broken (line 69).

If I remove the optional chaining, everything is fine.

On Sublime Text, it works as expected.

EDIT: This also breaks simple JS syntax highlighting.

When I go to Babel documentation and look for the Sublime Babel link, it doesn't work and gives me and 404 error. The VSCode Extension manager doesn't find the plugin neither.

From microsoft/TypeScript-TmLanguage#401

• VSCode Version: 1.8.1
• OS Version: OSX 10.11.6

Steps to Reproduce:

1. Create a .js file, and write some JSX in it like so:

2. Use an arrow function to implicitly return JSX.

3. Watch as the syntax highlighting below breaks.

This only breaks when the JSX is implicitly returned with the ES6 arrow function. If you wrap the JSX in parens, the syntax highlighting is not broken:

Using the arrow function and using an explicit return fixes the syntax highlighting as well:

Object keys are the same color as strings, making objects containing many string values hard to read. Example:

I am using Sublime-Babel-VSCode with Charcoal Oceanic Next. I wasn't sure if this was an issue with this extension or the other, so I'm going to leave this on both. Is there a workaround for this? Thanks!

Discovered in One Dark's #2

The "someMethod" should be blue, but it is red because it uses the exact same token as the "React" below.
Sublime Babel would need to somehow add a new unique tokenization for "someMethod" to differentiate it from the React items.

Just wanted to report that vscode-ext-color-highlight completely stops working when Sublime-Babel-VSCode is enabled.

Sublime-Babel-VSCode stays because it's more awesome. But I'd love to have both working. :-D

This code results in broken syntax highlighting for all following code in the file:

const foo = <Foo>(x: Foo) => {
  return x + x;
};

I have found that this workaround fixes it:

const foo = /* any comment here */<Foo>(x: Foo) => {
  return x + x;
};

But would rather not have to litter my codebase with otherwise-needless comments 😄

Does this project have plans to support React.Fragment short syntax?

Example:

render() {
  return (
    <>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </>
  );
}

Reference:
https://reactjs.org/docs/fragments.html#short-syntax

Hi, is there a way to have the < > and </ /> symbols around HTML/JSX elements colored the same as the component name / tag name?

in this you can see that the < > brackets are blue and I'm trying to see if there's a way to make them red. Perhaps this is a problem with the color theme, but it irks me slightly that they're different colors. thanks a lot for this great extension too.