We’ll be making our project look sharp with Prettier

Format Code Style with Prettier in React Native

Speed up your team by putting code formatting debate to rest

We recently added another developer to our team and during onboarding we inevitably turned to discussing styles. From this we decided that ESLint, another essential tool for rooting out bugs, was not enough for communicating the styles we used as a team.

Enter Prettier, an Opinionated Code Formatter. Prettier automatically formats your Javascript and JSX code according to a set of styles widely accepted in the community. It also works great with React Native and existing tooling.

In this article we’ll walk through the basics of setting up Prettier in your project, show how to use Prettier with ESLint, and automate the formatting of future code changes with a precommit step.

Why a Code Formatter

You may be asking yourself why do I need this? Prettier removes the debate about code styles on a team that we’ve all been apart of. This fight is a giant waste of time and notably doesn’t ship features to users!

Prettier also helps you write code faster by reducing the need to format your own code and makes your project more approachable to beginners.

The Basics

Getting started with Prettier is easy. I prefer to save the version locally to my project with either npm or yarn:

// npm
npm i --save-dev prettier
// yarn
yarn install --dev prettier

I then add a script to my package.json to target the local binary to run Prettier on my project. Note: It’s important to use quotes around blobs so Prettier expands them.

"scripts": {
  "prettier": "prettier 'src/**/*.js'"
}

You’ll need to amend the script to match your project source files. If there are rules that you don’t want to apply to your project you can give Prettier options. While these can be passed as CLI flags we added the options to our package.json.

"prettier": {
  "jsxBracketSameLine": true,
  "semi": false,
  "singleQuote": true
}

At this point you should be able to run Prettier with npm run prettier and see all the changes it makes to your project. 🎉

Integration with ESLint

In our project we already had ESlint enabled and still wanted to be notified of those warnings and errors. Fortunately there’s a couple of plugins that make integration easy.

We add eslint-plugin-prettier which will let us know when our code differs from the expected output of Prettier while still supporting any other configurations we have. We also install eslint-config-prettier which will turn off conflicting ESlint rules so we can still use existing ESlint configs.

// npm
npm i --save-dev eslint-plugin-prettier eslint-config-prettier
// yarn
yarn install --dev eslint-plugin-prettier eslint-config-prettier

Then we modify our .eslintrc to use these additions. Note: prettier must come after any other configs defined in extends.

"extends": [
  "standard",
  "prettier",
  "prettier/flowtype",
  "prettier/react",
  "prettier/standard"
],
"plugins": [
  "react",
  "react-native",
  "flowtype",
  "prettier",
  "standard"
],

We also added the recommended script to report .eslintrc rules that conflict with Prettier. After running this we removed any conflicting rules to allow Prettier to do the work.

"scripts": {
    "eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check"
  }

Automatically Formatting New Code

After formatting our existing codebase we’ll want to ensure that code is formatted while we work and when staged for commit. This step is essential if you want to realize coding speed improvements from not having to worry about formatting.

To have our code formatted while we work, we added the Prettier plugin for VSCode. Most editors should have Prettier plugins available to an enable similar format on save feature.

Assuming you’re using git, we make sure all staged files are formatted with a precommit step. We’ll be using to husky and lint-staged to add this to our project.

// npm
npm i --save-dev husky lint-staged
// yarn
yarn install --dev husky lint-staged

Then we add the step to our package.json:

{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "prettier --write",
      "git add"
    ]
  }
}

And that’s it! With these changes you’ll get the best Prettier has to offer. We’re really enjoying the changes it’s made to our project and how much time we save not worrying about formatting while writing code.

Thanks for reading!

Subscribe to our Weekly React Native Newsletter to get the best resources on React Native in your inbox each week. 🙂