Prettier GitHub

Format code in GitHub comments with Prettier

Installation

GitHub app

This is the recommended and easiest installation method. Install the Prettier GitHub app to some or all of your repos.

Self-hosted

1. or
2. Setup
   1. Register a GitHub app
   2. Use whatever makes sense for you for App name, Description, Homepage URL and User authorization callback URL; leave Setup URL empty
   3. Set Webhook URL to your deployment URL, for example https://prettier-github.herokuapp.com/
   4. Set a Webhook secret and note it down
   5. Select Read & write access for Issues, Pull requests and Repository contents
   6. For Issues and Pull requests, check all Webhook checkboxes; for Repository contents, check only Commit comment
   7. Click on Create GitHub app
   8. Click on Generate private key and save the downloaded file
   9. Note down the app ID (displayed under your username in the right column)
3. Configure environment variables of your deployment
   1. Set GITHUB_KEY to the downloaded private key
   2. Set GITHUB_ID to the app ID
   3. Set GITHUB_WEBHOOK_SECRET to the Webhook secret you configured

Usage

Whenever someone includes a JavaScript code block in a comment, it will be formatted using Prettier.

Before:

After:

You can disable formatting per-comment by writing <!-- prettier-github disable --> anywhere in the comment (except code blocks)

Limitations

Due to lacking GitHub APIs, Prettier GitHub currently doesn't format reviews, review comments and commit comments. See #11

Configuration

Prettier GitHub will use the prettier field in the package.json of the respective repository for configuration. See Prettier's readme for available options. Additionally, you can set langs to an array specifying which languages should be formatted.

Example

package.json:

{
	...
	"prettier": {
		"singleQuote": true,
		"useTabs": true,
		"langs": [
			"js",
			"javascript"
		]
	}
	...
}

This will enforce single quotes and tabs, and will only format code blocks marked as js or javascript.

Development

1. Generate personal access token with the repo scope for your GitHub account
2. Install ngrok for localhost tunnelling
3. Run ngrok http 3000 and note down the URL, for example http://2ab92a92.ngrok.io
4. Set up a webhook for your testing repo
   1. Set Payload URL to the ngrok URL
   2. Set Content type to application/json
   3. Set a Secret and note it down
   4. Select Let me select individual events; then check Commit comment, Issue comment, Issues, Pull request, Pull request review and Pull request review comment and uncheck Push
5. Copy .env.example
   1. Set GITHUB_TOKEN to the personal access token generated earlier
   2. Set GITHUB_WEBHOOK_SECRET to the Webhook secret you configured
6. Run npm install and then npm start

License

MIT