brackets-beautify

    2.13.0 • Public • Published

    npm Version

    Build Status

    Brackets Beautify

    Brackets Extension that formats open HTML, CSS, and JavaScript files using js-beautify version 1.13.13.

    Installation

    Latest Release

    To install the latest release of this extension use the built-in Brackets Extension Manager which downloads the extension from the extension registry.

    Latest Commit

    To install the latest commit of this extension use the built-in Brackets Extension Manager which has a function to Install from URL... using this link:

    https://github.com/brackets-beautify/brackets-beautify/archive/master.zip
    

    Brackets npm Registry

    The latest release of this extension is also available on the Brackets npm Registry.

    Usage

    Brackets Beautify can be run manually on the whole file or on a selection. Use the Toolbar Button with the wand icon, the menu entry Edit > Beautify, the context-menu entry Beautify, or one of the keyboard shortcuts Ctrl-Alt-B (Windows/Linux), Ctrl-Shift-L (Windows), Cmd-Shift-L (Mac), or define your own.

    Alternatively it can be enabled to run automatically on save. Use the menu entry Edit > Beautify on Save or the more advanced settings to activate.

    Configuration

    Beautifier Options

    Brackets Beautify supports the same options as js-beautify with the exception of indentation-based options (indent_size, indent_char, and indent_with_tabs) which are taken from the current settings in Brackets. The options can be specified in a .jsbeautifyrc file on project level and will be merged with the default. The default is defined in default.jsbeautifyrc and looks like this:

    {
        "js": {
            "eol": "\n",
            "preserve_newlines": true,
            "max_preserve_newlines": 10,
            "space_after_anon_function": true,
            "brace_style": "collapse",
            "keep_array_indentation": true,
            "keep_function_indentation": false,
            "space_before_conditional": true,
            "break_chained_methods": false,
            "eval_code": false,
            "unescape_strings": false,
            "wrap_line_length": 0,
            "wrap_attributes": "auto",
            "end_with_newline": true,
            "comma_first": false
        },
        "css": {
            "eol": "\n",
            "end_with_newline": true,
            "preserve_newlines": true,
            "selector_separator_newline": true,
            "newline_between_rules": true,
            "space_around_selector_separator": true
        },
        "html": {
            "eol": "\n",
            "end_with_newline": true,
            "preserve_newlines": true,
            "max_preserve_newlines": 10,
            "indent_inner_html": false,
            "brace_style": "collapse",
            "indent_scripts": "normal",
            "wrap_line_length": 0,
            "wrap_attributes": "auto"
        }
    }

    File Options for Beautify on Save

    Brackets Beautify leverages Brackets preferences, which means that you can specify per project settings by defining a .brackets.json in the root directory of your project. With Brackets preferences you can even define per file settings, which is really handy when dealing with third party libraries or minified resources.

    Brackets Beautify also support per language settings, which enables you to enable/disabled Beautify on Save for your documents using the Brackets language layer.

    The sample .brackets.json below generally enables Beautify on Save and disables it for any JavaScript file in thirdparty, any JavaScript file whose filename contains min, and any PHP file.

    {
        "bb.beautify.onSave": true,
        "path": {
            "thirdparty/**.js": {
                "bb.beautify.onSave": false
            },
            "**min**.js": {
                "bb.beautify.onSave": false
            }
        },
        "language": {
            "php": {
                "bb.beautify.onSave": false
            }
        }
    }

    User Key Map for Beautify

    Open the keymap.json with the menu entry Debug > Open User Key Map and add an overrides entry. For example:

    {
        "documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings",
        "overrides": {
            "Ctrl-Alt-F": "bb.beautify.beautify"
        }
    }

    Configure languages

    Brackets Beautify comes with beautifiers for JavaScript, HTML, and CSS:

    {
        "css": "css",
        "ejs": "html",
        "handlebars": "html",
        "html": "html",
        "javascript": "js",
        "json": "js",
        "jsx": "js",
        "less": "css",
        "php": "html",
        "scss": "css",
        "svg": "html",
        "vue": "html",
        "xml": "html"
    }

    You can add languages or change their assigned beautifiers by adding their language ids to the bb.beautify.languages setting:

    {
        "bb.beautify.languages": {
            "<LANGUAGE_ID>": "<BEAUTIFIER_ID>"
        }
    }

    The language id for the current document can be found by using the following command in the Brackets Developer Tools:

    brackets.getModule('document/DocumentManager').getCurrentDocument().getLanguage().getId();

    The beautifier id has to be either one of the bundled beautifiers (js, css, or html) or one that was defined as external formatter.

    External formatters

    Additionally, external formatters can be added to Brackets Beautify by modifying the bb.beautify.beautifiers setting:

    {
        "bb.beautify.beautifiers": {
            "<BEAUTIFIER_ID>": {
                "<COMMAND>": "/path/to/file --with args"
            }
        },
        "bb.beautify.languages": {
            "<LANGUAGE_ID>": "<BEAUTIFIER_ID>"
        }
    }

    The key is a name that can be use to configure the language where this formatter should be used. The <COMMAND> is executed on a shell and gets the filename as last command line argument.

    See the Wiki for help on common configurations.

    Issues

    Brackets Beautify uses js-beautify to beautify files and is therefore limited to its capabilities. For any issues concerning the actual formatting please refer to the js-beautify issues.

    License

    Brackets Beautify is licensed under the MIT license. js-beautify is also licensed under the MIT license.

    Install

    npm i brackets-beautify

    DownloadsWeekly Downloads

    16

    Version

    2.13.0

    License

    MIT

    Unpacked Size

    358 kB

    Total Files

    31

    Last publish

    Collaborators

    • hirse