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 614K
  • Win 262K
  • Mac 249K
  • Linux 104K
Feb 19 Feb 18 Feb 17 Feb 16 Feb 15 Feb 14 Feb 13 Feb 12 Feb 11 Feb 10 Feb 9 Feb 8 Feb 7 Feb 6 Feb 5 Feb 4 Feb 3 Feb 2 Feb 1 Jan 31 Jan 30 Jan 29 Jan 28 Jan 27 Jan 26 Jan 25 Jan 24 Jan 23 Jan 22 Jan 21 Jan 20 Jan 19 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
Windows 9 154 166 119 124 148 153 198 177 158 112 135 135 146 158 158 150 102 99 128 146 124 133 144 98 78 132 144 144 158 139 101 95 133 163 148 166 168 107 108 149 168 149 175 161 91
Mac 6 109 114 64 75 86 96 99 117 119 76 88 92 107 119 119 139 59 76 95 106 98 116 116 62 68 73 100 106 121 159 54 80 114 117 117 135 302 74 73 107 134 103 123 206 59
Linux 2 62 67 33 44 66 70 72 85 71 60 50 66 58 52 79 88 47 41 61 69 58 67 65 38 52 43 48 69 64 83 52 49 59 56 72 69 189 40 66 73 76 65 77 103 51

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.