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


by jonlabelle ST2/ST3

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



  • Total 51K
  • Win 17K
  • OS X 27K
  • Linux 8K
Nov 21 Nov 20 Nov 19 Nov 18 Nov 17 Nov 16 Nov 15 Nov 14 Nov 13 Nov 12 Nov 11 Nov 10 Nov 9 Nov 8 Nov 7 Nov 6 Nov 5 Nov 4 Nov 3 Nov 2 Nov 1 Oct 31 Oct 30 Oct 29 Oct 28 Oct 27 Oct 26 Oct 25 Oct 24 Oct 23 Oct 22 Oct 21 Oct 20 Oct 19 Oct 18 Oct 17 Oct 16 Oct 15 Oct 14 Oct 13 Oct 12 Oct 11 Oct 10 Oct 9 Oct 8 Oct 7
Windows 34 44 43 24 32 33 47 46 61 43 21 25 44 51 61 57 45 24 28 39 46 40 38 41 23 28 48 49 56 47 43 19 24 39 45 40 42 41 15 29 34 47 47 46 42 30
OS X 48 61 54 32 31 58 63 65 67 70 30 37 61 72 86 64 57 31 36 47 70 62 67 61 18 22 46 67 79 76 70 21 27 63 75 70 72 54 27 30 60 64 88 72 72 31
Linux 17 17 21 17 10 15 22 32 22 21 9 5 14 21 24 22 19 13 11 23 18 26 18 23 15 10 22 23 16 24 26 14 13 16 18 21 15 20 8 12 16 20 25 17 19 14




Travis CI Build Status AppVeyor Build Status Package Control Installs Latest Release

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

Watch a Quick Demo

Table of Contents


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


Install Prettier

If you installed Prettier globally (using the yarn or npm command below), there's nothing else you need to do.

# using yarn:
yarn global add prettier

# using npm:
npm install -g prettier

Install JsPrettier via Package Control

The easiest and recommended way to install Js​Prettier is using Package Control.

From the main application menu, navigate to:

  • Tools -> Command Palette... -> Package Control: Install Package, type the word JsPrettier, then select it to complete the installation.

Install JsPrettier Manually

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

Default Sublime Text Packages Paths:

  • OS X: ~/Library/Application Support/Sublime Text [2|3]/Packages
  • Linux: ~/.Sublime Text [2|3]/Packages
  • Windows: %APPDATA%/Sublime Text [2|3]/Packages

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.

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

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


To run the JsPrettier command… open the Sublime Text Command Palette (super + shift + p) and type JsPrettier: Format Code.

You can also right-click anywhere in the file to bring up the Context Menu and select JsPrettier Format Code.

Command Scope

JsPrettier will attempt to format selections of code first, then the entire file.

NOTE: When auto_format_on_save is true, the entire file will be formatted.

Custom Key Binding

To add a custom key binding to JsPrettier, please reference the following example which binds js_prettier to ctrl/cmd + alt + f.

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


All Prettier options are configurable from the JsPrettier.sublime-settings file, accessible from the Preferences > Package Settings > JsPrettier menu shortcut.

Sublime Text Settings

  • debug (default: false)
    When enabled (true), debug info will print to the console - useful for troubleshooting and inspecting generated commands passed to Prettier.

  • prettier_cli_path (default: empty)
    If Sublime Text has problems automatically resolving a path to Prettier, you can set a custom path here.

    When the setting is empty, the plug-in will attempt to find Prettier by…

    • Searching the path relative to the current Sublime Text Project directory, e.g.: node_modules/.bin/prettier.
    • The USER home directory, e.g.: $HOME/node_modules/.bin/prettier.
    • The JsPrettier plug-in directory, and node_modules/.bin/prettier path.
    • Globally installed Prettier.

    nvm users must set an appropriate absolute prettier_cli_path (and absolute node_path), according to the runtime environment.

  • node_path (default: empty)
    If Sublime Text has problems resolving the absolute path to node, you can set a custom path here.

    nvm users must set an appropriate absolute node_path (and absolute prettier_cli_path), according to the runtime environment.

  • auto_format_on_save (default: false)
    Automatically format the file on save.

  • auto_format_on_save_excludes (default: [])
    File exclusion patterns to ignore when auto_format_on_save is enabled.


        "auto_format_on_save_excludes": [
  • auto_format_on_save_requires_prettier_config (default: false)
    Enable auto format on save only when a Prettier config file is (or isn't) found.

    The Prettier config file is resolved by first checking if a --config </path/to/prettier/config> is specified in the additional_cli_args setting, then by searching the location of the file being formatted, and finally navigating up the file tree until a config file is (or isn't) found.

  • allow_inline_formatting (default: false)
    Enables the ability to format selections of in-lined code. For example, to format a selection of JavaScript code within a PHP or HTML file. When true, the JsPrettier command is available for use across all Sublime Text syntaxes.

  • custom_file_extensions (default: [])
    There's built-in support already for js, jsx, mjs, json, graphql/gql, ts, tsx, css, scss, less, md, yml and vue files. Put additional file extensions here, but be sure not to include the leading dot in the file extension.

  • max_file_size_limit (default: -1)
    The max allowed file size to format in bytes. For performance reasons, files with a greater file size than the specified max_file_size_limit will not format. Setting the max_file_size_limit value to -1 disables the file size checking (default).

  • additional_cli_args (default: {})
    A key-value pair of arguments to append to the prettier command.


        "additional_cli_args": {
            "--config": "path/to/my/custom/.prettierrc",
            "--config-precedence": "prefer-file",
            "--ignore-path": "path/to/.prettierignore",
            "--with-node-modules": ""

Prettier Options

  • useTabs (internally set by the translate_tabs_to_spaces setting)
    Indent lines with tabs.

  • printWidth (default: 80)
    Specifies that the formatted code should fit within this line limit.

  • tabWidth (internally set by the tab_size setting)
    The number of spaces to use per tab.

  • singleQuote (default: false)
    Format code using single or double-quotes.

  • trailingComma (default: “none”)
    Controls the printing of trailing commas wherever possible. Valid options:

    • none” - No trailing commas
    • es5” - Trailing commas where valid in ES5 (objects, arrays, etc)
    • all” - Trailing commas wherever possible (function arguments)
  • bracketSpacing (default: true)
    Controls the printing of spaces inside object literals.

  • jsxBracketSameLine (default: false)
    When true, multi-line jsx elements with right-angle brackets (“>”) are placed at the end of the last line, instead of alone on the next line.

  • parser (default: “babylon”)
    Which parser to use. Valid options are “flow”, “babylon”, “typescript”, “css”, “json”, “graphql”, “markdown” and “yaml”.

    The parser option is automatically set by the plug-in (JsPrettier), based on the contents of current file or selection.

  • semi (default: true)
    true to add a semicolon at the end of every line, or false to add a semicolon at the beginning of lines that may introduce ASI failures.

  • requirePragma (default: false)
    Prettier can ignore formatting files that contain a special comment, called a pragma at the top of the file. This is useful when gradually transitioning large, unformatted codebases to prettier.

    For example, a file with its first comment specified below, and the --require-pragma option:

     * @format
  • proseWrap (default: “preserve”)
    (Markdown and YAML Only) By default, Prettier will wrap Markdown and YAML text as-is since some services use a linebreak-sensitive renderer, e.g. GitHub comment and BitBucket. In some cases you may want to rely on SublimeText soft wrapping instead, so this option allows you to opt out with “never”.

    Valid Options:

    • always” - Wrap prose if it exceeds the print width.
    • never” - Do not wrap prose.
    • preserve” (default) - Wrap prose as-is. available in v1.9.0+
  • arrowParens (default: “avoid”)
    Include parentheses around a sole arrow function parameter.

    Valid Options:

    • avoid” (default) - Omit parentheses when possible. Example: x => x
    • always” - Always include parentheses. Example: (x) => x

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

Project-level Settings

JsPrettier supports Project-level settings set within <project_name>.sublime-project files. In order for Project-level settings to override the default and customized preferences, create a js_prettier section under the project file's settings section.

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,
            "additional_cli_args": {},
            "prettier_options": {
                "printWidth": 80,
                "singleQuote": false,
                "trailingComma": "none",
                "bracketSpacing": true,
                "jsxBracketSameLine": false,
                "parser": "babylon",
                "semi": true,
                "requirePragma": false,
                "proseWrap": "preserve",
                "arrowParens": "avoid"

Prettier Configuration Files

When Prettier configuration files are detected, options defined in Sublime Text are ignored, with the exception of 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:

        "--config": "path/to/my/custom/.prettierrc",
        "--config-precedence": "prefer-file"

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 attempt to discover and set --ignore-path <file> when a .prettierignore config exists in the same directory of the source file (first), or the active Sublime Text project root directory (second).


To report an issue, please follow the steps outlined in the Issue Template.


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


Jon LaBelle


MIT License