React ~ Prettier - rohit120582sharma/Documentation GitHub Wiki

Prettier is an opinionated code formatter.

Prettier takes your code and reprints it from scratch by taking the line length into account, wrapping code when necessary.

Prettier enforces a consistent code style. It takes the code you write, breaks it down in to an abstract syntax tree (AST) which is just a representation of your code. It then takes that AST, throws away all of your code style you made and prints it back out using a predefined style.

$ npm install --save-dev --save-exact prettier

create a file called .prettierrc file in the root directory of the project. You can put configs here if you hold strong formatting opinions.:

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

Put the following into your package.json. To format a file in-place, use --write.

"scripts": {
  "format": "prettier \"src/**/*.{js,jsx,json}\" --write",
}

Prettier is great to use with Visual Studio Code. Just download this extension.

Pro tip: set VSCode to run Prettier, only when it detects a Prettier config file. In order to do that, set prettier.requireConfig to true and editor.formatOnSave to true.