Prettier: The best way to format code in React Native that you must know

prettier

When setting up a website, developers have to integrate lots and lots of codes. What’s more, coding style is an essential part of writing code as a professional. In case you have a short, yet simple coding style, Prettier is a top contender.

On the other hand, thanks to its newest version in 2020, Prettier promises lots of potential benefits. In this article, our devoted team from ArrowHitech is going to guide you in a detailed and thorough way. As a result, hopefully you will gain some knowledge and consider using React Prettier.

Now, let’s break into some key points!

What is Prettier?

Prettier is an opinionated code formatter. To clarify, it provides support for multiple programming languages namely HTML, Angular, JavaScript, JSX, Vue, JSON, and many more. 

In short, it can create a custom coding style that suits your personal use the best from start to finish. But among lots of code formatters, why do we highly recommend React Prettier? Let’s dig into its amazing benefits.

Why React Prettier?

#1. It builds a style guide

So far, this is the best feature that attracts many clients. React Prettier is the only “style guide” that is fully automatic. Here are some comments from customers to show how great has React Prettier helped them:

  • “Our top reason was to stop wasting our time debating style nits.”
  • “Getting tired telling people how to style their product code.”
  • “We want to free mental threads and end discussions around style. While sometimes fruitful, these discussions are for the most part wasteful.
prettier 3
React Prettier makes coding much easier!

#2. It is easy to use and adopt

Don’t think that it is for people with basic IT foundation. For starters, this React Prettier feature is extra helpful because you can start simply by installing a plugin to your editor! Another way is through the CLI. If you need reference, check out this article as it provides useful and detailed explanations. 

#3. It offers effective writing code

Many of us must have encountered this problem. In fact, we spend too much time and effort just to format code styles. However, thanks to Prettier editor integration, a few simple clicks can quickly format the codes.

#4. It can clear all existing codebase

Because you spend much time on building, changing and enforcing many codes, it can crack and lead to incomplete or inconsistent codes. In the long run, a bunch of small incidents like this will double or triple up. To simply solve, React Prettier has it all since it unifies the codebase. As a result, your codebase is much easier to read!

prettier 1
Prettier brings lots of benefits!

Configuration File

Prettier guarantees the same functions and features when a project is copied to a different computer. For that reason, it never supports global configuration. Above all, to save your time, we will present to you a few basic configurations in 2 of the most common programming languages:

JSON:

{

 “trailingComma”: “es5”,

  “tabWidth”: 4,

  “semi”: false,

  “singleQuote”: true

}

JS:

// prettier.config.js or .prettierrc.js

module.exports = {

  trailingComma: “es5”,

  tabWidth: 4,

  semi: false,

  singleQuote: true,

};

If you prefer other languages or already have an existing one, contact ArrowHitech for help!

Combine React Prettier with ESLint and AirBnb Style

This is a common way to maximize Prettier features!

Following these 4 simple steps can result in an optimal solution

  • Firstly, install ESLint & Prettier extensions
  • Then install Packages: there are 2 ways
    • Npm: npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node
    • Npx: npx install-peerdeps –dev eslint-config-airbnb
  • The next step is to set up .prettierrc for any rules
  • Lastly, set .eslintrc.json file (you can paste the following code)

{

  “extends”: [“airbnb”, “prettier”, “plugin:node/recommended”],

  “plugins”: [“prettier”],

  “rules”: {

    “prettier/prettier”: “error”,

    “no-unused-vars”: “warn”,

    “no-console”: “off”,

    “func-names”: “off”,

    “no-process-exit”: “off”,

    “object-shorthand”: “off”,

    “class-methods-use-this”: “off”

  }

}

Above are some basic knowledge and effective features of React Prettier. To sum up, if there is anything unclear, or if you need help integrate it, we are only one call away.

Need help on this issue? Contact ArrowHitech!

Our React native app development experts are glad to help you out on any React Prettier problems with our unique strengths:

  • Rich Experience: Founded in 2007, today, we are one of the leading IT outsourcing companies in Vietnam. We have managed to complete more than 10,000 projects worldwide. Thus, language borders are non-existent when working with us!
  • Low Cost: Located in Vietnam, our labour fee is extremely affordable. Furthermore, we always provide a wide range of profitable selection with different prices. As a result, any customers can choose their favorite and suitable ones.
  • High Quality: Although ArrowHitech provides fair prices, our products are always high quality that you can check out our portfolio to see! Many clients love to work with us and become a long-term partner.
  • Strong Dedication: We believe that dedication and passion is the core value which results in the optimal working experience. With that in mind, Our team always prioritizes customers’ needs and demands.

Final Words

React Prettier is indeed a powerful code formatter that works successfully. That is to say, installing and using it in the most beneficial way is no easy task. In the end, we hope that you’ve learned something new to progress your own coding system. As always, ArrowHitech wishes you the best of good luck and success!

We’d love to hear you at:

Tags

Share