ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Babel

by babel ST3 Top 100

Syntax definitions for ES6 JavaScript with React JSX extensions.

Details

Installs

  • Total 607K
  • Win 258K
  • Mac 247K
  • Linux 103K
Jan 18 Jan 17 Jan 16 Jan 15 Jan 14 Jan 13 Jan 12 Jan 11 Jan 10 Jan 9 Jan 8 Jan 7 Jan 6 Jan 5 Jan 4 Jan 3 Jan 2 Jan 1 Dec 31 Dec 30 Dec 29 Dec 28 Dec 27 Dec 26 Dec 25 Dec 24 Dec 23 Dec 22 Dec 21 Dec 20 Dec 19 Dec 18 Dec 17 Dec 16 Dec 15 Dec 14 Dec 13 Dec 12 Dec 11 Dec 10 Dec 9 Dec 8 Dec 7 Dec 6 Dec 5 Dec 4
Windows 84 133 163 148 166 168 107 108 149 168 149 175 161 91 109 119 139 71 98 157 95 108 126 122 118 122 117 107 108 150 159 135 131 143 112 127 138 171 137 159 136 88 115 134 156 160
Mac 63 114 117 117 135 302 74 73 107 134 103 123 206 59 55 105 74 66 68 73 44 53 58 55 41 71 89 41 52 75 98 88 95 95 45 68 106 112 98 98 118 56 68 87 94 128
Linux 38 59 56 72 69 189 40 66 73 76 65 77 103 51 45 42 36 32 30 50 41 35 52 58 38 42 48 38 33 52 46 53 60 55 45 39 60 64 63 67 58 35 34 59 61 39

Readme

Source
raw.​githubusercontent.​com

babel-sublime

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

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

Installation

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).

Screenshots

babel-sublime-vs-sublime-react--react-class

babel-sublime-vs-sublime-react--jsx-comments-etc

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

babel-sublime-vs-sublime-react--jsx-tight

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

Snippets

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

zeus-color-scheme

About

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.

Contributing

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.