rhythm1027 / sublime-babel-vscode

Sublime Text's babel-sublime grammar in VS Code.

Sublime Babel

When using your favorite theme, Visual Studio Code doesn't always display syntax highlight colors as expected. This extension tries to mimic Sublime Text's babel-sublime package as much as possible to address poor coloring.

With VS Code 1.9.0, a new token flattenizer will be implemented that finally allows VS Code to properly follow TextMate grammar rules. This significantly improves syntax highlighting with preexisting tmThemes from other editors. However, the default JavaScript grammar still needs some work to match Sublime Text. This extension solves that for you.

Installation

1. Uninstall any preexisting JavaScript grammar extensions (e.g. Latest TypeScript and JavaScript Grammar, Babel ES6/ES7) to prevent conflicts
2. Install Sublime Babel via ext install sublime-babel-vscode in Command Palette
3. When opening a .js or .jsx file, ensure the language mode is set to JavaScript (Babel) or JavaScript React (Babel)

Suggested Color Themes

For best results, please consider using these optimized themes. Other ported themes will work too, but may not necessarily handle the differences between Sublime and VS Code properly.

One Dark

Charcoal Oceanic Next

Comparisons

Here is a quick example of the improved grammar compared against the popular Babel ES6/ES7 extension on the marketplace. Notice how Babel ES6/ES7 handles comments and strings incorrectly.

Note: These screenshots and case scenarios are old, but the premise is still valid. Other grammars do not fully tokenize like how Sublime does it.

Changelog

Please see here.