configuration.md

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.

ECMAScript Proposals

These options enable support for various proposed language features. These proposals may change unexpectedly. If they stabilize, they will eventually be incorporated into the core JavaScript syntax and these extensions will be removed.

es_pipeline: boolean

Support the proposed pipeline operator.

es_slice: boolean

Support the proposed slice notation.

Third-party features

These extensions go beyond the base JavaScript syntax to support third-party features.

jsx: boolean

Highlight JSX. (Uses the JSX extension extension from core.)

typescript: boolean

Highlight TypeScript. (Uses the TypeScript extension extension from core.)

Old-style type assertions (e.g. <T>foo) will be highlighted unless the jsx option is also enabled.

flow_types: boolean

Highlight Flow type annotations.

eslint_directives: boolean

Highlight eslint configuration directives in comments.

Personalization

These extensions allow you to personalize your highlighting in various ways.

string_object_keys: boolean

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

custom_templates: object

Use custom syntax highlighting inside template literals. Several sub-options are available:

By default, the special embed_configuration disables this to avoid syntax recursion errors.

default: string

Highlight untagged template literals using a specified syntax. Example configuration:

{
    "configurations": {
        "My Config": {
            "custom_templates": {
                "default": "scope:text.html.basic"
            }
        }
    }
}

This will highlight all untagged template literals as HTML. (The comments option below will override this when it applies.)

tags: object

Highlight tagged template literals based on the tag. Each key in tag should be a JavaScript identifier representing a template literal tag. The associated value should be a string specifying a context to include.

For example, to highlight template strings with the style tag as CSS, use the following configuration:

{
    "configurations": {
        "My Config": {
            "custom_templates": {
                "tags": {
                    "style": "scope:source.css"
                }
            }
        }
    }
}

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

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

comments: object

Highlight untagged template literals based on a preceding block comment. Example configuration:

{
    "configurations": {
        "My Config": {
            "custom_templates": {
                "comments": {
                    "style": "scope:source.css"
                }
            }
        }
    }
}

Example JavaScript:

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

lookaheads: object

Highlight untagged template literals based on the contents. Example configuration:

{
    "configurations": {
        "My Config": {
            "custom_templates": {
                "lookaheads": {
                    "select\\b": "scope:source.sql"
                }
            }
        }
    }
}

Example JavaScript:

const myQuery = `select 1 from dual`;

styled_components: boolean

Highlight template string literals for Styled Components.

clear_all_scopes: boolean

Inside custom template literals, clear all of the enclosing JavaScript scopes. Ordinarily, only the string scope will be cleared. Enable this option if you're using a third-party tool that requires it.

Metadata

These options don't affect the syntax highlighting itself, but rather the way that Sublime uses the syntax.

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

scope: string

The top-level scope that will be used for the syntax. (If this is omitted, the scope will be “source.js.name”, where name is based on the key in the configurations object.)

file_extensions: array

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

hidden: boolean

If this is true, the compiled syntax will not appear in the syntax menu or the command palette. It can still be referenced or included by other syntaxes.

first_line_match: string

Files whose first line matches the given regular expression will use this syntax.

Deprecated

These options have been superseded by newer, more flexible options.

custom_template_tags

Superseded by custom_templates.tags.

styled_components

Superseded by custom_templates.styled_components.

typescript.old_style_assertions

Obsolete. Old-style type assertions will work unless JSX is enabled.