Home

Awesome

JsPrettier

ci Package Control Installs Latest Release MIT License

JsPrettier is a Sublime Text Plugin 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, you're all set... otherwise:

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

# npm (globally)
npm install --global prettier

# or

# pnpm (local)
pnpm add -D prettier

# pnpm (globally)
pnpm add -g prettier

# or

# yarn (local)
yarn add prettier --dev

# yarn (globally)
yarn global add prettier

Install JsPrettier via Package Control

The recommended way to install JsPrettier is via Package Control.

From the main application menu:

  1. Open the Tools Menu
  2. Select Command Palette...
  3. Choose Package Control: Install Package
  4. Type JsPrettier and select it to complete the installation

Install JsPrettier Manually

  1. Download the JsPrettier zip file from the GitHub repository.
  2. Extract the downloaded zip file.
  3. Move the extracted directory to your Sublime Text Packages directory.
  4. 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

JsPrettier allows you to format your code using Prettier directly within Sublime Text.

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 formats selected code first; if no selection is made, it formats the entire file. When auto_format_on_save is enabled, the entire file will be formatted on save.

To add a custom key binding, open the Sublime Text key bindings file by navigating to Preferences -> Key Bindings and add the following configuration:

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

Plugin Settings and Prettier Options

Configure plugin settings and Prettier options via the application menu:

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

To override previous configurations with your project-level settings, add a new js_prettier key and section under settings as shown in the example 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 plugin 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 a drop-in replacement for Prettier. However, JsPrettier only detects if you're formatting a PHP file (or PHP selection), and sets the --parser option 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 from #239 that uses the Prettier Community Plugin prettier-plugin-go-template to format *.gohtml files.

And another example project from #240 that uses prettier-plugin-sort-imports to sort imports.

Issues

To report a bug or make a suggestion, please open a new issue selecting the appropriate issue template: Bug, Feature, or Question.

Be sure to follow the guidelines outlined in each template; otherwise, your submission may be closed.

Changes

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

License

MIT

Author

Jon LaBelle