My first novel is available!

Read Singular

Setting up Prettier in Atom

One of the things that I’ve missed about Go is the incredibly convenient gofmt tool. Through static analysis of your code (that means it converts it into an AST, an intermediary representation) gofmt can take your messy code and rewrite it in a standardized format. It completely eliminates a whole category of code “aesthetics” arguments.

Unfortunately something similar hasn’t existed for Javascript (or Ruby for that matter). Until now.

(dramatic pause)

While Rubyists still get to play pretend with their linters, Javascript developers now have a full featured version of gofmt in Prettier. In short, everyone should use this, it makes life so much better.

Why bother?

But Zack, isn’t eslint good enough?

I guess if you like warnings that you have to fix manually (not everything is autofixable). Personally, I’d rather just let my window lose focus and have everything auto-formatted for me, zero action on my part.

For the lovestruck eslint-ers, there’s also a build chain you can configure where they both run in sequence on every save. What could go wrong?

Option 1: prettier-atom

Since the title of this article references Atom, I’m only going to cover installation in this editor.

Let’s follow the instructions

apm install prettier-atom

Done.

A little deceptive though, as it’s likely not working how you want at this point. Default includes semi-colons on every applicable line, which is either A) exactly what you’d expect or B) the worst thing that has ever happened, deal breaker!!

You will want to coordinate with your team on a configuration, which sadly doesn’t exist in an rc file that can be checked in with the code at this time. Bummer.

If you’re savvy with your config.cson you can share snippets easily enough. Here’s mine:

"prettier-atom":
  formatOnSaveOptions:
    enabled: true
  prettierEslintOptions: {}
  prettierOptions:
    parser: "flow"
    semi: false
    singleQuote: true
    trailingComma: "es5"
  silenceErrors: true

As you can surmise from the above, my team doesn’t like trailing semicolons, prefers single quotes, likes backwards compatible trailing commas, and has implemented Flow (more on that later).

You probably don’t want to silence errors until you’re comfortable that your setup is working.

Option 2: eslint-plugin-prettier

The downside of the above option is that it doesn’t enforce the configuration of Prettier in the repository, so someone else using a different tool won’t necessarily abide by your preferences (trailing commas etc.).

For a more shared config, I’d recommend hooking prettier into eslint via eslint-plugin-prettier. Configuration is referenced on that page, but for reference, my .eslintrc looks like:

"rules": {
  "prettier/prettier": ["error", { "trailingComma": "es5", "semi": false }]
},
"plugins": [
  "react",
  "prettier"
],
"extends": [
  "eslint:recommended",
  "prettier",
  "prettier/react"
]

Enjoy prettier!

Published under programming