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 410K
  • Win 161K
  • OS X 182K
  • Linux 67K
May 21 May 20 May 19 May 18 May 17 May 16 May 15 May 14 May 13 May 12 May 11 May 10 May 9 May 8 May 7 May 6 May 5 May 4 May 3 May 2 May 1 Apr 30 Apr 29 Apr 28 Apr 27 Apr 26 Apr 25 Apr 24 Apr 23 Apr 22 Apr 21 Apr 20 Apr 19 Apr 18 Apr 17 Apr 16 Apr 15 Apr 14 Apr 13 Apr 12 Apr 11 Apr 10 Apr 9 Apr 8 Apr 7 Apr 6
Windows 251 180 207 222 302 318 282 320 148 192 274 289 322 345 246 146 223 279 288 325 214 198 192 202 253 289 293 277 294 171 188 239 295 317 301 317 163 186 300 312 336 315 316 241 221 211
OS X 222 129 148 223 243 276 290 298 122 156 236 292 273 307 233 104 135 206 237 285 222 244 150 144 249 247 297 274 243 125 134 228 226 249 264 315 149 153 222 246 290 340 360 170 136 233
Linux 83 73 68 77 124 118 111 139 73 74 83 104 103 119 114 68 82 94 118 134 105 113 68 94 96 95 139 97 107 74 86 93 113 114 118 134 59 77 107 111 110 125 144 67 71 95

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.