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


by Thom1729 ST3

Customizable JavaScript syntax highlighting for Sublime Text.

Labels javascript, syntax


  • 1.0.12
  • github.​com
  • github.​com
  • 4 weeks ago
  • 36 minutes ago
  • 3 months ago


  • Total 110
  • Win 37
  • OS X 64
  • Linux 9
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 Apr 5 Apr 4 Apr 3 Apr 2 Apr 1 Mar 31 Mar 30 Mar 29 Mar 28 Mar 27 Mar 26 Mar 25 Mar 24 Mar 23 Mar 22 Mar 21 Mar 20 Mar 19 Mar 18 Mar 17 Mar 16 Mar 15 Mar 14 Mar 13 Mar 12 Mar 11 Mar 10 Mar 9
Windows 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 1 0 1 0 0 0 0 1 1 0 1 1 0 0 0 0 1 0 0 1 0 0 0 1 0 0 0 1 1
OS X 0 0 1 1 4 0 0 0 1 0 0 2 0 1 0 0 2 0 0 1 0 0 0 0 0 4 5 0 2 0 1 1 2 2 2 0 0 1 1 0 0 3 0 2 0
Linux 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 1 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 1



JS Custom

Customizable JavaScript syntax highlighting for Sublime Text supporting JSX, Flow, and more. You can use JS Custom as a drop-in replacement for babel-sublime or create your own customized syntax with exactly the features you need. Because JS Custom is based on the core JavaScript syntax, it will work with most tools written for the original — and as the original is updated and improved, JS Custom will inherit those improvements.


JS Custom can be installed via Package Control.

Alternatively, you can install JS Custom manually by cloning it into your Packages directory as “JSCustom”.


JS Custom ships with two example configurations: “JS Custom - Default” and “JS Custom - React”. These should automatically be built and available for use upon installation.

To customize your syntaxes, choose Preferences → Package Settings → JS Custom → Settings from the menubar. The package default settings will be shown on the left; your user settings will be on the right. When you change your user settings, your custom syntaxes will automatically be recompiled. (This may take a few seconds, especially if you have a lot of configurations.)

If you modify your user settings outside Sublime Text, this package may not notice your modifications. You can force it to rebuild all of your custom syntaxes by choosing Preferences → Package Settings → JS Custom → Rebuild Syntaxes from the menubar, or by choosing “JS Custom: Rebuild Syntaxes” from the command palette.


The following options are available at the top level of your user settings:

configurations: object

An object containing one or more named configurations. The keys should be the names you would like your custom configurations to have. The values are objects specifying syntax options.

defaults: object

An object specifying default syntax options that will apply to all of your syntaxes. Your named configurations will override these defaults.

auto_build: boolean

If true, JS Custom will automatically rebuild your syntaxes when you modify your user settings. Only syntaxes whose configurations have changed will be rebuilt. If auto_build is disabled, you will have to run the rebuild command manually.

jsx_close_tag: boolean

If true, when you run the close_tag command in a JavaScript file, this package's jsx_close_tag command will be invoked instead.

Syntax Options

These options, specified in your defaults or in a named custom configuration, determine what features your custom syntaxes will have. Omitted options will be treated as null.

name: string

The name of the syntax as it will appear in the syntax selector. (If this is omitted, the syntax will be named “JS Custom - name”, where name is the key in the configurations object.)

file_extensions: array

An array of file extensions. Files with the given extensions will be use this syntax.

comma_operator: boolean

Scope the comma operator keyword.operator.comma. Other uses of the comma, such as to separate array items or function arguments, will still be scoped punctuation.separator.comma.

es_decorators: boolean

Highlight the experimental decorator syntax. (When the decorators proposal advances, support will presumably be added in the core JavaScript syntax. At that time, this extension will be removed.)

string_object_keys: boolean

Highlight unquoted object keys as strings, matching babel-sublime's behavior.

jsx: boolean

Highlight JSX.

flow_types: boolean

Highlight Flow type annotations.

eslint_directives: boolean

Highlight eslint configuration directives in comments.

styled_components: boolean

Highlight template string literals for Styled Components.

custom_tagged_literals: object

Highlight user-defined tagged template literals.

Each key in the given object should be a JavaScript identifier representing a template literal tag. The associated value should be a string specifying a context to include: for instance, “scope:source.css”


    "configurations": {
        "My Config": {
            "custom_tagged_literals": {
                "style": "scope:source.css"

Then, if you use “JS Custom - My Config” to highlight the following code, the contents of the template literal will be highlighted as CSS.

const myStyle = style`div { color: red }`;

Frequently Asked Questions

My syntaxes don't appear in the syntax selection menu. Where are they?

They are in the syntax selection menu under “User”. It would be nice to have them listed under “JS Custom”, but when generating that menu Sublime only looks at the physical location of the syntax definition files, and JS Custom compiles them to User/JS Custom/Syntaxes.

I've switched from Babel-sublime and my code looks different. How do I restore the old appearance?

If you want unquoted object keys to be highlighted as strings, set the string_object_keys configuration option to true.

Other than that, the differences occur when Babel-sublime's syntax does not conform to the scope naming guidelines or other best practices. If you liked the old appearance, then rather than modifying the syntax itself I would suggest modifying your theme. You can find further discussion here.


To request a feature or report a bug, create a new issue. All suggestions are welcome.

When reporting a bug, please include a code snippet that demonstrates the problem. If the bug exists in Sublime's core JavaScript syntax, it should be reported here — but if you're not sure, then go ahead and post it here.

When requesting a new feature, please include a link to any relevant documentation. Because of the unique design of JS Custom, we can accommodate a variety of nonstandard features.