Home

Awesome

JsPrettier

ci Package Control Installs Latest Release MIT License

JsPrettier is a Sublime Text Plug-in for Prettier, the opinionated code formatter.

Before and After JsPrettier

Watch a Quick Demo

<details> <summary><strong>Table of Contents</strong></summary> </details>

Installation

JsPrettier is compatible with both Sublime Text 2 and 3, and all supported Operating Systems.

Requirements

Install Prettier

If you've already installed Prettier (using one of the yarn or npm commands below), you're all set... otherwise:

# yarn (local):
yarn add prettier --dev

# yarn (global):
yarn global add prettier

# npm (local):
npm install --save-dev prettier

# npm (global):
npm install --global prettier

Install JsPrettier via Package Control

The easiest and recommended way to install JsPrettier is using Package Control.

From the application menu, navigate to:

Install JsPrettier Manually

  1. Download and extract JsPrettier zip file to your Sublime Text Packages directory.
  2. Rename the extracted directory from SublimeJsPrettier-master to JsPrettier.

Default Sublime Text Packages Paths: <a name="default-st-paths"></a>

NOTE Replace the [2|3] part with the appropriate Sublime Text version for your installation.

Install JsPrettier Using Git

If you're a Git user, you can install JsPrettier and keep it up-to-date by cloning the repository directly into your Sublime Text Packages directory.

TIP: You can locate your Sublime Text Packages directory by using the application menu Preferences -> Browse Packages....

git clone https://github.com/jonlabelle/SublimeJsPrettier.git "JsPrettier"

Usage

There are three available options to format code:

  1. Command Palette: From the command palette (<kbd>ctrl/cmd + shift + p</kbd>), type JsPrettier Format Code.
  2. Context Menu: Right-click anywhere in the file to bring up the context menu and select JsPrettier Format Code.
  3. Key Binding: There is no default key binding to run Prettier, but here's how to add your own.

Command Scope

JsPrettier will attempt to format selections of code first, then the entire file. When auto_format_on_save is true, the entire file will be formatted.

Custom Key Binding

To add a custom key binding, please reference the following example which binds the js_prettier command to <kbd>ctrl + alt + f</kbd>:

{ "keys": ["ctrl+alt+f"], "command": "js_prettier" }

Settings

Plug-in settings and Prettier options can be configured by navigating the application menu to:

Sublime Text Settings

Prettier Options

See the Prettier Options doc page for more details and examples.

Project-level Settings

JsPrettier supports project-level settings, specified in <project_name>.sublime-project files.

In order for your project-level settings to override previous configurations, you'll need to add a new js_prettier key and section under settings, as seen below.

Example Sublime Text Project File

{
    "folders": [
        {
            "path": "."
        }
    ],
    "settings": {
        "js_prettier": {
            "debug": false,
            "prettier_cli_path": "",
            "node_path": "",
            "auto_format_on_save": false,
            "auto_format_on_save_excludes": [],
            "auto_format_on_save_requires_prettier_config": false,
            "allow_inline_formatting": false,
            "custom_file_extensions": [],
            "max_file_size_limit": -1,
            "disable_tab_width_auto_detection": false,
            "disable_prettier_cursor_offset": false,
            "additional_cli_args": {},
            "prettier_options": {
                "printWidth": 80,
                "tabWidth": 2,
                "singleQuote": false,
                "trailingComma": "all",
                "bracketSpacing": true,
                "bracketSameLine": false,
                "jsxSingleQuote": false,
                "parser": "babel",
                "semi": true,
                "requirePragma": false,
                "proseWrap": "preserve",
                "arrowParens": "always",
                "htmlWhitespaceSensitivity": "css",
                "quoteProps": "as-needed",
                "vueIndentScriptAndStyle": false,
                "embeddedLanguageFormatting": "auto",
                "editorconfig": true,
                "singleAttributePerLine": false
            }
        }
    }
}

Prettier Configuration Files

When Prettier configuration files are detected, options defined in Sublime Text are ignored, except for parser, tabWidth, and useTabs. These options are automatically set based on syntax settings of the current file or selection(s) defined in Sublime Text.

Custom Prettier Config File Path

To specify a custom Prettier config path, simply add a --config <path> key-value item to additional_cli_args. Here's an example:

{
    "additional_cli_args":
    {
        "--config": "~/some/path/from/my/home/.prettierrc",
        "--config-precedence": "prefer-file",
        "--ignore-path": "${project_path}/.prettierignore"
    }
}

Disable Prettier Config File Discovery

You can also add the --no-config option to the additional_cli_args setting, and tell Prettier not to attempt to find config files.

{
    "additional_cli_args": {
        "--no-config": ""
    }
}

Prettier Ignore Config File Discovery (.prettierignore)

When the --ignore-path option is NOT specified in additional_cli_args, the plug-in will search for a .prettierignore file in the same directory of the source file, then the active Sublime Text project's root directory. If neither path can be resolved, search up the directory tree, and finally look in the user's home directory.

Prettier Plugin Support

Prettier PHP

In most cases, Prettier PHP works as drop-in replacement for Prettier. However, JsPrettier only detects if you're formatting a PHP file (or PHP selection), and sets the --parser to php accordingly. Aside from that, it's up to you ensure your config(s) conform to Prettier PHP options.

To install Prettier PHP in your project root, and use it as a drop-in replacement for Prettier:

cd to/project/directory
npm install @prettier/plugin-php

Prettier Community Plugins

Here's an example SublimeText project (posted in Issue #239) that uses the Prettier Community Plugin NiklasPor/prettier-plugin-go-template to format *.gohtml files.

And another example project that uses @trivago/prettier-plugin-sort-imports to sort imports (posted in Issue #240).

Issues

To report a bug or a make suggestion, please open a new issue selecting the appropriate Issue Template (Bug report or Feature request). Be sure to follow the guidelines outlined in each template... otherwise your submission will be subject to immediate closure.

Changes

Please visit the Changelog page for a complete list of changes.

Author

Jon LaBelle

License

MIT License