How to use Prettier with React Native

What is Prettier?

Prettier is a tool that formats your code according to a set of rules. It is a tool that helps you to keep your code in a consistent style.

Why use Prettier?

Saves you a lot of time and energy
Makes your code more readable and maintainable
No need to discuss style in code reviews
Supports many languages
Integrated with most editors

I recommend you install Prettier as soon as you start a new React Native project.

Install Prettier

yarn add -D prettier eslint-plugin-prettier

If you are using npm

npm install --save-dev prettier eslint-plugin-prettier

Configure Prettier

Once you have installed Prettier, you need to configure it by creating a ".prettierrc.js" file in your project root. If you already have a ".prettierrc.js" file, you can just modify it to meet your needs.

Here we have a basic example of how a simple configuration file could look like:

module.exports = {
  bracketSpacing: false,
  singleQuote: true,
  trailingComma: "all",
};

I encourage you to read the Prettier documentation to learn more about the options you can configure.

Here we have another example with a few more options:

module.exports = {
  singleQuote: true,
  trailingComma: "es5",
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: "avoid",
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  endOfLine: "auto",
};

After you have configured Prettier, your code should be formatted every time you save it.

Conclusion

Stop wasting time formatting your code manually and start using Prettier!

Go back to Blogs

Buy me a coffee! ☕️