Brackets Prettier

Brackets Extension that formats open JavaScript, JSX, Flow, TypeScript, CSS, Less, SCSS, JSON, GraphQL and Markdown files using prettier version 1.13.4.

Installation

Latest Release

To install the latest release of this extension use the built-in Brackets Extension Manager which downloads the extension from the extension registry.

Usage

Brackets Prettier can be run manually on the whole file or on a selection. Use the Toolbar Button with the wand icon, the menu entry Edit > Prettier, the context-menu entry Prettier, or one of the keyboard shortcuts Ctrl-Alt-B (Windows/Linux), Ctrl-Shift-L (Windows), Cmd-Shift-L (Mac), or define your own.

Alternatively it can be enabled to run automatically on save. Use the menu entry Edit > Prettier on Save or the more advanced settings to activate.

Configuration

Prettier Options

Brackets Prettier supports the same options as prettier. The options can be specified in a .prettierrc file on project level. A .prettierrc file, only support written in JSON format.

File Options for Prettier on Save

Brackets Beautify leverages Brackets preferences, which means that you can specify per project settings by defining a .brackets.json in the root directory of your project. With Brackets preferences you can even define per file settings, which is really handy when dealing with third party libraries or minified resources.

Brackets Prettier also support per language settings, which enables you to enable/disabled Prettier on Save for your documents using the Brackets language layer.

The sample .brackets.json below generally enables Prettier on Save and disables it for any JavaScript file in thirdparty, any JavaScript file whose filename contains min, and any JSON file.

{
  "sizuhiko.brackets.prettier.onSave": true,
  "path": {
    "thirdparty/**.js": {
      "sizuhiko.brackets.prettier.onSave": false
    },
    "**min**.js": {
      "sizuhiko.brackets.prettier.onSave": false
    }
  },
  "language": {
    "json": {
      "sizuhiko.brackets.prettier.onSave": false
    }
  }
}

User Key Map for Prettier

Open the keymap.json with the menu entry Debug > Open User Key Map and add an overrides entry. For example:

{
  "documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings",
  "overrides": {
    "Ctrl-Alt-F": "sizuhiko.brackets.prettier"
  }
}

Issues

Brackets Prettier uses prettier to format files and is therefore limited to its capabilities. For any issues concerning the actual formatting please refer to the prettier issues.

License

Brackets Beautify is licensed under the MIT license. prettier is also licensed under the MIT license.