JsPrettier

[JsPrettier] is a Sublime Text Plugin for [Prettier], the opinionated code formatter.

[Watch a Quick Demo]

---

• Installation
  • Requirements
  • Install Prettier
  • Install JsPrettier via Package Control
  • Install JsPrettier Manually
  • Install JsPrettier Using Git
• Usage
  • Command Scope
• Plugin Settings and Prettier Options
  • Plugin Settings
  • Prettier Options
  • Project-level Settings
  • Prettier Configuration Files
• Prettier Community Plugins
• Issues
• Changes
• License
• Author

Installation

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

Requirements

• [Sublime Text]
• [Node.js]
  • [npm], [pnpm], or [yarn]
    • [Prettier]

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:

• 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].

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 (ctrl/cmd + shift + p), 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:

• Preferences
  • Package Settings
    • JsPrettier
      • Settings - Default (to view the defaults)
      • Settings - User (to override the defaults)

Plugin Settings

• debug (default: false)
  When enabled (true), debug info will print to the console - useful for troubleshooting and inspecting generated commands passed to Prettier. Enabling debug mode also sets Prettier's [--log-level] option to debug (when not overridden by additional_cli_args), for printing additional debug information to the console.

• 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 plugin will attempt to find Prettier by:

  1. Locally installed prettier relative to active view.
  2. Locally installed prettier relative to the Sublime Text Project file's root directory.
  3. The current user home directory.
  4. JsPrettier Sublime Text plugin directory.
  5. Globally installed prettier.

  Examples:

  {
      // macOS and Linux examples:
      "prettier_cli_path": "/usr/local/bin/prettier",
      "prettier_cli_path": "/some/absolute/path/to/node_modules/.bin/prettier",
      "prettier_cli_path": "./node_modules/.bin/prettier",
      "prettier_cli_path": "~/bin/prettier",
      "prettier_cli_path": "$HOME/bin/prettier",
      "prettier_cli_path": "${project_path}/bin/prettier",
      "prettier_cli_path": "$ENV/bin/prettier",
      "prettier_cli_path": "$NVM_BIN/prettier",
  
      // Windows examples:
      "prettier_cli_path": "C:/path/to/prettier.cmd",
      "prettier_cli_path": "%USERPROFILE%\\bin\\prettier.cmd"
  }
  

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

  Examples:

  {
      // macOS/Linux:
      "node_path": "/usr/local/bin/node",
      "node_path": "/some/absolute/path/to/node",
      "node_path": "./node",
      "node_path": "~/bin/node",
      "node_path": "$HOME/bin/node",
      "node_path": "${project_path}/bin/node",
      "node_path": "$ENV/bin/node",
      "node_path": "$NVM_BIN/node",
  
      // Windows:
      "node_path": "C:/path/to/node.exe",
      "node_path": "%USERPROFILE%\\bin\\node.exe"
  }
  

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

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 (default: 2)
  Specify the number of spaces per indentation-level.

  IMPORTANT: By default, "tabWidth" is aut