Skip to content
Go to file


Failed to load latest commit information.


Only supports Sublime Text 3. Sublime Text 2 is no longer supported.

Language definitions for ES6+ JavaScript with React JSX syntax extensions.


Find it as Babel through Package Control.

Setting as the default syntax

To set it as the default syntax for a particular extension:

  1. Open a file with that extension,
  2. Select View from the menu,
  3. Then Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel).
  4. Repeat this for each extension (e.g.: .js and .jsx).

Setting a Color Scheme

Babel comes bundled with Next and Monokai from Benvie/JavaScriptNext.tmLanguage. Select one from Preferences -> Color Scheme -> Babel

Advanced usage

It's possible to set Babel as the only JavaScript package by disabling the stock one. To do so, add "ignored_packages": ["JavaScript"] to your Preferences.sublime-settings. The benefits include:

  • extension-less node scripts will automatically be recognized as JavaScript (Babel),
  • and reduced clutter in the syntax menu.

Keep in mind, the stock snippets will no longer work (you may still use your own), and other third-party packages that depend on the stock package may break (no known ones so far).




  • babel-sublime correctly matches JSX comments between attributes, namespaced components, and non-alpha characters in tag/attribute names.


  • Greater-/less-than comparisons are correctly identified as such and not mistaken for JSX tags.


Find them separately at babel/babel-sublime-snippets or as Babel Snippets through Package Control.

Suggested Resources

Sublime Text Color Schemes which are ready for JavaScript's new features and babel-sublime package.

Oceanic Next Color Scheme

Zeus Color Scheme



Under the hood, babel-sublime is based on the excellent Benvie/JavaScriptNext.tmLanguage with JSX syntax support built on top. The initial definitions for JSX came from reactjs/sublime-react via yungters/sublime - special thanks go to @jgebhardt and @zpao.


Pull Requests should include your changes to the respective YAML-tmKittens file as well as the converted tmKittens file. Use AAAPackageDev to convert the YAML-tmKittens files.


Syntax definitions for ES6 JavaScript with React JSX extensions.



Sponsor this project

Learn more about GitHub Sponsors
You can’t perform that action at this time.