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 20K
  • Win 6K
  • OS X 12K
  • Linux 3K
Dec 18 Dec 17 Dec 16 Dec 15 Dec 14 Dec 13 Dec 12 Dec 11 Dec 10 Dec 9 Dec 8 Dec 7 Dec 6 Dec 5 Dec 4 Dec 3 Dec 2 Dec 1 Nov 30 Nov 29 Nov 28 Nov 27 Nov 26 Nov 25 Nov 24 Nov 23 Nov 22 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
Windows 7 12 8 26 33 23 40 28 21 18 36 28 31 39 27 16 20 26 30 29 43 31 8 14 25 27 21 26 26 20 18 27 36 28 43 44 13 20 31 38 29 32 35 19 15 36
OS X 23 23 34 58 65 58 57 64 23 29 106 76 75 73 46 20 33 73 62 64 48 52 21 23 48 52 50 79 55 28 40 51 61 67 58 57 32 38 49 74 58 48 69 36 35 50
Linux 2 9 12 16 17 17 29 17 8 10 17 16 13 17 14 7 5 10 17 9 18 15 10 7 11 10 17 16 16 17 17 18 15 21 17 18 6 10 21 16 24 21 17 9 10 8




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.


JsPrettier requires the following programs to be installed prior to use:

Install Prettier

If you installed Prettier globally (using the yarn or npm command below), there is 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

Alternatively, 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, otherwise the entire file will be formatted.

NOTE: When the auto_format_on_save setting is set to true, the entire file will always 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), additional debugging information about the command and configured settings will be printed to the Sublime Text Console; useful for troubleshooting purposes.

  • prettier_cli_path (default: empty)
    It's recommended to leave this setting empty (the default). However, if Sublime Text has problems resolving the CLI path to the Prettier executable, you can explicitly set the appropriate path here.

    When the setting is left empty, the path is resolved by searching locations in the following order, returning the first matched path:

    • Locally installed Prettier, relative to the Sublime Text Project file root directory, e.g.: node_modules/.bin/prettier.
    • The user's home directory, e.g.: $HOME/node_modules/.bin/prettier.
    • Look in the JsPrettier Sublime Text plug-in directory for node_modules/.bin/prettier.
    • Finally, check if Prettier is installed globally.

    nvm users are required to set an appropriate absolute prettier_cli_path (and absolute node_path); according to the target runtime environment.

  • node_path (default: empty)
    It's recommended to leave this setting empty (the default). However, if Sublime Text has problems resolving the absolute path to the node executable, you can explicitly set the appropriate path here.

    nvm users are required to set an appropriate absolute node_path (and absolute prettier_cli_path); according to the target runtime environment.

  • auto_format_on_save (default: false)
    Whether or not to automatically format the file on save.

  • auto_format_on_save_excludes (default: [])
    Ignore auto formatting when the target file, or its path resides in a particular location, and when auto_format_on_save is turned on.


        "auto_format_on_save_excludes": [
  • 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, json, graphql/gql, ts, tsx, css, scss, less and md files. Additional file extensions MUST be specified here, without the leading dot.

  • max_file_size_limit (default: -1)
    The maximum 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 be formatted. Setting the max_file_size_limit value to -1 will disable file size checking (default).

  • additional_cli_args (default: {})
    A key-value pair of additional 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": ""

    NOTE: If choosing to specify additional CLI args, it is assumed that each argument is supported by the Prettier CLI. Otherwise, the command will fail to run, and errors will be dumped out to the Sublime Text Console. You can also enable the debug setting to inspect the generated command-line output passed to prettier; which is also useful for quickly troubleshooting issues.

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)
    If true, code will be formatted using single-quotes, instead of 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, right-angle brackets (“>”) of multi-line jsx elements will be placed at the end of the last line, instead of being alone on the next line.

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

    The parser options automatically set based on the file type or selection being edited, and should need to be adjusted; or left alone using the default.

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

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

    For example, a file with the following as its first comment will be formatted when --require-pragma is supplied:

     * @format
  • proseWrap (default: “preserve”)
    (Markdown Only) By default, Prettier will wrap markdown 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, specified in <project_name>.sublime-project files. In order for Project-level settings to override the Defaults and User configured settings, a new js_prettier section must be created 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": [],
            "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, Prettier options defined in Sublime Text settings and Project files will be overridden with their Prettier config file counterparts, with the exception of parser, tabWidth and useTabs; which are all auto-detected based of the current view or selection(s).

The configuration file will be resolved starting from the location of the file being formatted, and searching up the file tree until a config file is (or isn't) found.

Custom Prettier Config File Path

To specify a custom Prettier config path, simply add the --config argument with an appropriate path to the additional_cli_args setting. Here's an example.

    "additional_cli_args": {
        "--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": ""


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