Prettier in TextMate / Stoyan's phpied.com

Prettier is a code formatter, great for following consistent coding conventions with 0 effort. Here's how to add it to TextMate, my text editor of choice.

Install Prettier

Globally, so you take advantage of it in any old directory.

npm install --global prettier

If that doesn't work, you probably need to install Node first. So off to the download page you go and then back to the command above.

Config

This is the one I use, I stole it from React and simplified:

'use strict';

module.exports = {
  bracketSpacing: false,
  singleQuote: true,
  jsxBracketSameLine: true,
  printWidth: 80,
  trailingComma: 'all',
};

Save this somewhere in your path, e.g. your home directory:

~/.prettierrc.js

TextMate

Go to menu "Bundles", then "Edit Bundles", then "CSS", then "Menu Actions".

(Doesn't have to be CSS, Prettier formats a lot of things. I just happen to be working on a CSS file)

Then menu "File", then "New", then "Command" from the dropdown.

Then fill out the stuff as you see on the screenshot:

I choose CTRL+Q shortcut as it already exists as "Format CSS" command, which I'm essentially replacing.

The code you need is:

#!/usr/bin/env ruby18
require ENV['TM_SUPPORT_PATH'] + '/lib/textmate'
error = `/usr/local/bin/prettier --write "$TM_FILEPATH"`
puts error

You also need to have the path to node and to prettier (likely the same) in your TextMate path preferences (menu TextMate / Preferences / Variables / PATH). To tell where node is, type which node.

And this is it - save, and start using!