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

JSCustom

by Thom1729 ST3 New

Customizable JavaScript syntax highlighting for Sublime Text.

Labels javascript, syntax

Details

Installs

  • Total 23
  • Win 13
  • OS X 7
  • Linux 3
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 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
Windows 0 0 1 3 2 7 1 2 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
OS X 0 0 0 1 1 4 1 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Linux 0 0 0 1 1 3 0 1 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Readme

Source
raw.​githubusercontent.​com

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.

Installation

JS Custom can be installed via Package Control.

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

Usage

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.

Configuration

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.

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.

jsx: boolean

Highlight JSX.

flow_types: boolean

Highlight Flow type annotations.

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"

Example:

{
    "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 }`;

Contributing

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.